Search code examples
graphicsthree.js3d

Project plane on a specific distance using Three.js

I have a rectangle defined by 4 points. I want to move it to the left or right by specific distance. By moving I mean that result rectangle should be parallel to the original and if we put straights through corresponding points we will get rectangular cuboid.

On an image I am given coordinates of points A,B,C,D and distance H. How can I calculate 4 new points using Three.js? Dedede

I guess it has something to do with projection, but I couldn't find an easy way to do it.

Solution

  • What I found to be working is getting normal vector, multiplying it by distance, and adding it to my point vectors.

    I did it like this

    let pointA = new THREE.Vector3(0, 0, 0);
let pointB = new THREE.Vector3(1, 0, 0);
let pointC = new THREE.Vector3(1, 1, 0);
let pointD = new THREE.Vector3(0, 1, 0);
const distance = 0.5;

let triangle = new THREE.Triangle(pointA, pointB, pointC);

let plane = new THREE.Plane();
triangle.getPlane(plane);

let normalVector = plane.normal.multiplyScalar(distance);

pointA1 = pointA.clone().add(normalVector);
pointB1 = pointB.clone().add(normalVector);
pointC1 = pointC.clone().add(normalVector);
pointD1 = pointD.clone().add(normalVector);