Triangulacja punktów 3D z wierzchołkami K na twarz

Question

Pracuję z Three.js. Mam kolekcję punktów 3D (x, y, z) oraz kolekcję twarzy. Jedna twarz składa się z K punktów. Może być równie wypukły jak wklęsły. Nie znalazłem nic, co mogłoby mi pomóc w dokumentacji Three.js. Jednym z rozwiązań może być triangulacja tych kształtów, ale do tej pory nie znalazłem żadnego prostego algorytmu triangulacji 3D.

Innym rozwiązaniem byłoby zrobić coś takiego:

var pointsGeometry = new THREE.Geometry(); 

pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0)); 
pointsGeometry.vertices.push(new THREE.Vector3(10, 10, 0)); 
pointsGeometry.vertices.push(new THREE.Vector3(0, 10, 0)); 
pointsGeometry.vertices.push(new THREE.Vector3(1, 3, 0)); 
pointsGeometry.vertices.push(new THREE.Vector3(-1, 3, 0)); 
pointsGeometry.vertices.push(new THREE.Vector3(10, 0, 0)); 

var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 

var mesh = new THREE.Shape/ShapeGeometry/Something(pointsGeometry, material); 
group.add(mesh); 

scene.add(group); 

mam dużo tych kształtów, które budują razem zamkniętą powierzchnię.

Jakieś sugestie?

Dziękuję za uwagę. Miłego dnia.

Answer 1

Jak podkreślił, są 2 sposoby, aby to osiągnąć:

• użyć algorytmu triangulacji 3D (nie dostarczonego przez Three.js);
• użyj algorytmu triangulacji 2D używanego zwykle dla Three.js Shape obiektów z pewną transformacją zastosowaną na każdej powierzchni geometrii.

Ostatni wydaje się fajny, ale niestety, jak próbowałem, zdałem sobie sprawę, że to nie jest takie banalne. I wymyślił coś podobnego do tego, co Paul-Jan powiedział:

Dla każdej twarzy swojej geometrii:

1. Oblicz ciężkości twarz;
2. Oblicz normalną twarz;
3. Obliczyć matrycę twarzy;
4. Wyświetlenie punktów 3D na płaszczyźnie 2D powierzchni;
5. Utwórz geometrię (triangulowana algorytmem triangulacji Shape);
6. Zastosować macierz twarz do nowo utworzonej geometrii
7. Tworzenie Mesh i dodać go do Object3D (próbowałem połączyła wszystkie geometrie do 1, ale to nie z ShapeBufferGeometry)

Odjazd this fiddle .

Uważaj na winding order swoich wierzchołków lub umieść THREE.Material.side na THREE.DoubleSide, aby zapobiec wyrywaniu ścian.

Answer 2

Myślę, że warto ponownie przejrzeć dokumentację Three.js, aw szczególności obiekt Shape. Przykładowy kod na tej stronie używa bezierCurveTo, ale jeśli użyjesz zamiast tego lineTo, możesz podawać sekwencje punktów i tworzyć wklęsłe wielokąty (w tym dziury).