Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요. study with dino님 질문주셔서 감사드립니다.

먼저 primitive의 구조에 따라 조금 다를 수 있습니다.

primitive에 넣는 object에 대해서 console.log찍어서 보시면 해당 object에 대한 구조가 나올텐데요.

group안에 group이 또 있거나 mesh가 있을 수도 있어요. 한번 살펴보세요.

group이 라면 child를 계속 검사하시다보면 mesh가 나올 것이고 그 mesh에 대한 material에 대한 map을 변경할 수 있습니다. 간단하게 아래처럼 코드를 만들면 작동할 것 같습니다.

    useEffect(() => {
        object.traverse((child: THREE.Object3D) => {
            if (child instanceof THREE.Group){
                child.traverse((ch: THREE.Object3D) => {
                    if (ch instanceof THREE.Group){
                        // loop more ..
                    }else{
                        if (child instanceof THREE.Mesh) {
                            child.material.map = texture;
                            child.material.needsUpdate = true;
                        }
                    }
                });
            }else{
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                    child.material.needsUpdate = true;
                }
            }
        });
    }, [object, texture]);

그리고 fbx 파일을 가져올 때 텍스쳐도 함께 불러오려면 블렌더 등 모델링 툴에서 export할때 texture를 포함하는 옵션을 줘야합니다. 그렇게 하면 fbx파일 자체에 해당 textrue들의 위치에 대해 저장되어있을것이고, 그 texture파일이 실제 그 위치에 있어야합니다. 그래서 r3f에서 사용할때도 fbx파일과 texture파일들을 모두함께 포함하여 프로젝트안에 넣으셔야 합니다.

혹시나 하시다가 더 안되시는것 있으면 질문 주시면 같이 살펴보겠습니다. 감사합니다 :)

안녕하세요, 인프런 AI 인턴입니다. study with dino님.

React Three Fiber에서 primitive를 사용하여 텍스처를 적용하는 방법에 대한 질문을 주셨습니다. 세부적으로는 Material에서 map 속성을 통해 텍스처를 불러오는 것처럼 primitive에서도 이를 구현할 수 있는지에 대한 궁금증이신 것 같습니다.

primitive와 Texture 적용

primitive 컴포넌트는 Three.js의 Native Object를 직접 사용할 때 활용됩니다. 이는 R3F에서 보다 세부적인 제어가 필요할 때 사용되며, 기존의 R3F 고유 컴포넌트와 달리 plain Three.js 객체를 사용할 수 있게 해줍니다.

primitive를 사용하여 텍스처를 적용하려면, 해당 텍스처를 불러와서 사용하고자 하는 Material 객체의 map 속성에 수동으로 할당해 줄 수 있습니다. 예를 들어, MeshStandardMaterial을 사용하고자 할 때 다음과 같이 사용할 수 있습니다:

import { useLoader, Canvas } from '@react-three/fiber';
import { TextureLoader } from 'three';

function MyScene() {
  const texture = useLoader(TextureLoader, 'path/to/texture.jpg');

  return (
    <Canvas>
      <mesh>
        <primitive object={new THREE.MeshStandardMaterial({ map: texture })} />
        {/* other mesh components */}
      </mesh>
    </Canvas>
  );
}

위 코드를 통해 primitive를 통해 직접 텍스처를 적용할 수 있습니다. useLoader를 사용하여 텍스처를 로드하고, 이를 MeshStandardMaterial의 map으로 설정하면 됩니다.

참고할 자료

• R3F에서 Texture 적용하기
  
• Three.js Material과 텍스처 매핑
  

이는 R3F와 Three.js에서의 매핑 방식을 좀 더 깊게 이해하는데 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.