Three.js Position属性为何生成重复顶点？BoxGeometry实例分析

你遇到的BoxGeometry读取到24个顶点而非预期8个的情况，是Three.js内置几何体的设计逻辑导致的，核心原因是渲染时的属性独立性需求：

• 立方体有6个面，每个面需要4个顶点来定义。从空间位置看，立方体确实只有8个独特顶点，但Three.js会为每个面的每个角单独存储顶点数据。这是因为同一个空间位置的顶点，在不同面上需要不同的渲染属性（比如法线方向、UV坐标）。
• 举个例子：立方体正面的顶点法线朝前，顶面的顶点法线朝上，即使这两个顶点在空间中是同一个点，它们的法线属性完全不同，无法复用，所以必须拆分成两个独立的顶点存储。
• 6个面 × 4个顶点 = 24个顶点，这就是你从position属性中读取到24个顶点的原因。

你的代码中直接遍历positionAttrib.count获取所有顶点，自然会拿到这24个位置重复但属性不同的顶点，转换世界坐标后位置依然重合，因此需要通过距离判断的方式手动去重。这种去重逻辑是可行的，注意设置合理的距离阈值（比如0.01）即可避免浮点数计算误差导致的误判。

内容的提问来源于stack exchange，提问作者MiguelG