[React/Three.js] GLTF 모델에 Texture 넣기

왜 리액트에서 쓰는 건 잘 없냐
나는 개인 glft 모델을 가져다 쓰고 있었는데 기존 자료는 죄다 제공하는 geometry를 써서.... 거기 있는 라이브러리로 쓰더라.
찾다찾다 없어서 짜내서 쓰다가 에러를 만나고
암튼 결국 해냈다.

준비 과정

모델 불러오는 등은 다 되어 있을 거라고 생각하고 생략하겠다.
사실 밑에 전체 코드에 일부분 포함되어 있음ㅋ

import { TextureLoader } from 'three';

우선 필요한 걸 import를 해준다.

Texture 적용 시작

gltfLoader.load(AvatarGltfPath, (parentGltf) => {
      const avatarModel = parentGltf.scene;
      avatarModel.scale.set(1.1, 1.1, 1.1);
      avatarModel.position.set(0,-0.04,0);
      
      // 텍스처 적용
      avatarModel.material.map = texture;
          
      groupRef.current.add(avatarModel); 
    });  

처음에는 이렇게 했는데 실패햇다.

Cannot set properties of undefined (setting 'map')

ㅎㅅㅎ.........

오류 해결

나와라 챗 지피티.

      //텍스쳐 적용
      avatarModel.traverse((child) => {
        if (child.isMesh) {
          child.material.map = texture;
        }
      });

이걸로 코드를 바꾸니까 texture가 그냥 날아가서 투명한 모델이 보이더라.

진짜!!!!!!! 챗지피티 리액트에 도움이 하나도 안됨!!!!!!

https://discourse.threejs.org/t/child-material-mesh-sets-the-texture-for-the-entire-obj-why/21421

대신 나의 영원한 동반자 구글의 바다에서 이 친구가 도움을 줬다...

child.material = child.material.clone(); //추가!!

    gltfLoader.load(AvatarGltfPath, (parentGltf) => {
      const avatarModel = parentGltf.scene;
      avatarModel.scale.set(1.1, 1.1, 1.1); // 부모 모델 크기 조정
      avatarModel.position.set(0,-0.04,0);
      
      //텍스쳐 적용
      avatarModel.traverse((child) => {
        if (child.isMesh) {
          child.material = child.material.clone();
          child.material.map = texture;
        }
      });

      groupRef.current.add(avatarModel); 
    });  

그래서 이렇게 사용하면 된다.
한번 클론해준 다음에 적용하기!

근데 또 웃긴건 저렇게 해서 한 번 성공시켜 놓으니까 클론 부분 지워도 잘 돌아감;; 뭐임;;

아무튼 귀여운 우드 토끼.....

+) 사실 뺨에 치크 넣으려고 저런건데 UV 편 치크는 왜인지 적용이 안돼서(텍스쳐 문제인듯) 짱 멋진 디자이너님들이 그냥 GLTF 모델에 텍스쳐 입혀서 새로 주셧다

ㄱ껄껄.. 그래서 내가 한 일은 쓸모가 없어졋지만,, 우드 토끼,, 귀여웟으니까 됏다 흥