3d model 특정 name 찾는 방법

threejs에서 특정 name을 찾을때 현재 gltf 파일을 연결해서 node name을 찾을 수 있지만 예를 들어서 건물 3d model을 비유할 때 창문도 여러개 있을거고 문도 여러개 있을것인데 특정 부분을 움직임을 줄려고 할 때 이 방법을 사용하게 되면 어떤 부분인지 정확히 알 수가 없기 때문에 움직임을 주기전에 어려움을 겪을 수 있습니다. 

        gltf.scene.traverse(function (node) {
          if (node.isMesh) {
            console.log('node name 확인: ', node.name)
          }
        }

 

그래서 제가 특정 model을 찾는 tip을 알려드리고자 이렇게 설명하게 되었습니다. 

이 방법을 사용하기 위해서는 3d 모델링 프로그램을 설치를 해야하는데 제가 추천하는 프로그램은 blender 프로그램입니다. 이유는 maya는 gltf 형식을 제대로 import 할 수가 없는데 해당 blender은 gltf을 제대로 import할 수 있기 때문에 threejs 이용할 때 간단히 확인하거나 추가할 때는 유용한 프로그램입니다. 

https://www.blender.org/download/

Download — blender.org

 

3d model이 없으시다면 무료로 받을 수 있는 사이트가 있는데 sketchfab에서 free로 찾아서 사용하시면 됩니다. 자세한 설명은 처음 제가 threejs 설명한 부분에 정리했습니다. 참고하시길 바랍니다. 

https://sketchfab.com/features/free-3d-models

1. 해당 링크 접속하셔서 download를 진행합니다. 

2. blender 프로그램을 실행하고 File->Import->glTF 선택하시고 가져오고자하는 gltf 파일을 실행합니다. 

3. 우측에 Scene Collection에 model 레이아웃을 확인하시면 됩니다. 

• 이부분을 상세 확인해보면 해당되는 부분이 지금 이미지에 보이는 것처럼 해당 레이어를 누르면 해당되는 부분이 선택이 되는 것을 확인하실 수 있습니다. 

tip) 지금 제가 빨간색과 파란색으로 해당되는 부분만 보시면 됩니다. threejs에서 적용할 때 해당 mesh될 부분을 position과 rotation을 어떻게 줄건지 이해를 먼저 해야하는데 빨간색에 표시된 것은 position이고 파란색으로 표시된 것은 rotation입니다.  

1. 움직임을 주고자하는 레이어를 선택
2. postion or rotation 클릭 
3. position - 해당 부분 마우스로 드래그 움직임 확인 
4. rotation - 하단에 이미지처럼 나오는데 파란색 빨간색 녹색 부분을 마우스로 드래그해서 해당 위치에 맞게 움직이면 어떻게 움직이는 지 확인이 가능 

주의 사항)

position 및 rotation 움직임을 줄 때 Transform이 변하는 값을 보고 threejs에 바로 적용해야겠다는 생각을 하실텐데 threejs에서 인식되는 부분이랑 blender에 값이 다르기 때문에 threejs는 접근하시는 방법은 다르게 하셔야합니다. 

단지 blender 프로그램은 mesh된 부분이 어디에 해당되는 것이고 어떻게 움직임을 주는 지 확인하기 위함입니다.