Three.jsでgltfを読み込んだ時に、カリングを有効にする。

カリングとは

面の片側のみ描画して負荷を下げる方法。
サイコロを現実世界に置いてみればわかると思うが、必ず6面あるうちの3面しか同時に見ることができない。そのため、裏側に位置する3面を描画しないようにする仕組みのこと。

three.jsのデフォルトでは、materialから、表示するsideを指定することになる。

やり方

blenderで出力したものを読み込んだ時に、カリングがうまくONにならなかった。
多分loader側ではあんまりいじってないので、自前ですべてカリングを有効にしておこう。

(new THREE.GLTFLoader()).load( 'model.glb' , gltf => {
    //キューにすべてのchildrenをいれる。
    const targets = [...gltf.scene.children];

    while(targets.length > 0) {
        let child = targets.pop();
        for(let cc of child.children) {
            targets.push(cc);
        }
        if(child.type == "Mesh" && child.material) {
            child.material.side = THREE.FrontSide;
        }
    }
});