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 をいじれば視点が変わるようだ。