개발/three.js / / 2023. 2. 9. 02:09

[Capstone Project] 템플릿 vertex 적용 테스트 환경 만들기 - 2

반응형
※ 해당 글은 capstone 종합설계 프로젝트를 하면서 적었던 일지를 돌아보며 작성한 것입니다.

개발일지 2022.10.08

이전에는 filtedVertexArray를 가져와도 scale이 적용되지 않은 local position을 가져와서 일치하지 않았던 문제가 있었다. 이제 localToWorld를 이용해서 scale이 적용된 상태의 world vertex position을 가져온 뒤, vertex정보를 filtedVertexArray로 추출하도록 하자. filtedVertexArray 모듈에 localToWorld를 넣는 방향으로 수정하자.

 

그런데 여기서

intersects[0].object.localToWorld(new THREE.Vector3().fromBufferAttribute(positionAtt, intersects[0].face.a))

위 코드처럼 Vector3의 형태로 적용되므로 vector3를 input받는 vertex array filter 모듈을 별도로 만들자.

 

vertexArrayFilter.js 모듈은 이미 input을 [1,2,3] 형태의 float array로 받으므로 내부적으로 localToWorld를 할 수 없다.

 

생각해보니 Filter module을 그냥 클래스로 만들고 내부 함수로 input type을 분리하는 방향으로 설계하자.

vertexArrayFilter안에 input을 [ float array / attributes.position / THREE.Vector3 array] 로 다 처리할 수 있도록 각각의 처리함수를 만들어야할 것 같다.

물론 output은 input과 동일한 type으로 한다.

 

아… 생각해보니까 큰 실수를 하고 있었다. 어차피 scale이나 translation 등 MVP행렬을 적용하려면, object를 vertexArrayFilter로 넘겨주어야하는데, 그렇다면 그냥 전달한 object에서 attributes를 빼다가 사용하면 되는 건데 굳이 float array / vector3 array를 구분하고 있었다.

그냥 생성자에서 obj를 받고 반환할 때 type만 선택하는 형태로 모듈을 만들자.

반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유