30
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-01-13

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

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

30
28
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?