※Google Chrome以外のブラウザでは正確に表示されない部分があります。
■サンプルコード
サンプルコードを大体そのまま動かしながらコードを理解してみる。
(function(){ var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; scene = new THREE.Scene(); geometry = new THREE.Cube(200, 200, 200 ); material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}); mesh = new THREE.Mesh(geometry, material); scene.addObject(mesh); var canvas = document.getElementById('canvas2011030601'); renderer = new THREE.CanvasRenderer(); renderer.setSize(canvas.offsetWidth, 300); canvas.appendChild(renderer.domElement); } function animate() { // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility. requestAnimationFrame(animate); render(); } function render() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } })();
CanvasRendererとあるようにどうやら普通にcanvasで描画しているようだ。
■サンプルコード
以下のようにアレンジしてWebGLRendererを使うようにしてみる。
(function(){ var camera; var scene; var renderer; var mesh; // initialize (function(){ camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; scene = new THREE.Scene(); mesh = new THREE.Mesh( new THREE.Cube(200, 200, 200), new THREE.MeshBasicMaterial({ "color" : 0xff0000, "wireframe" : true }) ); scene.addObject(mesh); var canvas = document.getElementById('canvas2011030602'); renderer = new THREE.WebGLRenderer(); renderer.setSize(canvas.offsetWidth, 300); canvas.appendChild(renderer.domElement); })(); // animation setInterval( function(){ mesh.rotation.x += 0.02; renderer.render(scene, camera); }, 1000 / 60 ); });
以下のように表示される。
アンチエイリアスがないのが気になる。 しかしドキュメントが見当たらなかったのでWebGLRenderer.jsを開いてみた。
_antialias = parameters.antialias !== undefined ? parameters.antialias : false,
75行目あたりに上述の記述があるので、以下のようにオプションを指定した。
(function(){ var camera; var scene; var renderer; var mesh; // initialize (function(){ camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; scene = new THREE.Scene(); mesh = new THREE.Mesh( new THREE.Cube(200, 200, 200), new THREE.MeshBasicMaterial({ "color" : 0xff0000, "wireframe" : true }) ); scene.addObject(mesh); var canvas = document.getElementById('canvas2011030603'); renderer = new THREE.WebGLRenderer({"antialias" : true}); renderer.setSize(canvas.offsetWidth, 300); canvas.appendChild(renderer.domElement); })(); // animation setInterval( function(){ mesh.rotation.x += 0.02; renderer.render(scene, camera); }, 1000 / 60 ); });
以下のようにアンチエイリアスがかかった。但し、Firefoxではアンチエイリアスがかからなかった。
meshを以下のように記述することでテクスチャを貼ることができる。
mesh = new THREE.Mesh( new THREE.Cube( 200, 200, 200, 3, 3, 3, [ new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/lock.png')}), // right new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/face.png')}), // left new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/face.png')}), //top new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/face.png')}), // bottom new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/face.png')}), // back new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/face.png')}) // front ] ), new THREE.MeshFaceMaterial() );
以下のように表示される。
現時点でWebGLに対応しているPCブラウザはGoogle Chrome、Firefoxとなる。残念ながらスマートフォンではandroidのデフォルトのブラウザやMobile SafariでWebGLを見ることはできず、android版のFirefoxでは見ることができる。ちなみにWebGLを使うとMacBookが熱々になる(●´⌓`●)
ピンバック: マイペースなプログラミング日記