Three.jsでキューブをレンダリング

threejs-cube.png

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
  <script>
    var width =200;
    var  height =200;
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
 
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize(width,height); // Set the size of the WebGL viewport.
    document.body.appendChild(renderer.domElement); // Append the WebGL viewport to the DOM.
 
    var geometry = new THREE.CubeGeometry(20, 20, 20);
    var material = new THREE.MeshBasicMaterial({ color: 0xA5D9DD ,transparent:true,opacity:0.8}); //色をグリーンに設定
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 30; 
 
    var render = function () {
      cube.rotation.x += 0.01; 
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    };
 
    render();
  </script>
</body>
Bibliography
1. MSDN

cube

サポートサイト Wikidot.com cube