Question

我是three.js中的新手（并在stackoverflow中）。我试着找到答案，但我不能做这么简单的事情。我和助手和飞机一起玩。我想创建一个Plane（和它的PlaneHelper），并在这个Plane上绘制一个任意向量。如果飞机与原点的距离设置为0，则一切正确。如果我给飞机一个距离，那么矢量就不在飞机上。

以下是我用于此小实验的注释代码。在飞机上投射原点和矢量我确信arrowHelper_Point保留在飞机上，但事实并非如此。我的错误在哪里？我无法理解。

// Define ARROW_LENGTH to display ArrowHelper
const ARROW_LENGTH = 5;
// Point (0,0,0)
var origin = new THREE.Vector3(0, 0, 0);
// Axes helper in (0,0,0)
var axesHelperOrigin = new THREE.AxesHelper(100);
scene.add(axesHelperOrigin);
// Define a plane by the normal, color and distance from (0,0,0)
var vectorNormal = {
    normal: new THREE.Vector3(1, 1, 0).normalize(),
    color: "rgb(255, 255, 0)",
    colorNormal: "rgb(255,100,0)",
    colorVector: "rgb(194, 27, 255)",
    distance: -3,
};
// Create Plane from the normal and distance
var plane = new THREE.Plane(vectorNormal.normal, vectorNormal.distance);
// Add PlaneHelper to scene
var planeHelper = new THREE.PlaneHelper(plane, 100, vectorNormal.color);
scene.add(planeHelper);
// Add ArrowHelper to display normal
// Find the projection of origin on plane
var originOnPlane = plane.projectPoint(origin);
var arrowHelper_Normal = new THREE.ArrowHelper(vectorNormal.normal, originOnPlane, ARROW_LENGTH, vectorNormal.colorNormal);
scene.add(arrowHelper_Normal);
// Define a point "random"
var point = new THREE.Vector3(5, -2, 6);
// Project the point on plane
var pointOnPlane = plane.projectPoint(point);
// Draw ArrowHelper to display the pointOnPlane, from originOnPlane
var arrowHelper_Point = new THREE.ArrowHelper(pointOnPlane.normalize(), originOnPlane, ARROW_LENGTH, vectorNormal.colorVector);
scene.add(arrowHelper_Point);

编辑：好的，我想我发现了错误。看看这个Get direction between two 3d vectors using Three.js?

我需要两点之间的向量：

var dir=new THREE.Vector3();
dir.subVectors(pointOnPlane,originOnPlane).normalize();

并使用dir作为箭头方向。很抱歉要问一个明显的事情。

Answer 1

查看此Get direction between two 3d vectors using Three.js?

我需要两点之间的向量：

var dir=new THREE.Vector3();
dir.subVectors(pointOnPlane,originOnPlane).normalize();

并使用dir作为箭头方向。

Three.js：在平面上绘制一个矢量

1 个答案: