Metaseqoiaで編集している3Dモデルをtheeejsで表示すると、透過なMaterialが反映されないという問題があった。
調べてみたところ変換したglbのモデルは、 opacityの値によらずtransparentがfalseになっていた。 そこで、opacityが1未満のMaterialのtransparentをtrueに変更していけば良さそう。
Typescriptだと以下のようなコードになりそう。
ちなみにTHREE.Groupは入れ子構造になっているので、探索する必要があるかと思ったが、 自分の扱うモデルでは2次以上のchildrenはなかったので、とりあえずループ回すだけで済ませている。
import * as THREE from 'three' import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader'; const loader = new GLTFLoader(); function loadGLTF(path: string) : Promise<GLTF> { return new Promise((resolve: Function) => { loader.load(path, glb => { resolve(glb); }) }); } function enableTransparent(object: THREE.Group) { object.children.forEach(o => { if (o instanceof THREE.Mesh) { const material = o.material; if (material instanceof THREE.Material) { if (material.opacity < 1) { material.transparent = true; } } else { const materials: THREE.Material[] = material; materials.forEach(material => { if (material.opacity < 1) { material.transparent = true; } }); } } } } async function main() { const glb = await loadGLTF('./model.glb'); enableTransparent(glb.scene); }