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