Three.jsで3Dモデルを読み込んで表示する

threejs-3dmodel.png

Three.jsで対応している3Dモデルデータ

jsonファイル

Three.jsでは基本的にjson形式で3Dモデルを読み込むらしい。
json形式の3Dモデルに変換するには、Blender+Jsonプラグインで可能です。
three.js/utils/exporters/blender/addons/io_three…Blender Exporter
io_threeというフォルダごと

C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons

の下に入れてます。
これだけではまだダメで、Blenderで有効にする必要があります

BlenderのUser Preference > Add-Ons >  左側import&Exportで選んで右側一番下にあるthree.jsをOnにする。

たくさんあってよーく探さないといけないので要注意。

今回、サンプルデータとして熊を使いたいと思います from Turbosquid
blender.png
BlenderでExportします。
オブジェクトは何も選ばない状態じゃないとエクスポートできません。

ポイント

 //オブジェクト
    loader = new THREE.JSONLoader();
    loader.load( 'http://miffysora.wdfiles.com/local--files/threejs-3dmodel/bear.json', loadCallBack);

.load ( url, callback, texturePath )
url データの存在する場所のURL
callback コールバック関数。jsonのロードが終わったら呼ばれる関数を定義して渡す。この関数の引数はロードされたObject3Dとロードされたmaterial.materialが存在しない場合はundefinedで来る
texturePath あってもなくても良い引数。もしなかたら、テクスチャはこのjavascriptファイルと同じフォルダにあるとみなされる

フルソースコード

<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
var  scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize( 640, 480 );
    document.body.appendChild( renderer.domElement );
 
    camera = new THREE.PerspectiveCamera( 75, 640/480, 1, 10000 );
    camera.position.z = 1000;
 
    //ライティング
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); //平行光源(色、強度)
    directionalLight.position.set(0,0,3);
    scene.add( directionalLight );
 
    //オブジェクト
    loader = new THREE.JSONLoader();
    loader.load( 'http://miffysora.wdfiles.com/local--files/threejs-3dmodel/bear.json', loadCallBack);
 
    planeGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );//大きさ1000*100,分割数10*10
    planeMaterial = new THREE.MeshBasicMaterial( { color: 0x533E25, wireframe:true} );
    planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh.position.y = -100;
    planeMesh.rotation.x = 90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
    scene.add( planeMesh );
animate();
function loadCallBack(geometry, materials){
        //今回使用した熊のデータはmaterial=undefinedなので使わない。
       var faceMaterial  = new THREE.MeshNormalMaterial();//法線マップにする(簡単に立体的に見せるため)
       json = new THREE.Mesh( geometry, faceMaterial );
       json.scale.set( 20, 20, 20 );
       json.position.y-=100;
       scene.add( json );
}
 
function animate() {
   requestAnimationFrame( animate );
   json.rotation.y += 1 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
   renderer.render( scene, camera );
}
</script>
</body>
Bibliography

3dmodel blender

サポートサイト Wikidot.com 3dmodelblender