Three.js: Draw a vector on plane

Question

I'm a newbie in three.js (and in stackoverflow). I try to find answer but I'm not able to do this simple things. I'm playing with Helpers and Plane. I want to create a Plane (and it's PlaneHelper), and draw an arbitrary vector on this Plane. All is right if the plane's distance from origin is set to 0. If I give a distance to the plane, the vector is not on the plane.

Here is the commented code I use for this little experiment. Projecting both the origin and the vector on the plane I was convinced that arrowHelper_Point remained on the plane, but it's not. Where is my mistake? I can not understand it.

// 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);

EDIT: OK, I think I find the error. Looking at this Get direction between two 3d vectors using Three.js?

I need the vector between the two points:

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

And use dir as the arrow direction. Sorry for asking an obviously thing.

If you found an answer to you own question, you should write an answer and mark it as correct. This will help other people who stumbles over the same problem. — micnil, Feb 19 '18 at 10:03
Thank you micnil for the info. I read the rules but I do the wrong thing ;) — Mr. Squirrel, Feb 19 '18 at 11:26

score 0 · Answer 1 · answered Feb 19 '18 at 11:25

0

Looking at this Get direction between two 3d vectors using Three.js?

I need the vector between the two points:

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

And use dir as the arrow direction.

answered Feb 19 '18 at 11:25

Mr. Squirrel

11
4

Three.js: Draw a vector on plane

1 Answers1