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

Question

我是three.js（和stackoverflow）的新手。 我试图找到答案，但我无法做这些简单的事情。 我在玩助手和飞机。 我想创建一个平面（它是 PlaneHelper），并在这个平面上绘制一个任意向量。 如果平面与原点的距离设置为 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 作为箭头方向。