斜めから見た状態にするためタイルをアフィン変換で移動させてるけど、これでいいのだろうか?カメラを動かせばいいような気もしたけど…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CubeTest</title> <script src="./Three.js"></script> <script> addEventListener("load", function(){ var camera, scene, renderer; camera = new THREE.Camera(75, window.innerWidth / window.innerHeight, 1, 1000); camera.position.y = -150; camera.position.z = 300; scene = new THREE.Scene(); var radian = 45 * 3.14 / 180; for(var i = -5; i < 5; i++){ for(var j = -5; j < 5; j++){ var groundColor = ((i + j) & 1) == 1 ? 0x999999 : 0x333333; var mesh = new THREE.Mesh(new THREE.PlaneGeometry(25, 25), new THREE.MeshLambertMaterial({ color: groundColor })); mesh.rotation.z = radian; var x = i * 25; var y = j * 25; mesh.position.x = x * Math.cos(radian) - y * Math.sin(radian); mesh.position.y = x * Math.sin(radian) + y * Math.cos(radian); scene.addObject(mesh); } } var canvas = document.getElementById('canvas'); renderer = new THREE.CanvasRenderer(); renderer.setSize(canvas.offsetWidth, 500); canvas.appendChild(renderer.domElement); renderer.render(scene, camera); }, false) </script> </head> <body> <div id="canvas"></div> </body> </html>