3Dモデルの表示

r78

素材

サイト	料金
TF3DM	無料
ニコニ立体	無料
amana images	有料

JSON

JSONLoader

const loader = new THREE.JSONLoader();
loader.load('../assets/models/model.json', (geometry, mat) => {

  const faceMat = new THREE.MeshFaceMaterial(mat);
  mesh = new THREE.Mesh(geometry, faceMat);

  scene.add(mesh);

});

※materialが設定されていない場合は、引数はgeometryだけにする
https://teratail.com/questions/33951

Blenderエクスポート

モデルだけ貰ってエンジニアが手を加えた上で
BlenderからJSONをエクスポートすることも多い
three.jsでjson形式のモデルを表示してみる

オブジェクトをjoinしないと、欲しいモデル全てが書き出されなかったりするので、書き出す時だけ対象のモデルをjoinしておくcontrol + J

また、Face Materialsにチェックを入れないと「visibleがない」みたいなエラーが出るので、こちらのチェックも忘れずに。（チェックを入れて出力してもmaterialsの中身がなければ同じエラーが出る）

OBJ, MTL

OBJLoader.js,MTLLoader.jsを読み込む

mtlとobjのコールバックを受け取って、その中でシーンに追加する

const mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('./data/');
mtlLoader.load('city.mtl', (materials) => {
  materials.preload();

  const objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('./data/');
  objLoader.load('city.obj', (object) => {

    const mesh = object;
    this.scene.add(mesh);

  });
});

COLLADA

ColladaLoader.jsを読み込む

JSONよりも重い

loader.load("../assets/models/dae/model.dae", (result) => {
  console.log(result);  // どこにあるか確認
  const mesh = result.scene.children[0].children[0].clone();
  scene.add(mesh);
});

テクスチャに.tgaフォーマットが使われていると読み込めない。.tgaはWebGLでサポートされていないから。pngに変更する必要がある。

参考
Web上で3D表現を！WebGLのリッチな表現を短時間でお手軽に作る方法