「OBJLoader.js」でOBJをロードし「MTLLoader.js」でMTL（マテリアル）をロードして適用(Three.js[r145])
Three.jsでOBJモデルにマテリアルを適用したいですか？
この記事では、MTLLoaderを使ったマテリアルのロード方法や、OBJLoaderとの組み合わせによる実装手順を詳しく解説します。
MTLLoaderを使うとロードしたOBJファイルのモデルにマテリアル（材質）を設定することが出来ます。
<script src="./three_r145/loaders/MTLLoader.js"></script>
//MTLローダーのインスタンスを作成
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load( '****.mtl', function(materials){
//MTLファイルロード時の処理
});
マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に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を使用しました。
