Three.jsでWeb3D(WebGL) ～OBJファイルのモデルを表示する[OBJLoader.js]

Three.jsで「OBJLoader.js」を使ってOBJファイルをロードして表示する(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>
・・・
  //マテリアル（材質）の作成
  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){
        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を使用しました。

three.jsで使用するOBJファイルをShade3Dで作成