Project plane on a specific distance using Three.js - graphics

Question

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?
I guess it has something to do with projection, but I couldn't find an easy way to do it.

Answer 1

Just an example. Aqua lines are base, yellow lines are shifted ones:
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three#0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three#0.136.0/examples/jsm/controls/OrbitControls";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 5, 5);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;
scene.add(new THREE.GridHelper());
let dir = new THREE.Vector3(0, 0, 1);
let colors = [];
let ptsBase = [
[-1, 1], [1, 1], [1, -1], [-1, -1]
].map(p => {
colors.push(0, 1, 1);
return new THREE.Vector3(p[0], p[1], 0);
});
let ptsShift = ptsBase.map(p => {
colors.push(1, 1, 0);
return p.clone().addScaledVector(dir, 2)
});
let ptsFinal = ptsBase.concat(ptsShift);
let g = new THREE.BufferGeometry().setFromPoints(ptsFinal);
g.setIndex([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7]);
g.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
let m = new THREE.LineBasicMaterial({vertexColors: true});
let l = new THREE.LineSegments(g, m);
scene.add(l);
renderer.setAnimationLoop(() => {
controls.update();
renderer.render(scene, camera);
});
</script>

Answer 2

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