하나의 도형을 다른 하나의 도형으로 변형하기 위해 Three.js를 사용하려고합니다. 여기까지 제가 한 일이 있습니다 (라이브 예제는 http://stemkoski.github.io/Three.js/Morph-Geometries.html 참조).Three.js - 모핑 기하학 및 삼각형 메쉬 수정
작은 입방체에서 큰 입방체로 삼각형을 그리는 중입니다. 애니메이션은 셰이더를 통해 수행됩니다. 더 작은 다면체의 각 꼭지점에는 두 개의 연관된 속성, 즉 최종 위치와 최종 UV 좌표가 있습니다. 각 꼭지점의 최종 위치를 계산하기 위해, 나는 더 작은 다면체의 각 꼭지점을 통해 원점에서 광선 캐스팅하고 더 큰 큐브와의 교점을 발견했습니다. 최종 UV 값을 계산하기 위해 큰 큐브의 교차 된면의 꼭지점에서 중심 좌표 및 UV 값을 사용했습니다.
그것은 끔찍한 일이 아니지만 위대한 첫 시도는 아닙니다. 더 큰 입방체의 꼭지점 중 어느 것도 (더구나) 더 작은 다면체의 꼭지점의 최종 위치가 아니기 때문에, 입방체 표면의 큰 덩어리가 누락되었습니다. 그래서 다음으로 더 많은 정육면체를 추가하여 더 작은 다면체를 세련 시켰습니다. 더 큰 큐브의 각 정점에 대해 원점을 향해 레이 캐스트하고 각 광선이 더 작은 다면체의면을 교차 시켰을 때 그 삼각형면을 제거하고 교차로와 그것을 대체 할 세 개의 작은면. 이제 모프가 더 좋습니다 (이것은 위에서 라이브 예제입니다). 그러나 모프는 여전히 큐브의 전체 볼륨을 채우지 않습니다.
더 큰 큐브의 꼭지점을 더 작은 다면체에 투영하는 것 외에도 가장자리를 투영해야합니다. A와 B가 더 큰 큐브의 가장자리로 연결된 꼭지점 인 경우 더 작은 다면체에있는이 정점들의 투영 또한 모서리에 의해 연결되어야합니다. 그러나 물론, 투영 된 가장자리가 더 작은 다면체의 메쉬에있는 여러 개의 기존 삼각형을 교차 할 수 있습니다. 여러 개의 새로운 꼭지점이 추가되거나, 역 삼각형 화되는 등의 작업이 필요합니다. 실제로 필요한 것은 두 개의 삼각형 메쉬의 공통적 인 정교함을 계산합니다. 누구든지 위에서 설명한 것처럼 알고리즘 및/또는 모핑 (코드가있는)과 (다른 삼각형이있는 두 개의 메쉬 사이에서) 모를 수 있습니까?