マイペースなプログラミング日記

DTMやプログラミングにお熱なd-kamiがマイペースに書くブログ

Three.jsでタイルを並べてみた

斜めから見た状態にするためタイルをアフィン変換で移動させてるけど、これでいいのだろうか?カメラを動かせばいいような気もしたけど…

<!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>