三js：如何对顶点生成的网格进行归一化

Question

我对 Three js 有点陌生，我的线性代数时代回到了 90 年代，所以我不太记得四分之一。我的问题是我有一个立方体的 8 个顶点，我可以使用它来创建自定义几何网格，但它没有为其世界矩阵设置位置/旋转/缩放信息。因此它不能被控件等其他三个js模块干净地使用。我可以查找数学并计算应该是什么位置/比例/旋转（旋转变得有点毛茸茸的一些有趣的 acos 东西）并从中创建一个标准的 boxgeometry。但是，如果我可以生成适当的矩阵来应用于它，似乎应该有一些方法可以通过三个 js 对象来完成。四元数 setFromUnitVectors 看起来很有趣，但我仍然需要做一些工作来生成向量。任何想法将不胜感激谢谢

编辑：:) 所以让我试着简化一下。我有 8 个顶点，我想创建一个长方体几何体。但是盒子几何体不带顶点。它需要宽度，高度，深度（比较容易计算）然后你设置position/scale/rotation。到目前为止，这是我的代码：

  5____4
1/___0/|
| 6__|_7
2/___3/

const box = new Box3();
box.setFromPoints(points);

const width = points[1].distanceTo(points[0]);
const height = points[3].distanceTo(points[0]);
const depth = points[4].distanceTo(points[0]);

const geometry = new BoxGeometry(width, height, depth);
mesh = new Mesh(geometry, material);

const center = box.getCenter(new Vector3());
const normalizedCorner = points[0].clone().sub(center);
const quarterian = new Quaternion();
quarterian.setFromUnitVectors(geometry.vertices[0], normalizedCorner);
mesh.setRotationFromQuaternion(quarterian);
mesh.position.copy(center);

问题是我的旋转元素是错误的（除了我的向量不是单位向量）。我显然没有得到正确的四元数来正确旋转我的网格。

编辑：根据 WestLangley 的建议，我正在创建一个旋转矩阵。然而，当它在正确的平面内旋转时，角度会偏离。这是我添加的内容：

const matrix = new Matrix4();
const widthVector = new Vector3().subVectors(points[6], points[7]).normalize();
const heightVector = new Vector3().subVectors(points[6], points[5]).normalize();
const depthVector = new Vector3().subVectors(points[6], points[2]).normalize();

matrix.set(
  widthVector.x, heightVector.x, depthVector.x, 0,
  widthVector.y, heightVector.y, depthVector.y, 0,
  widthVector.z, heightVector.z, depthVector.z, 0,
  0, 0, 0, 1,
);
mesh.quaternion.setFromRotationMatrix(matrix);

Answer 1

根据 WestLangley 的评论，我没有正确创建矩阵。正确的矩阵如下所示：

const matrix = new Matrix4();
const widthVector = new Vector3().subVectors(points[7], points[6]).normalize();
const heightVector = new Vector3().subVectors(points[5], points[6]).normalize();
const depthVector = new Vector3().subVectors(points[2], points[6]).normalize();

matrix.set(
  widthVector.x, heightVector.x, depthVector.x, 0,
  widthVector.y, heightVector.y, depthVector.y, 0,
  widthVector.z, heightVector.z, depthVector.z, 0,
  0, 0, 0, 1,
);
mesh.quaternion.setFromRotationMatrix(matrix);

三js：如何对顶点生成的网格进行归一化

Three js: How to normalize a mesh generated by vertices

linear-algebra

three.js