javascript - 获取网格顶点的最佳方法 Three.js

Question

我是 Three.js 的新手，所以也许我不会以最佳方式解决这个问题，

我创建的几何图形如下，

const geo = new THREE.PlaneBufferGeometry(10,0);

然后我对其进行旋转

geo.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI * 0.5 ) );

然后我用它创建一个网格

const open = new THREE.Mesh( geo, materialNormal);

然后，我对网格应用一系列操作以将其正确定位，如下所示:

open.position.copy(v2(10,20);
open.position.z = 0.5*10

open.position.x -= 20
open.position.y -= 10
open.rotation.z = angle;

现在，在位置更改之前和之后获取网格顶点的最佳方法是什么？我惊讶地发现网格的顶点并未内置到 Three.js 中。

任何提示和代码示例将不胜感激。

Answer 1

我认为您被有关 Three.js 对象的一些语义所困扰。

1) 网格没有顶点。 Mesh 包含对 Geometry/BufferGeometry 和 Material 的引用。顶点包含在网格的几何属性/对象中。

2) 您正在使用 PlaneBufferGeometry，这意味着 BufferGeometry 对象的实现。 BufferGeometry 将其顶点保留在 position 属性 (mesh.geometry.attributes.position) 中。请记住，顶点顺序可能会受到 index 属性 (mesh.geometry.index) 的影响。

现在回答你的问题，几何原点也是其父网格的原点，因此你的“网格变换之前”顶点位置与创建网格时完全相同。只需按原样读出它们即可。

要获取“网格变换后”顶点位置，您需要获取每个顶点，并将其从网格的本地空间转换为世界空间。幸运的是， Three.js 有一个方便的函数可以做到这一点:

var tempVertex = new THREE.Vector3();
// set tempVertex based on information from mesh.geometry.attributes.position

mesh.localToWorld(tempVertex);
// tempVertex is converted from local coordinates into world coordinates,
// which is its "after mesh transformation" position