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

【问题标题】：Three js: How to normalize a mesh generated by vertices三个js：如何对顶点生成的网格进行归一化
【发布时间】：2018-09-23 01:29:55
【问题描述】：

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

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

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

【问题讨论】：

我读了两遍，不明白你想达到什么目的。
对不起，如果我不清楚@pailhead。让我知道这是否有意义
控制台日志geometry.vertices[0].length() 和normalizedCorner.length() 为了使四元数方法起作用，我认为这两个需要单位。您想通过使用BoxGeometry来可视化多个点的边界框吗？
我认为您对这里的一些概念感到困惑。如果你有 8 个顶点 (0-7) 已经是盒子的角，你为什么还要使用 Box3 类？
@JimSosa 盒子是否旋转了——也就是说，不是轴对齐的？如果是这样，您需要使用mesh.quaternion.setFromRotationMatrix( matrix4 )。您用三个、列、单位向量 6->7、6->5 和 6->2 填充 matrix4 的左上角 3x3。这应该设置四元数，以便您的网格根据您的点定向——只要三个向量实际上是正交的（重要的！）和单位长度的（重要的！）。

标签： three.js linear-algebra

【解决方案1】：

根据 WestLangley 的 cmets，我没有正确创建矩阵。正确的矩阵如下：

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

【讨论】：