gl.enchant.js 入門 – Step04 タッチやキーボードでオブジェクトを回せるようにしよう!

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

Pocket

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

キーボードやマウスで Sphere を回転できるようにしてみましょう.

SAMPLE

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

CODE

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

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js Guide - step04 タッチやキーボードでオブジェクトを回せるようにしよう!</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 にセット
                    
                    // 球体
                    var sphere = new Sphere();          // 球体生成
                    sphere.x = sphere.y = sphere.z = 0; // 位置をセット
                    scene.addChild(sphere);             // scene にセット
                    
                    // モデルを回転
                    var phi   = 0;      // X軸回転値
                    var theta = 0;      // Y軸回転値
                    var offsetX = 0;    // touch の offsetX
                    var offsetY = 0;    // touch の offsetY
                    var matrix = new mat4.create(); // 回転行列用マトリックスバッファ
                    
                    // タッチイベント登録
                    game.rootScene.addEventListener("touchstart", function(e) {
                        offsetX = e.x;
                        offsetY = e.y;
                    });
                    game.rootScene.addEventListener("touchmove", function(e) {
                        // タッチによる回転
                        theta += (e.x -offsetX) / 160;  // 差分/160だけ回転
                        offsetX = e.x;
                        phi += (e.y - offsetY) / 160;   // 差分/160だけ回転
                        offsetY = e.y;
                    });
                    
                    // 更新イベント登録
                    game.rootScene.addEventListener("enterframe", function(e)
                    {
                        var input = game.input;
                        
                        // 十字キーによる回転
                        if (game.input.up)    { phi -= 0.05; }
                        if (game.input.down)  { phi += 0.05; }
                        if (game.input.right) { theta += 0.05; }
                        if (game.input.left)  { theta -= 0.05; }
                        
                        // Y軸, X軸回転行列を作成
                        mat4.identity(matrix);          // 単位行列化
                        mat4.rotateY(matrix, theta);    // Y軸回転
                        mat4.rotateX(matrix, phi);      // X軸回転
                        // 回転行列をセット
                        sphere.rotation = matrix;
                    });
                };
                
                game.start();
            };
        </script>
    </head>
    <body>
        <h1>gl.enchant.js Guide - Step04 タッチやキーボードでオブジェクトを回せるようにしよう!</h1>
    </body>
</html>

TIPS

タッチやキーボードでオブジェクトを回転できるようにしよう!

この step ではタッチやキーボードに反応する処理を追加しています.

処理の流れは

  • タッチもしくはキーボードで theta(横回転値), phi(縦回転値)が変わる処理を追加
  • matrix(単位行列)を用意
  • theta, phi の値をつかってY軸回転, X軸回転させる
  • sphere.rotation に matrix をセット

となっています.

// モデルを回転
var phi   = 0;      // X軸回転値
var theta = 0;      // Y軸回転値
var offsetX = 0;    // touch の offsetX
var offsetY = 0;    // touch の offsetY
var matrix = new mat4.create(); // 回転行列用マトリックスバッファ

// タッチイベント登録
game.rootScene.addEventListener("touchstart", function(e) {
    offsetX = e.x;
    offsetY = e.y;
});
game.rootScene.addEventListener("touchmove", function(e) {
    // タッチによる回転
    theta += (e.x -offsetX) / 160;  // 差分/160だけ回転
    offsetX = e.x;
    phi += (e.y - offsetY) / 160;   // 差分/160だけ回転
    offsetY = e.y;
});

// 更新イベント登録
game.rootScene.addEventListener("enterframe", function(e)
{
    var input = game.input;
    
    // 十字キーによる回転
    if (game.input.up)    { phi -= 0.05; }
    if (game.input.down)  { phi += 0.05; }
    if (game.input.right) { theta += 0.05; }
    if (game.input.left)  { theta -= 0.05; }
    
    // Y軸, X軸回転行列を作成
    mat4.identity(matrix);          // 単位行列化
    mat4.rotateY(matrix, theta);    // Y軸回転
    mat4.rotateX(matrix, phi);      // X軸回転
    // 回転行列をセット
    sphere.rotation = matrix;
});

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

ホントに全体的にざっくりしちゃいましたw 質問や間違いなどあれば気軽に連絡下さい.

TRACK BACK URL

POST COMMENT

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

COMMENT