Triangulation các điểm 3D với K đỉnh mỗi mặt

Question

Tôi đang làm việc với Three.js. Tôi có một bộ sưu tập gồm Điểm 3D (x, y, z) và một bộ sưu tập các khuôn mặt. Một mặt bao gồm K điểm. Nó cũng có thể lồi lõm. Tôi không tìm thấy gì có thể giúp tôi trong tài liệu Three.js. Một giải pháp có thể là để triangulate những hình dạng, nhưng cho đến nay tôi đã không tìm thấy bất kỳ thuật toán tam giác 3D đơn giản.

Các giải pháp khác sẽ làm một cái gì đó như thế:

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); 

Tôi có rất nhiều những hình dạng mà cùng nhau xây dựng một mặt kín.

Bất kỳ đề xuất nào?

Cảm ơn sự quan tâm của bạn. Chúc một ngày tốt đẹp.

Answer 1

Như bạn chỉ ra, có 2 cách để đạt được điều đó:

• sử dụng một thuật toán tam giác 3D (không được cung cấp bởi Three.js);
• sử dụng thuật toán triangulation 2D thường được sử dụng cho các đối tượng Three.js Shape với một số phép biến đổi được áp dụng trên mỗi khuôn mặt của hình.

Điều cuối cùng có vẻ thú vị nhưng không may, như tôi đã thử, tôi nhận ra nó không phải là tầm thường. Tôi đã đưa ra một cái gì đó tương tự như những gì Paul-Jan nói:

Đối với mỗi mặt của hình học của bạn:

1. Tính trọng tâm mặt;
2. Tính toán khuôn mặt bình thường;
3. Tính toán ma trận khuôn mặt;
4. Chiếu các điểm 3D lên mặt phẳng 2D của khuôn mặt;
5. Tạo hình học (triangulated bằng thuật toán triangulation Shape);
6. Áp dụng ma trận đối mặt với các hình học mới được tạo ra
7. Tạo một Mesh và thêm nó vào một Object3D (Tôi cố gắng để kết hợp tất cả các hình học vào 1, nhưng nó không thành công với các ShapeBufferGeometry)

Kiểm tra this fiddle .

Hãy cẩn thận với winding order các đỉnh của bạn hoặc đặt THREE.Material.side đến THREE.DoubleSide để tránh bị loại bỏ khuôn mặt.

Answer 2

Tôi nghĩ bạn có thể muốn truy cập lại tài liệu Three.js và đối tượng Shape nói riêng. Mã mẫu trên trang đó sử dụng bezierCurveTo, nhưng nếu bạn sử dụng lineTo thay vào đó bạn có thể cho nó chuỗi các điểm của bạn và tạo đa giác lõm (bao gồm cả lỗ).