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 を少し修正して使いやすくしてみました.

Sample and Download

今回制作したサンプルはこちら.

操作方法はこちら

操作方法

回転 マウスでドラッグ
移動 ‘z’ を押しながらマウスでドラッグ & ドロップ
ズーム マウスホイールを回転

一般的なモデル編集ツールにあわせています.

Donwload はこちらから出来ます.

Usage

使い方はいたって簡単. DebugCamera3D インスタンスを生成し, enable を呼ぶだけです.

var camera = new DebugCamera3D();
scene.setCamera(camera);
camera.enable(game.rootScene);

これだけでマウスの動作によってカメラが動くようになります.

enable に渡している引数が Scene3D ではなく game が持っている Scene である点にだけ注意してください.

Code

今回制作したサンプルの全体コードです.

<!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="floor.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 DebugCamera3D();
                    scene.setCamera(camera);
                    camera.enable(game.rootScene);
                    
                    // ラベル
                    var cameraInfoLabel = new Label();
                    cameraInfoLabel.moveTo(12, 20);
                    cameraInfoLabel.color   = "white";
                    cameraInfoLabel.font    = "20px 'Consolas', 'Monaco', 'MS ゴシック'";
                    cameraInfoLabel._element.style.textShadow = "2px 2px 2px black";
                    cameraInfoLabel._element.style.whiteSpace = "pre";
                    game.rootScene.addChild(cameraInfoLabel);
                    cameraInfoLabel.addEventListener("enterframe", function() {
                        this.text = "";
                        this.text += "[CAMERA PARAMETER]<br />";
                        this.text += " Eye  : (" + camera.x.toFixed() + ',' + camera.y.toFixed() + ',' + camera.z.toFixed() + ")<br />";
                        this.text += " Cnt  : (" + camera.centerX.toFixed() + ',' + camera.centerY.toFixed() + ',' + camera.centerZ.toFixed() + ")<br />";
                        this.text += " Up   : (" + camera.upVectorX.toFixed() + ',' + camera.upVectorY.toFixed() + ',' + camera.upVectorZ.toFixed() + ")<br />";
                        this.text += " Theta: " + camera.theta.toFixed() + "<br />";
                        this.text += " Phi  : " + camera.phi.toFixed() + "<br />";
                        this.text += " Distance  : " + camera.distance.toFixed() + "<br />";
                        this.text += " Direction : (" + camera.direction[0].toFixed(2) + ',' + camera.direction[1].toFixed(2) + ',' + camera.direction[2].toFixed(2) + ")<br />";
                    });
                    
                    // 床
                    var floor = new Floor(100, 100, 17, 17, "red", "white");
                    floor.x = 0; floor.y =-1; floor.z = 0;
                    scene.addChild(floor);
                    
                    // 分かりやすいように注視点に球体を表示しておく
                    var sphere = new Sphere();
                    scene.addChild(sphere);
                    
                    // space キーを押した際は camera のパラメータをリセットする
                    game.addEventListener("spacebuttondown", function(e) { camera.reset(); });
                };
                
                game.start();
            };
            
        </script>
    </head>
    
    <body>
    </body>
    
</html>

一時間後ぐらいにメタセコの記事を上げます. よかったら見てください.

TRACK BACK URL

POST COMMENT

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

COMMENT