今回は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

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

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

Javascript

html

環境