TextureLoader관련 질문 드립니다.

Question

TextureLoader를 사용하는게 맞는 방법인지는 모르겠는데 TextureLoader로 사진을 로딩하여 모델의 특정 영역에만 사진을 표시 할려면 어떤 방법을 사용해야 하는지 궁금 하여 문의 드립니다.

해야 되는 작업은 상품 상세 페이지에서 사용자가 업로드한 이미지를 컵, 텀블러, 우산 이런 모델 데이타를 로딩하고 거기에 특정 영역에만 사용자가 업로드한 이미지를 보여주고 주문 전에 미리보기 할수 있는 페이지를 만들어야 하는작업인데.. 특정 영역에만 사진을 넣기 위해서 모델 디자인 하는 업체에 어떻게 만들어 달라고 요청을 해야 하는지도 궁금 하고 TextureLoader로 로딩해서 만드는 지도 궁금합니다.

강의 구매전에 스크롤 해서 캔 위치 이동하는 강의를 보고 캔에 사진 넣는 강의라고 생각해서 보고 힌트를 얻을수 있을까 했는데.. 아니였네요....

코딩일레븐 · Answer

안녕하세요 캔은 3d 모델러가 모델링을 할 때 맵핑도 함께 해줬습니다. 상황은 다를 것 같고요. 하지만 텍스쳐 로더로 이미지를 로드하고 모델링에 맵핑하는 것은 맞습니다. https://pickywicky.co.kr/ 위 페이지 보시면 캔 모델링 하나 로드 를 하고 맵핑 이미지는 세장 을 로드한 뒤 클릭 시 교체해주는 방식이거든요. const textureLoader = new THREE.TextureLoader(); const texture0 = textureLoader.load("/model/can.png"); const texture1 = textureLoader.load("/model/can_smoky.png"); const texture2 = textureLoader.load("/model/can_hot.png"); const textureArr = [texture0, texture1, texture2]; //이미지 로드해서 배열에 넣음 model.traverse(function (child) { //모델링 순회하며 if (child.isMesh) { //메쉬일 경우 맵 교체 child.material = new THREE.MeshStandardMaterial({ map: textureArr[num], }); child.material.magFilter = THREE.NearestFilter; child.material.minFilter = THREE.NearestMipMapLinearFilter; } }); 위 처럼 한 것인데요. 만약에 모델링에서 한 부분만 맵핑을 하고 싶으시면 모델러에게 모델링 될 부분의 name 을 지정해달라고 하세요. 아래처럼 해보면 될 것 같은데요? 테스트가 필요하기는 합니다만. if (child.name == "mappingArea" ) { //맵핑 }