[three.js] GLTF loader가 읽으려는 모델이 투명합니다.

개시하다

three.그 모형을 투명하게 하기 위해gltf모형을 js로 읽으려고 합니다.
모델을 투명하게 하려면 material의 속성을 변경해야 하지만 작은 곳에 걸려 넘어졌기 때문에 필기를 해야 한다.

실패 예

const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('XXX.glb', (gltf) => {
    const model = gltf.scene; //モデルを取得
    model.material.transparent = true; //マテリアルの設定変更
    model.material.opacity = 0.5; //マテリアルの設定変更
    scene.add(gltf.scene);
})

처음에는 이렇게 했는데, 이렇게 하면model.material은undefined이다.
그래야 한다gltf.scene는 대상의 실례다.
아니야materialScene에 접근할 수 있어!
장면에 추가됐을 때scene.add(gltf.scene) 하기 때문에 분명히 메시일 거라고 착각했다.(말하자면 gltf.scene라고 쓰여 있지 않나요?)
gltf.scene의 구조입니다. 단,gltf를 불러왔습니다.씬 자체는 큰 부모로 부하에 많은 요소가 있는 구조다.
그래서 해결 방법으로gltf.scene을 구성하는 요소에 포함된 메시에 액세스하면 됩니다.
Meshscene에 접근하는 하위 요소를 사용합니다.

성공 사례

const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('XXX.glb', (gltf) => {
    const model = gltf.scene; //モデルを取得
    model.traverse((object) => { //モデルの構成要素をforEach的に走査
        if(object.isMesh) { //その構成要素がメッシュだったら
	    object.material.trasparent = true;
	    object.material.opacity = 0.5;
	}
    });
    scene.add(gltf.scene);
})

이렇게 하면 메시에 접근해서 material을 투명하게 할 수 있습니다!

※ 3D 모형의 출전(traverse
기쁘고 축하할 만하다.

사은품: 웹에서 3D 모델 사용 시 주의사항

또한 네트워크에서 3D 모델을 사용할 때 역시 가볍지 않으면 안 된다.
특히 휴대전화에서 보고 싶은 경우.너무 무거우면 읽을 때 브라우저가 붕괴됩니다.
WebAR 플랫폼https://poly.google.com/view/1L9oJAw6nY2은 이해하기 쉬운 목표를 보여줍니다.

예상 파일 크기, ".glb"형식 파일

모델의 파일 크기 10MB

괜찮은 것 같습니다.
※ glb은 gltf의 바이너리 파일이며, GLTF Loader를 통해 읽을 수 있습니다.
gltf를 소지하고 있으며,glb로 전환하고 싶은 사람은 "8thwall"
여기가 편해요!
또한obj만 보유한 사람이라도gltf에는 온라인으로 전환할 수 있는 사이트가 많다.