Lineメソッドを用いて、格子状の背景を設定

demo

平行投影カメラ

平行投影カメラで撮影すると、遠近感がなくなり、近くのものも遠くのものも同じ大きさに見える。反対に遠近法を考慮する透視投影カメラ(PerspectiveCamera)もある。これを使ってカメラワークを回転させると、酔う感じが強い気がする。それで今回は見やすい平行投影カメラを使用することにした。

OrthographicCamera - three.js wiki - atwiki（アットウィキ）
PerspectiveCamera - three.js wiki - atwiki（アットウィキ）

・参考にしたデモ
https://threejsdoc.appspot.com/doc/three.js/examples/canvas_camera_orthographic.html

    //平行投影カメラにおける視線の領域
    var left = - window.innerWidth;
    var right = window.innerWidth;
    var top = window.innerHeight;
    var bottom = - window.innerHeight;
    
    //クリッピング手前
    var near = -2000;
    //クリッピング奥
    var far = 1000;
    
    //平行投影カメラを生成
    camera = new THREE.OrthographicCamera( left , right , top , bottom , near , far );
    camera.position.x = 200;
    camera.position.y = 100;
    camera.position.z = 200;　　

透視投影カメラと同様に引数にはnearとfarがある。

格子状の背景を作成

    //Gridを作成
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-500,0,0)));
    geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(500,0,0)));
    
    
    for(var i = 0;i < 20;i++){
        var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0xff0000,opacity:0.2}));
        line.position.z = ( i * 50 ) - 500;
        scene.add(line);
        
        var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
        line.position.x = ( i * 50 ) - 500;
        line.rotation.y = 90 * Math.PI / 180;
        scene.add(line);
        

        //横壁
        var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
        line.position.x = ( i * 50 ) - 500;
        line.position.y = 500;
        line.position.z = - 500;
　　　　//回転
        line.rotation.z = 90 * Math.PI / 180;
        scene.add(line);
    }　　

横壁の部分は地面の格子を平行移動させて、回転させている。

ジオメトリーの設定の確認

「V」からはじまる英語が多いので、意味を確認する。

用語	意味
vertices(vertexの複数形)	頂点
vector	ベクトル

geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-500,0,0)));　　

上のコード意味をもう一度確認する。vertices(vertexの複数形)であることを考えると、
1.位置ベクトル(-500,0,0)を設定する
2.その点を頂点に設定
3.それを頂点の集合に追加する
という流れと見ることができる。