如何通過A-Frame中的3D空間中的兩個點創建平面？

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 - Math.Plane中的PlaneGeometry