Three.js - 从Math.Plane创建平面几何体

Question

我正在尝试在Three.js中通过一组点绘制最小二乘平面。我定义了一个平面，如下所示：

var plane = new THREE.Plane();
plane.setFromNormalAndCoplanarPoint(normal, point).normalize();

我的理解是需要使用那个平面来创建几何体，以便创建一个网格并将其添加到场景中进行显示：

var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(dispPlane);

我一直试图应用这个答案来获取几何体。这是我想出来的：

plane.setFromNormalAndCoplanarPoint(dir, centroid).normalize();
planeGeometry.vertices.push(plane.normal);
planeGeometry.vertices.push(plane.orthoPoint(plane.normal));
planeGeometry.vertices.push(plane.orthoPoint(planeGeometry.vertices[1]));
planeGeometry.faces.push(new THREE.Face3(0, 1, 2));

planeGeometry.computeFaceNormals();
planeGeometry.computeVertexNormals();

但是飞机根本没有显示出来，也没有任何错误提示我可能哪里出错了。

所以我的问题是，如何将我的 Math.Plane 对象用作网格的几何体？

- P.S.

---

planeMaterial长什么样子？你尝试过改变planeMaterial.side了吗？例如，planeMaterial.side = THREE.DoubleSide。 - msun

var planeMaterial = new THREE.MeshLambertMaterial( {color: 0xffff00, side: THREE.DoubleSide}); - P.S.

我注意到你正在使用plane.normal作为一个顶点:例如，planeGeometry.vertices.push(plane.normal);这似乎是无效的。尝试使用plane.coplanarPoint()代替了吗？ - msun

谢谢，但还是没有运气。 - P.S.

顺便提一下，第三个顶点与第二个共线 - 因此正在创建的三角形面实际上是一条直线。这就是为什么你看不到任何东西的原因。 - msun

@msun 更重要的是，根据控制台日志，所有顶点的值都相同，等于 plane.normal，因此它甚至不是一条直线，而是一个点。 - prisoner849

Answer 1

这种方法应该能够创建一个平面的网格可视化。不过我不确定这对于最小二乘拟合有多大的适用性。

 // Create plane
var dir = new THREE.Vector3(0,1,0);
var centroid = new THREE.Vector3(0,200,0);
var plane = new THREE.Plane();
plane.setFromNormalAndCoplanarPoint(dir, centroid).normalize();

// Create a basic rectangle geometry
var planeGeometry = new THREE.PlaneGeometry(100, 100);

// Align the geometry to the plane
var coplanarPoint = plane.coplanarPoint();
var focalPoint = new THREE.Vector3().copy(coplanarPoint).add(plane.normal);
planeGeometry.lookAt(focalPoint);
planeGeometry.translate(coplanarPoint.x, coplanarPoint.y, coplanarPoint.z);

// Create mesh with the geometry
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00, side: THREE.DoubleSide});
var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(dispPlane);

- msun

---

我遇到了“planeGeometry.lookAt不是一个函数”的错误。 - P.S.

似乎在THREE r82中添加了THREE.Geometry.lookAt()。你使用的是旧版本吗？ - msun

Answer 2

var material = ...;
var plane = new THREE.Plane(...);

// Align to plane
var geometry = new THREE.PlaneGeometry(100, 100);
var mesh = new THREE.Mesh(geometry, material);
mesh.translate(plane.coplanarPoint());
mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0,0,1), plane.normal);

请注意，Plane.coplanarPoint() 只是简单地返回 -normal*constant，因此使用 Plane.projectPoint() 来确定一个“接近”任意点的中心可能是更好的选择。

- larsmoa