3Dモデリングとマテリアル(.mtlファイル)を使う～Webサイトで3Dコンテンツ(Three.js)デザイン

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を使用しました。

Javascriptで3Dコンテンツ一覧へ