gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました
gl.enchant.js 用プラグイン debug-camera3d.gl.enchant.js を作りました.
debug-camera3d.gl.enchant.js は gl.enchant.js 上でカメラを自由に動かせるようにするプラグインです. 十字キーもしくはマウスでカメラを動かすことができます.
gl.enchant.js のサンプルプログラムやフィールドの確認, ゲーム途中のデバッグなんかに使って下さい.
Sample And Download
debug-camera3d.gl.enchant.js を使っているサンプルはこちら.
キーボードの十字キーもしくはマウスでドラッグしてもらえばカメラが動くのが分かるかと思います.
また’z’を押しながら操作すると注視点移動, ‘x’を押しながら操作するとズームイン/ズームアウトします.
space キーでリセットです.
プラグインとサンプルのダウンロードはこちらからできます.
Code
debug-camera3d.gl.enchant.js の使用例です.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gl.enchant.js Plugin - debug-camera3d.gl.enchant.js - 最小サンプル</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="../js/gl.enchant.js/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="../js/gl.enchant.js/enchant.js"></script>
<script type="text/javascript" src="../js/gl.enchant.js/gl.enchant.js"></script>
<script type="text/javascript" src="../js/gl.enchant.js/primitive.gl.enchant.js"></script>
<script type="text/javascript" src="debug-camera3d.gl.enchant.js"></script>
<script>
// おまじない
enchant();
// ちょっとだけ拡張
Camera3D.prototype.setEye = function(x, y, z) { this.x = x; this.y = y; this.z = z; };
Camera3D.prototype.setCnt = function(x, y, z) { this.centerX = x; this.centerY = y; this.centerZ = z; };
Camera3D.prototype.setUp = function(x, y, z) { this.upVectorX = x; this.upVectorY = y; this.upVectorZ = z; };
// メイン処理
window.onload = function() {
var game = new Game(640, 640);
//var game = new Game(window.innerWidth, window.innerHeight);
game.fps = 60;
game.keybind(90, 'a'); // z
game.keybind(88, 'b'); // x
game.keybind(32, "space"); // space
game.onload = function() {
// シーン生成
var scene = new Scene3D();
// ライトをセット
var light = new DirectionalLight();
light.directionZ = 1;
scene.setDirectionalLight(light);
// 通常時カメラ
var camera = new DebugCamera();
camera.setDirectionFromAngle(15, 0);
camera.setCnt(0, 0, 0);
scene.setCamera(camera);
// キューブ設置
for (var i=0; i<3; ++i) {
for (var j=0; j<3; ++j) {
var cube = new Cube();
cube.x = (j-1)*2; cube.y = 0; cube.z = (i-1)*2;
scene.addChild(cube);
}
}
// 更新関数を登録
game.rootScene.addEventListener("enterframe", function(e) {
// カメラ更新
camera.update(game.input);
});
// space キーを押した際は camera のパラメータをリセットする
game.addEventListener("spacebuttondown", function(e) { camera.reset(); });
};
game.start();
};
</script>
</head>
<body>
<h1>gl.enchant.js Plugin - debug-camera3d.gl.enchant.js - 最小サンプル</h1>
</body>
</html>
Usage
debug-camera3d.gl.enchant.js を使用する流れは,
-
Camera3D クラスと同じように生成してシーンにセットする
var camera = new DebugCamera(); scene.setCamera(camera);
-
最初の向きを設定. 第一引数が縦回転の角度(Degree値), 第二引数が横回転の角度(Degree値)
camera.setDirectionFromAngle(15, 0);
-
どこかしらの更新関数で update を呼ぶ. 引数は input と タッチ移動量(省略可)です.
// 更新関数を登録 game.rootScene.addEventListener("enterframe", function(e) { // カメラ更新 camera.update(game.input, dx/game.width, dy/game.height); // キーボードだけなら下記で ok // camera.update(game.input); });
となっています.
そろそろネタが尽きて...こないw 書きたいのがありすぎるww gl.enchant.js 様様です!!
とりあえず今月一杯はほぼ毎日 gl.enchant.js について投稿するかと思います.
これは便利!
これは便利! / “gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました | TM Life” http://t.co/vNgxllLJ
これは便利! / “gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました | TM Life” http://t.co/vNgxllLJ
カメラ動かして遊んでちょ♪♪
『gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました』
http://t.co/NoSeXv1u
#javascript #webgl
[…] gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました […]