Three.js -来自Math.Plane的PlaneGeometry

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对象作为网格的几何图形呢？

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

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()来确定“接近”任意点的中心可能是一个更好的选择。