섹션 10을 들었을때 궁금증

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

신발을 클릭하고 각 파트별로 색상 바꾸기

작성

primitive는 map을 통해 texture를 불러올 수 없을까요? 다른 텍스쳐 불러오는 연습을 하면서 Material에서는 map이라는 속성을 통해 texture를 불러올 수 있다고 알게 되었는데 primitive에서는 안되서 궁금합니다!

javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber

답변 3

코딩의세계 한태재

지식공유자

안녕하세요. 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파일들을 모두함께 포함하여 프로젝트안에 넣으셔야 합니다.

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

study with dino

질문자

답변 감사드립니다!

study with dino

질문자

fbx 파일을 가져올 때 텍스쳐도 함께 불러오려면 어떻게 해야 하나요

인프런 AI 인턴

안녕하세요, 인프런 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와 Three.js에서의 매핑 방식을 좀 더 깊게 이해하는데 도움이 될 수 있습니다.

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

인프런 커뮤니티 질문&답변