如何用Three.js将矩形按指定距离平移生成平行矩形？

要实现沿矩形平面法向量方向平移指定距离H，得到平行的新矩形（对应点连线构成直平行六面体），核心是先算出矩形的法向量，再沿该方向平移所有顶点，步骤如下：

1. 计算矩形的法向量 #

从原矩形的四个顶点中提取两条相邻边的向量（假设顶点顺序为A-B-C-D-A，A的相邻顶点是B和D）：

• 计算边向量 AB = B坐标 - A坐标
• 计算边向量 AD = D坐标 - A坐标
• 用叉乘得到法向量：normal = AB × AD，再对法向量归一化（normal.normalize()），确保平移距离精准对应H。

注：叉乘结果的方向由顶点顺序决定（Three.js采用右手坐标系），如果得到的法向量方向与你需要的"左/右"相反，只需对法向量取反（normal *= -1）即可。

2. 生成平移后的顶点 #

将归一化后的法向量乘以平移距离H，得到平移向量 offset = normal * H。对每个原顶点加上这个平移向量，就得到新顶点：

• 新顶点A' = A + offset
• 新顶点B' = B + offset
• 新顶点C' = C + offset
• 新顶点D' = D + offset

完整代码示例 #

// 假设原矩形四个顶点已用Three.js Vector3定义
const A = new THREE.Vector3(x1, y1, z1);
const B = new THREE.Vector3(x2, y2, z2);
const C = new THREE.Vector3(x3, y3, z3);
const D = new THREE.Vector3(x4, y4, z4);

const translateDistance = H; // 你的平移距离H
const isTranslateLeft = true; // true为向左，false为向右，按需调整

// 计算边向量
const AB = new THREE.Vector3().subVectors(B, A);
const AD = new THREE.Vector3().subVectors(D, A);

// 计算并归一化法向量
const normal = new THREE.Vector3().crossVectors(AB, AD).normalize();

// 调整平移方向（左/右）
if (isTranslateLeft) {
  normal.multiplyScalar(-1);
}

// 生成平移向量
const offset = normal.multiplyScalar(translateDistance);

// 计算新顶点
const A_new = A.clone().add(offset);
const B_new = B.clone().add(offset);
const C_new = C.clone().add(offset);
const D_new = D.clone().add(offset);

// 输出结果
console.log("平移后的顶点：", A_new, B_new, C_new, D_new);

关键说明 #

• 确保原矩形的顶点顺序是连续的（顺时针或逆时针依次排列），否则叉乘得到的法向量方向可能错误。
• 直平行六面体要求平移方向必须垂直于原矩形平面，因此必须用法向量作为平移方向，不能随意选取其他方向。

内容的提问来源于stack exchange，提问作者QwertyKeker