<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="three/build/Three.js" type="text/javascript"></script> </head> <body> <script> var c = function(){ var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene.add( camera ); geometry = new THREE.CubeGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { // note: three.js includes requestAnimationFrame shim requestAnimationFrame( animate ); render(); } function render() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); } } new c(); </script> </body> </html>
mrdoob/three.js
サンプルをそのまま書いたけど。
すごいなjsでこんなにいろいろできるんだ!
ブラウザだけで3Dゲームが作れそう。
でも残念ながら使ってるノートPCではビデオカードが対応しておらず、
WebGLのサンプルが見れない。
canvasだけでもそれっぽく見えないこともないけどなー。