Three.jsの「OBJLoader.js」でOBJファイルをロードして表示する(Three.js[r145]を使用)
Three.jsで3Dモデルを読み込みたいですか？
この記事では、OBJLoaderを使ったOBJファイルのロード方法や、実装手順を詳しく解説します。
OBJLoaderを使用すると、Blender等でモデリングしたファイル（.obj）を使用することが出来ます。
<script src="./three_r145/loaders/OBJLoader.js"></script>
var objLoader = new THREE.OBJLoader();
objLoader.load('./three_r145/obj/sofa.obj',function(obj){
//objファイルがロードされた時の処理
});
また、OBJファイルは頂点が大くなりがちなので.mergeVerticesで指定誤差範囲の頂点を結合させ少しでも表示を軽くする工夫を行うことも出来ます。
但し.computeVertexNormals()で法線ベクトルの再計算が必須になります。
//±0.1以内の頂点を結合させて頂点を減らし軽くする
child.geometry=THREE.BufferGeometryUtils.mergeVertices(child.geometry,0.1);
//法線ベクトルの再計算
child.geometry.computeVertexNormals();
マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に2本指を触れてなぞるとカメラの移動、ピンチイン／アウトで拡大縮小できます。
ソースコード
<script src="./three_r145/three.min.js"></script>
<script src="./three_r145/OrbitControls.js"></script>
<script src="./three_r145/loaders/OBJLoader.js"></script>
<script src="./three_r145/loaders/MTLLoader.js"></script>
<script src="./three_r145/utils/BufferGeometryUtils.js"></script>
<script>
・・・
//マテリアル（材質）の作成
var mate = new THREE.MeshLambertMaterial( { color: 0x99AACC, side:THREE.FrontSide, flatShading:false, transparent:false, opacity:1.0} );
var objLoader = new THREE.OBJLoader();
//OBJファイルのロード
objLoader.load('./three_r145/obj/sofa.obj',function(obj){
obj.traverse(function(child){
child.castShadow=true;
child.receiveShadow=true;
if(child.isMesh){
child.material=mate;
}
if(child.geometry!==undefined){
//±0.1以内の頂点を結合させて頂点を減らし軽くする
child.geometry=THREE.BufferGeometryUtils.mergeVertices(child.geometry,0.1);
//法線ベクトルの再計算
child.geometry.computeVertexNormals();
}
});
obj.scale.set(0.1,0.1,0.1);
obj.position.set(0,0,0);
obj.castShadow=true;
obj.recieveShadow=true;
scene.add(obj);
});
</script>
モデリングとOBJファイルの作成にはShade3Dを使用しました。
