gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

gl.enchant.js 用プラグイン debug-camera3d.gl.enchant.js を作りました.

debug-camera3d.gl.enchant.js は gl.enchant.js 上でカメラを自由に動かせるようにするプラグインです. 十字キーもしくはマウスでカメラを動かすことができます.

gl.enchant.js のサンプルプログラムやフィールドの確認, ゲーム途中のデバッグなんかに使って下さい.

sample-img

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 について投稿するかと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT