使用THREE.js根据两个面的法向量设置一个矩形平行六面体的旋转。

Question

我有一个三维空间中的矩形平行六面体，如下所示：

假设它被放置在坐标轴原点上，并且当它的旋转为(0,0,0)时，它的最大面（绿色）在XY平面，最小面（蓝色）平行于YZ平面。

假设我有两个（正交）向量V1和V2。

V1表示Object3d最大面（绿色面）的法向量。

V2是最小面（蓝色面）的法向量。

给定两个新向量，如何在三维空间中旋转这个平行六面体，使其面的法向量与这些新向量对齐？

例如：

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

在这个设置中，我期望有这个旋转（欧拉角以度为单位）：(-90, 0, -90)。

（生成的实体将其最大面朝下放在XZ平面上，最小面放在XY平面上）。

我尝试过的方法：

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

这种方法对于某些配置是有效的，但在其他情况下会失败得很厉害。

失败示例：

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

在这种情况下，旋转的结果是（0，0，0），但我期望得到类似于（0, 90, 90）的结果。您有任何想法吗？

- ProGM

Answer 1

可能对你来说有点晚了，但是对于其他人来说，这是一个在X轴上有角度的平行六面体：

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

如果你想让它在其他轴上倾斜，那就旋转它。

- Kong