three.js を使った3Dモデル表示 part1

今回はJava3Dの学習として、three.jsを使って3Dの描画に挑戦しました。

# Javascript
three.js を使って表示するだけ↓

``` 3DRender.js
var scene,      // レンダリングするオブジェクトを入れる
    objmodel,   // モデルデータを入れる
    obj,        // モデルデータの角度などを変更するために重ねる
    camera,     // カメラのオブジェクト
    light,      // 太陽光のような光源のオブジェクト
    ambient,    // 自然光のような光源のオブジェクト
    axis,       // 補助線のオブジェクト
    renderer;   // 画面表示するためのオブジェクト

init();
animate();

function　init (){

    var width  = 1000,  // 表示サイズ 横
        height = 600;   // 表示サイズ 縦

    Radius = 500;       // カメラの半径;

    scene = new THREE.Scene();      // 表示させるための大元、すべてのデータをこれに入れ込んでいく。

    // obj mtl を読み込んでいる時の処理
    var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
            }
    };

    // obj mtl が読み込めなかったときのエラー処理
    var onError = function ( xhr ) {    };

    // obj mtlの読み込み
    var ObjLoader = new THREE.OBJMTLLoader(); 
    ObjLoader.load("A6M_ZERO/zero2.obj", "A6M_ZERO/zero2.mtl",  function (object){
        objmodel = object.clone();
        objmodel.scale.set(10, 10, 10);            // 縮尺の初期化
        objmodel.rotation.set(0, 0, 0);         // 角度の初期化
        objmodel.position.set(0, 0, 0);         // 位置の初期化

    // objをObject3Dで包む
        obj = new THREE.Object3D();
        obj.add(objmodel);

        scene.add(obj);                     // sceneに追加
    }, onProgress, onError);        // obj mtl データは(.obj, .mtl. 初期処理, 読み込み時の処理, エラー処理)
                                    // と指定する。

    //light
    light = new THREE.DirectionalLight("white", 1);
    light.position.set(30, 200, 30);
    light.castShadow = true;
    scene.add(light);

    ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);

    //camera
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 5000);
    camera.position.set(0, 0, 500);
    //camera.position.x = 0;
    //camera.position = new THREE.Vectror3(0,0,0); のような書き方もある


    // hepler
    axis = new THREE.AxisHelper(2000);  // 補助線を2000px分表示
    axis.position.set(0,-1,0);          // 零戦の真ん中に合わせるため、少しずらす
    scene.add(axis);

    // 画面表示
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);        // 画面の大きさを設定
    renderer.setClearColor(0xeeeeee, 1);    
    renderer.shadowMapEnabled = true;       
    // html の container というid に追加
    document.getElementById('container').appendChild(renderer.domElement);

}

// 値を変更させる処理
function animate() {
    requestAnimationFrame(animate);     // フレームと再描画を制御してくれる関数。
                                        // そのブラウザのタブが非表示のとき、描画頻度が自動で低下するので、
                                        // メモリの消費を抑えることができる。
    cameramove();   // カメラ移動
    render();       // 再描画処理
}

function render() {
    renderer.render(scene, camera); // 再描画
}

```

##html
htmlはこれでOKです。

```index.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>Hello, Three.js World!</title>
		<link rel="stylesheet" type="text/css" href="styleTest.css" />
		<script type = "text/javascript" src = "../three_js/build/three.js"></script>
		<script type = "text/javascript" src = "../three_js/build/three.min.js"></script>

	</head>
	<body>
		<div id="container">

			<script type = "text/javascript" src = "../three_js/examples/js/loaders/MTLLoader.js"></script>
			<script type = "text/javascript" src = "../three_js/examples/js/loaders/OBJMTLLoader.js"></script>

			<script type = "text/javascript" src = "threeJsTest.js"></script>
		</div>
	</body>
</html>
```

three.jsのファイルは↓のダウンロードサイトから落とし、index.htmlと同じ階層においてください。
左側タブの **download** からダウンロードできます
http://threejs.org/

モデルデータが手元にない場合は、こちらのサイトなどで無料版を探してみてください。 .obj .mtl のタブがあるものから選んでみてください。
http://tf3dm.com/

###環境
開発環境
Mac OSX Yosemite version 10.10.5

次はカメラとマテリアルの制御をまとめたいと思います。