时间戳

首页 > 解决方案 > 理解three.js坐标和轴系的问题

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

问题描述

我有以下代码：

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

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

顶点：数组（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;

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

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

为什么顶点有这种差异？

标签： three.js

解决方案

THREE.js 使用对象及其翻译的分层表示。尤其是.positionanObject3D的 ，如你所说，一般不是它在世界空间中的中点，但它可以被视为存储对象当前平移的变量。它被称为它的本地位置。这个翻译是(0,0,0)默认的。

因此，当您通过其几何体的顶点定义对象时，对象的顶点将在这些位置进行渲染。但是，如果你.translate()按一个 factor (dx, dy, dz)，那么一个顶点(vx, vy, vz)将在 position 处渲染(vx+dx, vy+dy, vz+dz)。

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

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

推荐阅读