透過なモデルをMetasequoiaで作成してthreejsで表示する

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);
}