Meshの位置を変えて複数の立方体を作成する

demo

Meshの位置を変えて複数の立方体を作成する

　　//ジオメトリーを生成
    var geometry = new THREE.CubeGeometry(60,60,60);
    //マテリアル(ランバート反射)を生成
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //キューブの個数
    var cubeNum = 3;
    
    for(var i = 0;i < cubeNum;i++){
        //メッシュを生成
        var cube = new THREE.Mesh(geometry,material);
        //キューブの座標
        cube.position.x = -100 + 80 * i;
        cube.position.y = 0;
        cube.position.z = 0;
        
        //メッシュをシーンに追加
        scene.add(cube);
    }

最初CubeGeometryの引数が、立方体の座標であると誤解していた。これは立方体の大きさを表している。すなわちwidth,height,depthである。
その他の引数はドキュメントを参考にしてもらいたい。
three.js docs

・参考サイト
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（4/5 ページ） - ＠IT

カメラアニメーション

WebGLでは立体自体を動かすかカメラの視点を変えないと、3Dであることがわかりづらい。というかおもしろくない笑。今回は個々の立体を回転させるのは、立体が複数個あるので面倒。それでカメラの視点をアニメーションで動かしてみることにした。

　　//アニメーション
    function animate(){
        var timer = new Date().getTime() * 0.0008;
        
        //カメラの位置
        camera.position.x = Math.cos(timer) * 200;
        camera.position.z = Math.sin(timer) * 200 + 500;
        //注視点を指定
        camera.lookAt(scene.position);
        
        renderer.render(scene,camera);
        //繰り返し処理
        requestAnimationFrame(animate);
    }
    animate();

カメラの位置を変えているだけ。sinやcosを使っているのは下のサイトを参考にしたからw
https://threejsdoc.appspot.com/doc/three.js/examples/canvas_camera_orthographic.html