スタートページ＞ Javascript＞ CANVAS＞ WebGL

WebGL Three.js CANVAS での位置関係

Three.js での CANVAS の座標系におけるオブジェクト（被写体）とカメラの位置関係を扱います。

●座標系

    // 座標軸を表示　　通常は不要
    var axes = new THREE.AxesHelper(1000); // 1000 は長さ
    scene.add(axes);

　ここでは CANVAS が width(横幅) = 400, height(縦幅) = 400 としています。
  Three.js では、CANVAS の中央を原点とし、ｘを横軸、ｙを縦軸にして、
　ｚ軸が画面と垂直方向にあるという座標軸にしています。
　その目盛りは、CANVAS の１画素を 2 にしているようです（未確認）。
　すなわち、(-400,-400)～(400,400) が (x,y) のとれる範囲です。
　y軸が、上が大きい方向になることに留意してください。

●オブジェクト（被写体）の作成（カメラの後に記述）

    // ====================== オブジェクト（被写体）を作成
    var geometry = new THREE.BoxGeometry(sizex, sizey, sizez);  // 被写体の形状とサイズ
    var material = new THREE.MeshNormalMaterial();              // 被写体の表面　ここでは省略時指定とした
    var box = new THREE.Mesh(geometry, material);               // 被写体の命名
    box.position.set(positionx, positiony, positionz);            // 被写体の位置
    scene.add(box);                                               // 被写体の登録（表示はレンダリングで行う）

被写体の位置
  position を与えて確認してください。

被写体のサイズ
　size を変えてみてください。その単位は「被写体の位置」と同じです。
  なお、rotation を変えると被写体の傾き（見る角度）が変わります。（これはレンダリングで記述）

●カメラの位置（オブジェクトの前に記述）

    // ========================================== カメラを作成
    var camera = new THREE.PerspectiveCamera(ca, width / height);
    camera.position.set(cx, cy, cz);

　cx=0, cy=0, cz=1000, ca=45 とは、
　　原点の手前1000の位置から、視覚 45°で見た被写体です。
　cx=200 カメラを (200,0) の手前に移動。全体が左（Ｘの負側）に移動します。cx = 200
　cy=200 カメラを (0,200) の手前に移動。全体が下（Ｙの負側）に移動します。cy = 200
　cz 想定空間の外から見ることを前提としているので、cz ＞ 400 でなければいけません
    近づけると大きく見えます。cz = 500
  ca 視覚を広くする（広角にする）と小さく見えます。ca = 90　

レンダリング’画面表示）

    // ====================== レンダリング
    box.rotation.x = rotationx;      // 回転方向　x, y, z
    box.rotation.y = rotationy;
    box.rotation.z = rotationz;

    renderer.render(scene, camera);　 // レンダリング　これでカメラから見た画面を表示する