3D 모델의 정점 좌표에 객체를 배치할 때는 중복에 주의하자

Three.js Advent Calendar 2019 둘째 날
최근, Threejs 만져 있어 조금 노래했을 때, 구구라고 해도 일본어의 기사는 보이지 않았기 때문에 메모로서 남깁니다.

하고 싶었던 일

3D 공간의 임의의 위치에 객체를 많이 배치하고 싶습니다.
↓
js로 구현하여 최종 보이는 방법을 매번 확인하는 것은 귀찮습니다.
↓
DCC 툴상에서 보기 좋게 확인하면서 배치해 달라고 하고, 그것을 Mesh라든지 하고 fbx라든지로 내보내고, 정점 좌표를 취득해 배치하면 좋지.

이런 흐름이었습니다.

손잡이

정점 좌표 자체는 BufferGeometry 경유로 간단하게 취득할 수 있습니다.

geometry.attributes.position.array //頂点座標が配列に格納されている

간단한 예로서, Blender에서 내보낸 평면 사각형(Plane)의 fbx 데이터의 정점 좌표를 위와 같이 취득해, 각 좌표에 반투명의 Cube를 배치해 보았습니다.



실제로 동작하는 샘플은 이쪽↓
htp://393. b · th ree js / mp / u / bgl_-a r_fbx_의 t_merge. HTML

오른쪽 상단과 왼쪽 하단의 Cube 색상이 어두워지는 것을 확인할 수 있다고 생각합니다.
이것은 Plane을 구성하고 있는 정점은 일견 4점이라고 생각했는데, 실제로는 6점이며, 우상과 좌하가 중복하고 있기 때문입니다.
(이 Plane은 위 그림의 녹색 선으로 구성된 삼각형 다각형과 핑크색 선으로 구성된 삼각형 다각형으로 만들어졌기 때문입니다)

해결 방법

좌표가 전혀 함께 정점을 제외하면 좋을 뿐이므로, 자력으로 실장해도 좋습니다만, 반드시 이미 좋은 느낌의 실장이 벌써 있을 것,,, 라고 구구리 뻗어 있으면 제대로 공식에 있었습니다.

BufferGeometryUtils.mergeVertices

// geometryを引数で渡すと、重複した頂点を除外したgeomeryを返してくれる
const mergeGeometry = BufferGeometryUtils.mergeVertices(child.geometry);

중복 정점을 제외한 geometry에서 정점 정보를 가져와 반투명 Cube를 배치합니다.



실제로 동작하는 샘플은 이쪽↓
htp //393. b · th ree js / mp / / u bgl_ ぉ r_fbx_ merge. HTML

중복 메쉬가 사라졌습니다.

요약

반투명으로 배치하는 것은 별로 없다고 생각하기 때문에 중복하는 것을 깨닫지 못하는 경우도 많아, 깨닫지 않으면 문제없는 것 같은 생각이 듭니다만, 이번 깨달은 것은 반투명하고, Blending을 가산에 그렇다면 특정 개체 만 화상에 하얗게되어 버렸기 때문에 알아차릴 수있었습니다.