Three.js - 来自 Math.Plane 的 PlaneGeometry [英] Three.js - PlaneGeometry from Math.Plane
问题描述
我正在尝试通过 Three.js 中的一组点绘制最小二乘平面.我有一个 plane 定义如下:
I am trying to draw a least squares plane through a set of points in Three.js. I have a plane defined as follows:
var plane = new THREE.Plane();
plane.setFromNormalAndCoplanarPoint(normal, point).normalize();
我的理解是,我需要使用该平面并使用它来创建几何图形,以便创建一个网格以添加到场景中进行显示:
My understanding is that I need to take that plane and use it to come up with a Geometry in order to create a mesh to add to the scene for display:
var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(dispPlane);
我一直在尝试应用 这个答案 来获得几何.这是我想出的:
I've been trying to apply this answer to get the geometry. This is what I came up with:
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();
但是飞机根本没有显示,也没有错误表明我可能出错的地方.
But the plane is not displayed at all, and there are no errors to indicate where I may have gone wrong.
所以我的问题是,如何将我的 Math.Plane 对象用作网格的几何图形?
So my question is, how can I take my Math.Plane object and use that as a geometry for a mesh?
推荐答案
这种方法应该创建平面的网格可视化.但是,我不确定这对最小二乘拟合有多适用.
This approach should create a mesh visualization of the plane. I'm not sure how applicable this would be towards the least-squares fitting however.
// 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);
这篇关于Three.js - 来自 Math.Plane 的 PlaneGeometry的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!