理解three.js坐标和轴系的问题

Question

我有以下代码：

// coordinate values
var x1 = -815723.5125568421;
var y1 = 20538442.534868136;
var z1 = -17.439584224846456;
var x2 = -815723.5125568421;
var y2 = 20538443.164575472;
var z2 = -16.620415776398275;

// make a rectangular face parallel to y-z plane
var dummySquare = new THREE.Geometry();
dummySquare.vertices.push(new THREE.Vector3(x1,y1,z1));
dummySquare.vertices.push(new THREE.Vector3(x1,y1,z2));
dummySquare.vertices.push(new THREE.Vector3(x2,y2,z1));
dummySquare.vertices.push(new THREE.Vector3(x2,y2,z2));
dummySquare.faces.push(new THREE.Face3(0,1,2));
dummySquare.faces.push(new THREE.Face3(1,2,3));
var dummySquareMaterial = new THREE.MeshBasicMaterial( { color: "#0000FF", side: THREE.DoubleSide } );
var dummySquareMesh = new THREE.Mesh(dummySquare, dummySquareMaterial);

所以，我正在制作一个平行于 y-z 平面的矩形面。 在调试期间，我观察到以下内容：

顶点：数组(4)

0: p {x: -815723.5125568421, y: 20538442.534868136, z: -17.439584224846456}

1: p {x: -815723.5125568421, y: 20538442.534868136, z: -16.620415776398275}

2: p {x: -815723.5125568421, y: 20538443.164575472, z: -17.439584224846456}

3: p {x: -815723.5125568421, y: 20538443.164575472, z: -16.620415776398275}

位置：p {x: 0, y: 0, z: 0}

所以顶点符合预期。但是位置在（0,0,0）。我希望位置是由以上四个顶点定义的平面的中点。

我的理解中缺少什么？

另一个观察如下。

我像上面一样制作了两张脸（相同的顶点）。

对于两个面之一，我确定几何中心，将几何移动到原点（按中心的负值平移），用它创建一个网格，然后我移回原始位置：

var face = new THREE.Geometry();
....add vertices as code snippet above
var faceCentre = new THREE.Vector3();
face.boundingBox.getCenter(faceCentre );
face.translate(-faceCentre .x,-faceCentre .y,-faceCentre .z);
//make mesh
var faceMaterial = new THREE.MeshBasicMaterial( { color: "#FF0000", side: 
THREE.DoubleSide } );
var faceMesh= new THREE.Mesh(face, faceMaterial);
// move mesh back by setting its position to original centre of face
faceMesh.position.x = faceCentre .x;
faceMesh.position.y = faceCentre .y;
faceMesh.position.z = faceCentre .z;

如预期的那样，未移动的面与上面的面具有相同的顶点。

但其他面现在具有完全不同的顶点，即使两者都显示在相同的位置和相同的方向。

为什么顶点有这种差异？

Answer 1

THREE.js 使用对象及其翻译的分层表示。特别是，Object3D 的.position 通常不像你所说的那样是它在世界空间中的中间点，但它可以被视为存储对象当前平移的变量。它被称为它的本地位置。此翻译默认为(0,0,0)。

因此，当您通过几何体的顶点定义对象时，对象的顶点将在这些位置进行渲染。但是，如果您将.translate() 乘以(dx, dy, dz)，则顶点(vx, vy, vz) 将在位置(vx+dx, vy+dy, vz+dz) 处渲染。

类似地，其他转换也存储为对象的成员。当对象被变换时，几何的顶点不会改变，而是对象会跟踪其当前的局部变换，这些变换通常作为一系列矩阵乘法应用于顶点。使用这种逻辑，您可以在彼此内部定义一棵对象树，它们相对于其父对象具有局部变换，而后者又可能相对于其父对象进行变换等。这种表示对于稍微复杂的场景非常有用.

这应该可以解释您的结果。例如，在您的第一个测试中，您成功地在您想要的位置创建了一个对象，但它的 position 仍然是 (0,0,0)，因为它没有经过任何转换。