Three.jsを試してみた - マイペースなプログラミング日記

JavaScriptで3Dを描画するThree.jsを試してみた。WebGLも使えるけどCanvasにも描画できる優れもの。でもCanvasだと遅そうだな、俺のイメージで。それで他の人が公開しているソースコードを元にプログラムを作ってみたけど動かなかった。Three.Cubeなんてコンストラクタは無いよ！と怒られたようだ。試しにexampleのコードを見たらnew THREE.CubeGeometryとなっていたので修正。自分なりに書いてみたコードを載せておく。いろんなところのパクリにしかなってないが…こことかここらへんを参考にした

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CubeTest</title>
    <script src="./Three.js"></script>
    <script>

addEventListener("load", function(){
    var camera, scene, renderer, material, mesh;

    camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 500;
    
    scene = new THREE.Scene();
    material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
    mesh = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1, material), new THREE.MeshFaceMaterial());
    scene.addObject(mesh);
    
    var canvas = document.getElementById('canvas');
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(canvas.offsetWidth, 500);
    canvas.appendChild(renderer.domElement);
    
    setInterval(function(){
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        
        renderer.render(scene, camera);
    }, 16);
}, false);

    </script>
  </head>
  <body>
    <div id="canvas"></div>
  </body>
</html>