三JS - 查找網格與平面相交的所有點

Question

我創建了一個包含與網格相交的平面的three.js場景。我想要做的是爲網格邊緣穿過平面的所有位置獲取一組點。我對解決方案有很好的看法，似乎找不到任何東西。

這裏是什麼，我現在有一個形象：

在這裏，我強調我試圖收集座標：

如果有人能指點在正確的方向，這將是最感謝。

謝謝，

小號

Answer 1

這不是最終的解決辦法。這只是你可以從哪裏開始。

UPD：Here是這個答案的延伸，如何形成輪廓從給定的點。

而且，它被稱爲this SO question與WestLangley和李Stemkoski關於THREE.Object3D()的.localToWorld()方法真棒anwers。

我們假設您想要找到通常幾何體的交點（例如，THREE.DodecahedronGeometry()）。

的想法：

1. THREE.Plane()具有.intersectLine (line, optionalTarget)方法

2. 網狀包含面（THREE.Face3()）

3. 每個面具有a, b, c性能，其中指數頂點被存儲。

4. 當我們知道頂點的指數，我們可以從vertices

5. 數組讓他們當我們知道面對的頂點座標，我們可以建三THREE.Line3()對象

6. 當我們有三條線，我們可以檢查我們的飛機是否與它們相交。

7. 如果我們有一個交叉點，我們可以將它存儲在一個數組中。

8. 重複步驟3 - 7網格

與代碼的一些解釋的每個面：

我們plane這是THREE.PlaneGeometry()和obj這是THREE.DodecahedronGeometry()

所以，讓我們創建一個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); 

這裏，plane的任意麪的三個頂點是共面的，因此我們可以使用.setFromCoplanarPoints()方法從它們創建mathPlane。

然後我們會通過我們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); 
    }); 

其中

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

和

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

在最後，我們將讓我們的點可見：

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

jsfiddle示例。按下按鈕以獲取飛機和十二面體之間的交點。