Three.js -2

座標系の確認と座標軸の表示

xyz、それぞれどのように描画されるかを確認するのと同時に、定義済みのオブジェクトをつかい、座標軸を表す複合オブジェクトを作成する。

index.html

今回もTutorial 1に倣ってlib_int/tutorial2.jsを読み込むhtmlを作成する。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Three.js My Tutorial 2</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,user-scalable=0" />

        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />

        <script charset="utf-8" src="lib_ext/three.min.js"></script>
        <script charset="utf-8" src="lib_int/tutorial2.js"></script>
    </head>

    <body>
    </body>
</html>

tutorial2.js

var main = function() {

    var vectorZero = new THREE.Vector3(0, 0, 0);
    var vectorUnitX = new THREE.Vector3(1, 0, 0);
    var vectorUnitY = new THREE.Vector3(0, 1, 0);
    var vectorUnitZ = new THREE.Vector3(0, 0, 1);

    var vectorForward = vectorUnitZ;
    var vectorLeft = vectorUnitX;
    var vectorUp = vectorUnitY;

    // 各種設定値
    var pixWidthScreen = 800;
    var pixHeightScreen = 600;

    // レンダラーの初期化
    // = WebGLの有効化+HTMLへ要素の追加
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(pixWidthScreen, pixHeightScreen);
    document.body.appendChild(renderer.domElement);

    // シーンの初期化
    var scene = new THREE.Scene();
    scene.position = vectorZero;

    // カメラの初期化
    var camera = new THREE.PerspectiveCamera(130, pixWidthScreen / pixHeightScreen, 0.25, 128); // 透視投影の場合
    //var camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0.25, 128); // 平行投影の場合
    camera.visible = false;
    camera.position.set(2, 0.5, 1);
    camera.lookAt(vectorZero);
    scene.add(camera);

    // シーンオブジェクト1 光源の初期化
    var light = new THREE.PointLight(0xffffff, 1, 16); // 白色光の点光源
    light.position.set(1, 1, 1);
    scene.add(light);

    // シーンオブジェクト2 座標軸の初期化
    var axes = new THREE.Object3D();
    {
        var axisXBody = new THREE.Mesh(
            new THREE.CylinderGeometry(0.01, 0.05, 1, 4),
            new THREE.MeshBasicMaterial({color: 0xff0000})
        );
        axisXBody.translateX(0.5);
        axisXBody.quaternion.setFromAxisAngle(vectorUnitZ, -Math.PI / 2);
        axes.add(axisXBody);

        var axisXHead = new THREE.Mesh(
            new THREE.CylinderGeometry(0.01, 0.05, 0.125, 4),
            new THREE.MeshBasicMaterial({color: 0xff0000})
        );
        axisXHead.translateX(0.9375);
        axisXHead.quaternion.setFromAxisAngle(vectorUnitZ, -Math.PI / 2);
        axes.add(axisXHead);
    
        var axisYBody = new THREE.Mesh(
            new THREE.CylinderGeometry(0.01, 0.05, 1, 4),
            new THREE.MeshBasicMaterial({color: 0x00ff00})
        );
        axisYBody.translateY(0.5);
        axes.add(axisYBody);
    
        var axisYHead = new THREE.Mesh(
            new THREE.CylinderGeometry(0.01, 0.05, 0.125, 4),
            new THREE.MeshBasicMaterial({color: 0x00ff00})
        );
        axisYHead.translateY(0.9375);
        axes.add(axisYHead);
    
        var axisZBody = new THREE.Mesh(
            new THREE.CylinderGeometry(0.01, 0.05, 1, 4),
            new THREE.MeshBasicMaterial({color: 0x0000ff})
        );
        axisZBody.translateZ(0.5);
        axisZBody.quaternion.setFromAxisAngle(vectorUnitX, Math.PI / 2);
        axes.add(axisZBody);

        var axisZHead = new THREE.Mesh(
            new THREE.CylinderGeometry(0.01, 0.05, 0.125, 4),
            new THREE.MeshBasicMaterial({color: 0x0000ff})
        );
        axisZHead.translateZ(0.9375);
        axisZHead.quaternion.setFromAxisAngle(vectorUnitX, Math.PI / 2);
        axes.add(axisZHead);
    }
    scene.add(axes);

    // シーンオブジェクト3 球の初期化
    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(0.5, 16, 16, 16),
        new THREE.MeshPhongMaterial({color: 0x00ffff})
    )
    sphere.position.set(0, 0, 0);
    scene.add(sphere);


    // 1回のみ描画
    renderer.render(scene, camera);

    return;
};


window.addEventListener("DOMContentLoaded", main, false);

完成

tutorial2

Left / Up / Forward

カメラのUpがUnitYになっているので、これを特に変更しなければオブジェクトは以下の方向で描画される事になる。

  • 左方向:+X
  • 上方向:+Y
  • 前方向:+Z

メモ

new THREE.CylinderGeometry(上底面半径, 下底面半径, 高さ, 円の分割数)

ドキュメント:http://threejs.org/docs/#Reference/Extras.Geometries/CylinderGeometry
円筒形のジオメトリを作成する。
第5引数以降も指定すれば、完全な円形でなく部分円の円筒を作ることも可能。

new THREE.Object3D()

ドキュメント:http://threejs.org/docs/#Reference/Core/Object3D
何もない空のオブジェクト(というか、オブジェクトのベースになっているオブジェクト)。
いくつかのプリミティブを.addすることで、それらをひとまとめにした親オブジェクトとして扱える。

new THREE.MethBasicMaterial(属性)

ドキュメント:http://threejs.org/docs/#Reference/Materials/MeshBasicMaterial
最も基本的なマテリアルを作成する。
これは陰影計算もなく、光源の影響も受けない(純粋なべた塗り状態)。

new THREE.MethPhongMaterial(属性)

ドキュメント:http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial
法線情報を利用した陰影計算を行うマテリアルを作成する。
法線情報および光源の影響を受けるため、これを利用したオブジェクトの描画には、光源の追加が必須。

次はアニメーションループと、画面サイズ(リサイズ)に合わせたViewportの変更について調査したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です