gl.enchant.js 入門 – Step02 Camera3D を使って 3D用カメラを設置しよう!

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

Pocket

gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!!』の Step02 です.

3D 用カメラを設置します. 目の役割の部分ですね. ここでもまだ何も表示されません. この次のステップでは表示物が出るのでもうすこし辛抱してください.

SAMPLE

今回制作するサンプルはこちら.

CODE

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

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js Guide - Step02 Camera3D を使って 3D用カメラを設置しよう!</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>
            // おまじない
            enchant();
            
            window.onload = function() {
                var game = new Game(640, 640);
                
                game.onload = function() {
                    // 3D 用シーン生成
                    var scene = new Scene3D();
                    
                    // ライト生成
                    var light = new DirectionalLight(); // 平行光源生成
                    light.directionZ =-1;               // 向き
                    light.color = [1.0, 1.0, 1.0];      // 色
                    scene.setDirectionalLight(light);   // scene にセット
                    
                    // カメラ生成
                    var camera = new Camera3D();                                // カメラ生生
                    camera.x = 0; camera.y = 0; camera.z = -10;                 // カメラ位置をセット
                    camera.centerX = 0; camera.centerY = 0; camera.centerZ = 0; // 注視点をセット
                    scene.setCamera(camera);                                    // scene にセット
                };
                
                game.start();
            };
        </script>
    </head>
    <body>
        <h1>gl.enchant.js Guide - Step02 Camera3D を使って 3D用カメラを設置しよう!</h1>
    </body>
</html>

TIPS

3D 用カメラを設置しよう

gl.enchant.js では Camera3D というクラスが定義されておりこれを Scene3D にセットすることでカメラを設置することができます.

Camera3D では視点(x, y, z), 注視点(centerX, centerY, centerZ), 上ベクトル(upVectorX, upVectorY, upVectorZ)を設定できます.

  • 視点 … 人で言う目の位置です. ここから 3D オブジェクトを見ることになります.
  • 注視点 … 視点から見る位置を表します.
  • 上ベクトル … 今回は無視します. エースコンバットやマリオギャラクシーといった上下左右が入れ替わるようなゲームを作らないかぎりはデフォルト値で問題ありません.
// カメラ生成
var camera = new Camera3D();                                // カメラ生生
camera.x = 0; camera.y = 0; camera.z = -10;                 // カメラ位置をセット
camera.centerX = 0; camera.centerY = 0; camera.centerZ = 0; // 注視点をセット
scene.setCamera(camera);                                    // scene にセット

次回は, Sphere クラスを使って球体を表示.ついに表示物が出ます!!

TRACK BACK URL

POST COMMENT

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