Question

我需要创建一个平面，该平面直线穿过3d空间中的任意两个点，最好从第一个点开始，然后在第二个点结束。

在AFrame中创建平面并设置其位置时，它从平面的“中心”开始并在两个方向上移动。同样，它的旋转度需要正确设置才能通过第二点。

是否有任何简便的方法来解决此问题？我也希望该解决方案可以与Object3D.lookAt()这种使飞机面向对象的方法结合使用。

希望您能帮助我解决我的问题，感谢您的帮助：）

这是我现在所做的：

let plane = document.createElement('a-plane');
let distance = getDistance(points[i - 1], points[i]);
plane.setAttribute('width', 20);
plane.setAttribute('material', {
  color: '#1bffff',
  side: 'double'
});
plane.setAttribute('height', distance);
plane.setAttribute('position', {
  x: xyz[0],
  y: xyz[1],
  z: xyz[2]
});
sceneEl.appendChild(plane);
plane.addEventListener('loaded', e => {
  plane.object3D.lookAt(sphereposition);
});

预期结果如下：

Answer 1

制作3D平面需要三个点（除非要将轴归零）。使用它来创建THREE.Plane（数学对象），并将平面几何形状与之对齐：

// 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 - PlaneGeometry from Math.Plane

如何在A框架的3D空间中通过两个点创建平面？

1 个答案: