gl.enchant.js - マイペースなプログラミング日記

enchant.jsというHTML5 + JavaScriptベースのゲームエンジンがあるとTwitterで聞き調べたところenchant.jsのWebサイトが見つかった。さらにgl.enchant.jsというものも発見。gl.enchant.jsを使えばWebGLを簡単に使えるらしい。メタセコイアで作った3Dモデルは読み込めるのかと思ったら読み込むプログラムを作っている人がいた。
http://tmlife.net/programming/javascript/gl-enchant-js-mqo-revise.html

まだよくわかってないので既存のプログラムを改造しながら学んでいくことにした。上記のページのサンプルを変更してカメラを物体の周りを回るようにしてみた。物体を回転させるのと同じ動作になるけど

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script type="text/javascript" src="../js/gl.enchant.js/glMatrix-0.9.6.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="../js/gl.enchant.js/collada.gl.enchant.js"></script>
    <script type="text/javascript" src="mqo.gl.enchant.js"></script>
    <script>
      // おまじない
      enchant();
      var MODEL_NAME = 'model/handgun.mqo';
      
      window.onload = function() {
        var game = new Game(600, 400);
        game.fps = 60;
        game.preload(MODEL_NAME);

        game.onload = function() {
          // 3D 用シーン
          var scene = new Scene3D();
          scene.backgroundColor = [0.1, 0.2, 0.25, 1];
          
          // ライト
          var light = new DirectionalLight();
          light.directionZ = 1;
          light.color = [1.0, 1.0, 1.0];
          scene.setDirectionalLight(light);

          // カメラ
          var camera = new Camera3D();
          camera.centerX = 0;
          camera.centerY = 0;
          camera.centerZ = 0;
          scene.setCamera(camera);

          // ターゲット
          var target = new Sprite3D();
          target.set(game.assets[MODEL_NAME]);
          scene.addChild(target);
          
          var angle = 0;

          game.rootScene.addEventListener("enterframe", function(e){
             angle++;
             var theta = angle / 180 * Math.PI;
             camera.z = 50 * Math.sin(theta);
             camera.x = 50 * Math.cos(theta);
          });
        };
        
        game.start();
        
      };
      
    </script>
  </head>
  <body>
  </body>
</html>