Как создать плоскость через две точки в трехмерном пространстве в A-Frame? - PullRequest
Новая
       24

Как создать плоскость через две точки в трехмерном пространстве в A-Frame?

0 голосов
/ 25 мая 2019

Мне нужно создать плоскость, которая проходит через любые две точки в трехмерном пространстве, предпочтительно начиная с первой точки и заканчивая второй.

Когда вы создаете плоскость в 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);
});

Ожидаемый результат будет выглядеть примерно так:

enter image description here

1 Ответ

0 голосов
/ 25 мая 2019

Вам нужно три точки, чтобы сделать трехмерную плоскость (если вы не хотите обнулить ось). Используйте это, чтобы создать 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 из Math.Plane

...