Three.js -1

インストールから簡単なオブジェクトの表示まで

インストール

本家サイト:http://threejs.org/

wget -o three.js.zip http://github.com/mrdoob/three.js/zipball/master
unzip three.js.zip
ln -s {mrdoob-three.js-d6384d2/build/,}three.min.js
rm -f three.js.zip

index.html

three.min.jsとtutorial1.jsを作成し、それらを読み込むindex.htmlを作成する。

  • lib_ext/three.min.js: Three.js本体
  • lib_int/tutorial1.js: 簡単なオブジェクトの表示までを記したスクリプト本体

外部のスクリプト類をlib_extに、自作のスクリプト類をlib_intに置くこととする。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Three.js My Tutorial 1</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/tutorial1.js"></script>
    </head>

    <body>
    </body>
</html>

Three.js側で描画対象となる要素を挿入できるのでbodyにcanvasなどを定義しなくてよい。

tutorial1.js

// 1 = 1m としてサイズを合わせている

var main = function() {

    var vectorZero = new THREE.Vector3(0, 0, 0);

    // 各種設定値
    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(0, 1, -0.25);
    camera.lookAt(vectorZero);
    scene.add(camera);

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

    // シーンオブジェクト2 メッシュの初期化
    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(0.5, 16, 16, 16), // 球
        new THREE.MeshPhongMaterial({color: 0x00ffff}) // Phongシェーディング(法線情報を利用した陰影計算)を利用
    )
    sphere.position.set(0, 0, 0);
    scene.add(sphere);


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

    return;
};


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

完成

tutorial1

メモ

OpenGLは右手系であるが、カメラのUpがデフォルトでYなのか、Zなのかは実装依存なので
公式のドキュメント読んで確認しておくなり検証するなりしておこう。

コメントを残す

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