Ba JS - Tìm tất cả các điểm mà một lưới giao cắt một mặt phẳng

Question

Tôi đã tạo ra một cảnh ba.js bao gồm một mặt phẳng cắt một lưới. Những gì tôi muốn làm là lấy một mảng các điểm cho tất cả các vị trí mà một cạnh của lưới đi qua mặt phẳng. Tôi đã có một cái nhìn tốt cho các giải pháp và dường như không thể tìm thấy bất cứ điều gì.

Dưới đây là hình ảnh của những gì tôi hiện có:

Và ở đây tôi đã nêu bật các tọa độ tôi đang cố gắng để thu thập:

Nếu ai có thể chỉ cho tôi đi đúng hướng, điều đó sẽ được đánh giá cao nhất.

Cảm ơn,

S

Answer 1

Đây không phải là giải pháp cuối cùng. Đây chỉ là một điểm mà bạn có thể bắt đầu từ đó.

UPD: Here là phần mở rộng của câu trả lời này, cách tạo thành đường viền từ các điểm nhất định.

Ngoài ra, nó được gọi là this SO question với các loại anwers tuyệt vời từ WestLangley và Lee Stemkoski về phương pháp .localToWorld() của THREE.Object3D().

Hãy tưởng tượng rằng bạn muốn tìm điểm giao nhau của hình học thông thường (ví dụ: THREE.DodecahedronGeometry()).

Ý tưởng:

1. THREE.Plane() có .intersectLine (line, optionalTarget) phương pháp

2. Một lưới chứa khuôn mặt (THREE.Face3())

3. Mỗi khuôn mặt có a, b, c tài sản, nơi chỉ số của đỉnh được cất giữ.

4. Khi chúng ta biết chỉ số của đỉnh, chúng ta có thể nhận được chúng từ mảng vertices

5. Khi chúng ta biết tọa độ các đỉnh của một mặt, chúng ta có thể xây dựng ba THREE.Line3() đối tượng

6. Khi chúng ta có ba dòng, chúng ta có thể kiểm tra xem mặt phẳng của chúng ta có cắt nhau không.

7. Nếu chúng tôi có điểm giao nhau, chúng tôi có thể lưu nó trong một mảng.

8. Lặp lại các bước 3-7 cho mỗi mặt của lưới

Một số giải thích với mã:

Chúng tôi có plane đó là THREE.PlaneGeometry() và obj đó là THREE.DodecahedronGeometry()

Vì vậy, chúng ta hãy tạo một số THREE.Plane():

var planePointA = new THREE.Vector3(), 
    planePointB = new THREE.Vector3(), 
    planePointC = new THREE.Vector3(); 

var mathPlane = new THREE.Plane(); 
plane.localToWorld(planePointA.copy(plane.geometry.vertices[plane.geometry.faces[0].a])); 
plane.localToWorld(planePointB.copy(plane.geometry.vertices[plane.geometry.faces[0].b])); 
plane.localToWorld(planePointC.copy(plane.geometry.vertices[plane.geometry.faces[0].c])); 
mathPlane.setFromCoplanarPoints(planePointA, planePointB, planePointC); 

Ở đây, ba đỉnh của bất kỳ mặt nào của plane là mặt phẳng, do đó chúng tôi có thể tạo mathPlane từ chúng, sử dụng phương pháp .setFromCoplanarPoints().

Sau đó chúng tôi sẽ lặp qua khuôn mặt của chúng tôi obj:

var a = new THREE.Vector3(), 
    b = new THREE.Vector3(), 
    c = new THREE.Vector3(); 

    obj.geometry.faces.forEach(function(face) { 
    obj.localToWorld(a.copy(obj.geometry.vertices[face.a])); 
    obj.localToWorld(b.copy(obj.geometry.vertices[face.b])); 
    obj.localToWorld(c.copy(obj.geometry.vertices[face.c])); 
    lineAB = new THREE.Line3(a, b); 
    lineBC = new THREE.Line3(b, c); 
    lineCA = new THREE.Line3(c, a); 
    setPointOfIntersection(lineAB, mathPlane); 
    setPointOfIntersection(lineBC, mathPlane); 
    setPointOfIntersection(lineCA, mathPlane); 
    }); 

nơi

var pointsOfIntersection = new THREE.Geometry(); 
... 
var pointOfIntersection = new THREE.Vector3(); 

và

function setPointOfIntersection(line, plane) { 
    pointOfIntersection = plane.intersectLine(line); 
    if (pointOfIntersection) { 
    pointsOfIntersection.vertices.push(pointOfIntersection.clone()); 
    }; 
} 

Cuối cùng chúng ta sẽ làm cho điểm của chúng tôi có thể nhìn thấy:

var pointsMaterial = new THREE.PointsMaterial({ 
    size: .5, 
    color: "yellow" 
    }); 
var points = new THREE.Points(pointsOfIntersection, pointsMaterial); 
scene.add(points); 

jsfiddle ví dụ. Nhấn nút đó để có được điểm giao nhau giữa mặt phẳng và mặt phẳng.