three.js r73 　Google Chrome 46.0.2490.86 m

最近仕事ばっかりやっててすっかり趣味プロご無沙汰でしたが、ちょっとだけ3Dやります。
ということでthree.jsやります。フレームワーク使わないでWebGLプログラミングは既にやってるので今更感が半端ないですがまあいいでしょう。

まずは three.js をthree.js公式サイトのdownloadリンクからダウンロードします。
ダウンロードしたら解凍します。いろいろファイルがありますが、使うファイルは three.js または three.min.js です。

次に開発ですが、TypeScriptを使用します。ソースをアップしますのでTypeScriptのソースを全コピーして PlayGround サイトでJavaScriptにコンパイルしてください。
JavaScriptソースを使用して実行します。

class myThree
{
   private renderer = null;
   private camera = null;
   private mesh = null;
   private rotation = new THREE.Vector3( 0, 0, 0 );
   private scene = null;
   
   private _width: number = 600;
   private _height: number = 400;
   
   public get width(){ return this._width }
   public set width( value:number )
   {
      this.dispose();
      this._width = value;
      this.changeScene( document.getElementById("light").selectedIndex, document.getElementById("mesh").selectedIndex );
   }
   
   public get height(){ return this._height }
   public set height( value:number )
   {
      this.dispose();
      this._height = value;
      this.changeScene( document.getElementById("light").selectedIndex, document.getElementById("mesh").selectedIndex );
   }

   // レンダラ―作成
   private createRenderer()
   {
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( this.width, this.height );
      renderer.setClearColor(0xf0f0ff);
      
      return renderer;
   }

   // カメラ作成
   private createCamera()
   {
      const fov:number = 60;
      const aspect:number = this.width / this.height;
      const znear:number = 1.0;
      const zfar:number = 1000.0;
      var camera = new THREE.PerspectiveCamera( fov, aspect, znear, zfar );
      // カメラ視点
      camera.position.set( 0.0, 0.0, 50.0 );
      // カメラの注視点
      camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
      
      return camera;
   }

   // メッシュ作成
   private createMesh( meshIndex:number )
   {
      switch (meshIndex)
      {
         // 箱メッシュ
         // http://threejs.org/docs/#Reference/Extras.Geometries/BoxGeometry
         case 0:
            var geometry = new THREE.BoxGeometry(10, 10, 10);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 円メッシュ
         // http://threejs.org/docs/#Reference/Extras.Geometries/CircleGeometry
         case 1:
            var geometry = new THREE.CircleGeometry( 10, 12 );
            // THREE.DoubleSide:両面表示
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide });
            var mesh = new THREE.Mesh( geometry, material );
            return mesh;
            break;

         // 円柱メッシュ
         // http://threejs.org/docs/#Reference/Extras.Geometries/CylinderGeometry
         case 2:
            var geometry = new THREE.CylinderGeometry(5, 5, 20, 12);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 12面体
         // http://threejs.org/docs/#Reference/Extras.Geometries/DodecahedronGeometry
         case 3:
            var geometry = new THREE.DodecahedronGeometry(10, 0);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 押し出し
         // http://threejs.org/docs/#Reference/Extras.Geometries/ExtrudeGeometry
         case 4:
            var shapes = new THREE.Shape([
                   new THREE.Vector2( -2,-2 ),
                   new THREE.Vector2( -2, 2 ),
                   new THREE.Vector2(  2, 2 ),
                   new THREE.Vector2(  2,-2 )
                ]);
            var options = {
                   bevelEnabled: true,   // べベル押し出しを有効にする
                   bevelSegments: 6,
                   amount: 10            // 押し出し量
                };
            var geometry = new THREE.ExtrudeGeometry( shapes, options );
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 20面体
         // http://threejs.org/docs/#Reference/Extras.Geometries/IcosahedronGeometry
         case 5:
            var geometry = new THREE.IcosahedronGeometry(10, 0);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 旋盤( ラインに沿って回転オブジェクトを生成する )
         // http://threejs.org/docs/#Reference/Extras.Geometries/LatheGeometry
         case 6:
            var points = [];
            for ( var i=0; i<10; i++ )
            {
               points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15, 0, ( i - 5 ) * 2 ) );
            }
            var geometry = new THREE.LatheGeometry( points );
            var material = new THREE.MeshPhongMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
            var mesh = new THREE.Mesh( geometry, material );
            return mesh;
            break;

         // 8面体
         // http://threejs.org/docs/#Reference/Extras.Geometries/OctahedronGeometry
         case 7:
            var geometry = new THREE.OctahedronGeometry(10, 0);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // パラメトリック
         // http://threejs.org/docs/#Reference/Extras.Geometries/ParametricGeometry
         case 8:
            alert( "未実装なメッシュ" );
            return null;
            break;

         // 平面メッシュ
         // http://threejs.org/docs/#Reference/Extras.Geometries/PlaneGeometry
         case 9:
            var geometry = new THREE.PlaneGeometry(10, 10, 0);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // ポリゴンメッシュ
         // http://threejs.org/docs/#Reference/Extras.Geometries/PolyhedronGeometry
         case 10:
            // ポリゴンの頂点の座標
            var vertices = [
                              -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
                              -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
                           ];
            // 頂点のインデックス
            var faces = [
                            2,1,0,    0,3,2,
                            0,4,7,    7,3,0,
                            0,1,5,    5,4,0,
                            1,2,6,    6,5,1,
                            2,3,7,    7,6,2,
                            4,5,6,    6,7,4
                       ];
            var geometry = new THREE.PolyhedronGeometry( vertices, faces, 6, 1 );
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // リング
         // http://threejs.org/docs/#Reference/Extras.Geometries/RingGeometry
         case 11:
            var geometry = new THREE.RingGeometry(4, 10, 16);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // シェイプ
         // http://threejs.org/docs/#Reference/Extras.Geometries/ShapeGeometry
         case 12:
            var shapes = new THREE.Shape();
            shapes.moveTo( 0,0 );
            shapes.lineTo( 0, 5 );
            shapes.lineTo( 10, 5 );
            shapes.lineTo( 10, 0 );
            shapes.lineTo( 0, 0 );
            var geometry = new THREE.ShapeGeometry( shapes );
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 球体
         // http://threejs.org/docs/#Reference/Extras.Geometries/SphereGeometry
         case 13:
            var geometry = new THREE.SphereGeometry(10, 8, 8);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // 4面体
         // http://threejs.org/docs/#Reference/Extras.Geometries/TetrahedronGeometry
         case 14:
            var geometry = new THREE.TetrahedronGeometry(10, 0);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // テキスト
         // http://threejs.org/docs/#Reference/Extras.Geometries/TextGeometry
         case 15:
            alert( "未実装なメッシュ" );
            return null;
            break;

         // トーラス
         // http://threejs.org/docs/#Reference/Extras.Geometries/TorusGeometry
         case 16:
            var geometry = new THREE.TorusGeometry(10, 4, 6, 16);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // トーラスむすびめ
         // http://threejs.org/docs/#Reference/Extras.Geometries/TorusKnotGeometry
         case 17:
            var geometry = new THREE.TorusKnotGeometry(10, 4, 32, 16);
            var material = new THREE.MeshPhongMaterial({ color: 0x0000ff });
            var mesh = new THREE.Mesh(geometry, material);
            return mesh;
            break;

         // チューブ
         // http://threejs.org/docs/#Reference/Extras.Geometries/TubeGeometry
         case 17:
            alert( "未実装なメッシュ" );
            return null;
            break;
         
         default:
            alert( "無効なライトです" );
            break;
        }

        return null;
   }

   // 地面メッシュ作成
   private createPlaneMesh()
   {
      var geometry = new THREE.BoxGeometry(50, 5, 50);
      var material = new THREE.MeshPhongMaterial({ color: 0x00af00 });
      var mesh = new THREE.Mesh(geometry, material);
      mesh.position.set(0, -15, 0);
      return mesh;
   }
   
   // シーン作成
   private createScene()
   {
      var scene = new THREE.Scene();
      return scene;
   }

   // ライト作成
   private createLight( lightIndex: number)
   {
      switch( lightIndex )
      {
         // 環境光
         // http://threejs.org/docs/#Reference/Lights/AmbientLight
         case 0:
            // 環境光の色
            var ambientLight = new THREE.AmbientLight( 0x505050 );
            return ambientLight;
            break;
            
         // 平行光源
         // http://threejs.org/docs/#Reference/Lights/DirectionalLight
         case 1:
            // 平行光源の色、強度
            var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
            // 光源から原点に向かう平行光源の方向ベクトル
            directionalLight.position.set( 1.0, 3.0, 2.0);
            return directionalLight;
            break;
      
         // 点光源
         // http://threejs.org/docs/#Reference/Lights/PointLight
         case 2:
            // 点光源の色、強度、減衰率( 0で減衰なし )
            var pointLight = new THREE.PointLight( 0xffffff, 1, 0 );
            // 点光源の座標
            pointLight.position.set(10.0, 10.0, 10.0);
            return pointLight;
            break;

         // 半球ライト
         // http://threejs.org/docs/#Reference/Lights/HemisphereLight
         case 3:
            // 空の色、地面の色、強度
            var hemisphereLight = new THREE.HemisphereLight( 0xa0a0ff, 0xa0ffa0, 1 );
            return hemisphereLight;
            break;

         // スポットライト
         // http://threejs.org/docs/#Reference/Lights/SpotLight
         case 4:
            // 色、強度、光が届く距離、光の範囲( 最大値：Math.PI/2 )、減衰率、光が暗くなる量
            var spotLight = new THREE.SpotLight(0xffffff, 1, 40, Math.PI / 3, 2, 0.5);
            // ライトの視点
            spotLight.position.set(5.0, 10.0, 0.0);
            // ライトの注視点
            spotLight.lookAt( new THREE.Vector3( 0, 0, 0 ) );            
            return spotLight;
            break;

         default:
            alert( "無効なライトです" );
            break;
      }
      
      return null;
   }
   
   // シーン変更
   public changeScene( lightIndex:number, meshIndex:number )
   {
      if( this.renderer == null )
      {
         this.renderer = this.createRenderer();
         document.body.appendChild( this.renderer.domElement );
      }

      if( this.camera == null )
      {
         this.camera = this.createCamera();
      }
      
      this.scene = this.createScene();
      this.scene.add(this.createLight(lightIndex));

      this.scene.add(this.createPlaneMesh());
      this.mesh = this.createMesh(meshIndex);
      this.scene.add(this.mesh);
   }
   
   // メッシュのアニメーション
   public animationMesh( x:number, y:number, z:number )
   {
      if( this.mesh != null )
      {   
         this.rotation.x += x;
         this.rotation.y += y;
         this.rotation.z += z;
         
         this.mesh.rotation.set( this.rotation.x, this.rotation.y, this.rotation.z );
      }
   }
   
   // レンダリング
   public render()
   {
      if( this.renderer != null )
      {
         this.renderer.render( this.scene, this.camera );      
      }
   }
   
   public dispose()
   {
      if( this.renderer != null )
      {
         var element = document.getElementsByTagName("canvas");
         if( element.length == 1 )
         {
            document.body.removeChild(element[0]);
         }
         this.renderer.dispose();
         this.renderer = null;
      }
      this.camera = null;
   }
}

var mythree = new myThree();

// シーンの初期化
function initialize()
{
   if( mythree != null )
   {
      mythree.changeScene(document.getElementById( "light" ).selectedIndex,
                          document.getElementById( "mesh" ).selectedIndex );
   }
}

// メインループ
function main()
{
   ( function renderLoop ()
      {
         requestAnimationFrame( renderLoop );
         mythree.animationMesh( 0, 0.005, 0.005 );
         mythree.render();
      }
   )();
}