THREE.js setting a rectangle parallelepiped rotation according to "normal" vectors of two of its faces

Question

I have a rectangle parallelepiped in the 3d space like this:

example parallelepiped

Assume that it's placed on the axis origin and when its rotation is (0,0,0), its largest face (the green) is on XY, its smallest one (the blue) is parallel to YZ.

Assuming I have two (orthogonal) vectors, V1 and V2.

V1 represents the normal of the biggest face (the green one) of the Object3d.

V2, instead, is the normal of the smallest face (the blue one).

Given two new vectors, how can I rotate in the 3d space this parallelepiped so that its faces normals would align to these new vectors?

Example:

const V1 = new Vector3(0, 1, 0);
const V2 = new Vector3(0, 0, 1);

In this configuration, I expect to have this rotation (euler in grad): (-90, 0, -90).

(The resulting solid will have its largest face down on XZ and its smallest on XY).

What I've tried:

const v1 = some_value;
const v2 = some_othen_value; // ortogonal to v1

const q1 = new Quaternion();
q1.setFromUnitVectors(new Vector3(1, 0, 0), v1);

const q2 = new Quaternion();
q2.setFromUnitVectors(new Vector3(0, 0, 1), v2);

parallelepiped.setRotationFromQuaternion(q2.multiply(q1));

This method works for certain configurations but fails badly with others.

Failure example:

V1 = new Vector3(1, 0, 0);
V2 = new Vector3(0, 0, 1);

In this case the resulting rotation is (0, 0, 0), but I would expect something like (0, 90, 90)

Do you have any idea?

score 1 · Answer 1 · answered May 10 '23 at 16:10

A bit late for you here, but for anyone else here is a Parallelepiped with an angle on the X axis:

class ParallelepipedGeometry extends THREE.ExtrudeGeometry {
    constructor(width: number, height: number, depth: number, angle: number) {
        const tl = new THREE.Vector2(0, height / Math.sin(((90 - angle) * Math.PI) / 180));
        const br = new THREE.Vector2(width, width * Math.tan((angle * Math.PI) / 180));
        const tr = new THREE.Vector2(width, br.y + tl.y);
        const shape = new THREE.Shape();
        [br, tr, tl, new THREE.Vector2()].forEach((v) => shape.lineTo(v.x, v.y));
        super(shape, { depth, bevelEnabled: false });
    }
}

If you want it angled on other axes then rotate it.

THREE.js setting a rectangle parallelepiped rotation according to "normal" vectors of two of its faces

1 Answers1