JavaScriptの3Dライブラリ three.js を試してみる

JavaScriptで3Dが描けるライブラリ three.js を試してみた。

three.js
https://github.com/mrdoob/three.js/

<!DOCTYPE html>
<html>
<head>
<title>three.js</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/mrdoob/three.js/master/build/Three.js"></script>
</head>
<body>

<script type="text/javascript">
$(function(){
  var width = 800;
  var height = 500;
  function init(){

    var camera = new THREE.Camera(75, width / height , 1, 10000);
    camera.position.z = 1000;

    var scene = new THREE.Scene();

    var geometry = new THREE.CubeGeometry(200, 200, 200);
    var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );

    var mesh = new THREE.Mesh(geometry, material);
    scene.addObject(mesh);

    var renderer = new THREE.CanvasRenderer();
    renderer.setSize(width, height);

    $('#three').append(renderer.domElement);

    mesh.rotation.x = 0.8;
    mesh.rotation.y = 0.3;
    mesh.rotation.z = 0.3;
    renderer.render(scene, camera);

  }
  init();
});
</script>

<div id="three"></div>

</body>
</html>

mesh.rotation の x, y, z をいじれば視点が変わるようだ。