Three.js获取模型顶点数据

Three.js获取模型顶点数据

通过Three.js访问或获取模型的顶点数据，也就是获得模型绑定几何体的顶点数据，比如一个网格模型Mesh，首先需要通过网格模型的几何体属性Mesh.geometry访问模型对应的几何体，然后查看几何体几何体的类型，对于Three.js而言有两种几何体类型Geometry和BufferGeometry，一般来说Three.js加载外部stl、obj、fbx、GLTF等模型，解析后返回的模型对象所包含的几何体对象一般是缓冲类型几何体BufferGeometry。

访问几何体BufferGeometry的顶点数据，可以通过.attributes和.index两个属性访问顶点数据，.index属性是几何体的顶点索引数据，如果没有顶点索引数据就返回null。除了顶点索引数据意外的数据都通过几何体BufferGeometry的.attributes属性实现，比如顶点位置坐标BufferGeometry.attributes.position,顶点UV坐标BufferGeometry.attributes.uv,顶点法向量BufferGeometry.attributes.normal。
访问.index、.position、.uv等属性，如果存在相应的顶点数据，返回的都是一个BufferAttribute对象，BufferAttribute对象.array属性就是顶点数据构成的类型化数组，比如Float32Array、Int16Array

// 访问网格模型第一个顶点位置的x坐标分量
mesh.geometry.attributes.position.getX(0)
// 访问网格模型第一个顶点位置的y坐标分量
mesh.geometry.attributes.position.getY(0)
// 访问网格模型第一个顶点位置的z坐标分量
mesh.geometry.attributes.position.getZ(0)

访问几何体Geometry的顶点数据，如果是顶点位置数据可以通过.vertices属性实现，如果是访问纹理UV坐标通过.faceVertexUvs属性实现，如果是顶点颜色数据，要具体具体分析，如果是点或线模型对象，可以通过.colors属性访问，如果是网格模型Mesh需要访问三角形属性.faces，.faces属性也包含了网格模型中三角形顶点坐标数据，顶点坐标数据是通过顶点索引指向.vertices属性。

欢迎关注我的个人技术博客