Three.js中平面position属性数组长度为何大于宽高分段乘积？

你对顶点数的换算逻辑错在分段数和顶点数的对应关系：

• PlaneBufferGeometry的第三、第四个参数分别是宽度方向分段数、高度方向分段数，代表对应轴向上平面被分割成多少个小网格，不是直接对应顶点数量。
• 任何线段切分为n段时，需要n+1个顶点才能支撑：比如1段线段需要2个端点，2段需要3个端点，8段就需要9个顶点。
• 你设置宽、高方向分段数均为8，对应两个轴向的顶点数都是8+1=9，整个平面的总顶点数为9*9=81个。
• 每个顶点对应x、y、z3个连续存储的坐标值，因此position数组总长度为81*3=243，和你实际运行得到的输出完全匹配。

修改顶点数据后必须标记属性需要更新，否则Three.js不会将修改同步到GPU，渲染结果不会有变化，参考实现代码：

const geometry = new THREE.PlaneBufferGeometry(1, 1, 8, 8)
const positionAttr = geometry.getAttribute('position')
const positions = positionAttr.array

// 遍历所有顶点，每个顶点占3个数组索引位
for (let i = 0; i < positions.length; i += 3) {
  const x = positions[i]
  const y = positions[i + 1]
  // 按需自定义z值，这里举个波浪效果的例子
  positions[i + 2] = Math.sin(x * Math.PI * 2) * Math.cos(y * Math.PI * 2) * 0.1
}

// 必须调用，否则修改不生效
positionAttr.needsUpdate = true

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