Three.jsで「OBJLoader.js」を使ってOBJファイルをロードし、「MTLLoader.js」を使ってMTLファイル（マテリアルファイル）をロードして適用して表示する(Three.js[r145]を使用)
マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に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>
・・・
//MTLローダーのインスタンスを作成
var mtlLoader = new THREE.MTLLoader();
//.mtlファイルのロード
mtlLoader.load( './three_r145/obj/sofa_m.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
//.objファイルのロード
objLoader.load('./three_r145/obj/sofa_m.obj',function(obj){
obj.traverse(function(child){
child.castShadow=true;
child.receiveShadow=true;
if(child.isMesh){
child.material.flatShading=false;
}
if(child.geometry!==undefined){
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ファイルとMTLファイルの作成にはShade3Dを使用しました。
