Three.js 0.124版本出现geometry.attributes为null报错如何解决？

问题原因 #

Three.js r124版本中，THREE.PlaneGeometry仍属于传统Geometry类的子类，该类没有attributes属性，只有BufferGeometry体系的类才具备该属性，因此直接访问geometry.attributes会得到null值，触发读取position属性的报错。
r125版本后官方完全移除了传统Geometry类，所有内置几何体默认都继承自BufferGeometry，因此升级到r125版本后原有代码可直接正常运行。

不升级r124版本的修复方案 #

方案1：替换为Buffer版本的平面几何体 #

只需将PlaneGeometry替换为PlaneBufferGeometry即可，其余操作顶点的代码无需修改：

const segment = 25
// 仅修改此处构造函数名
const geometry = new THREE.PlaneBufferGeometry(dimension, dimension, segment, segment)
const vertices = segment + 1 // 补充代码中缺失的顶点数定义，段数为n的平面顶点数是n+1
for (let i = 0; i < vertices; i++) {
        const idx = i * vertices
        const fVal = (simplex.noise2D(ni, nj) + 1) / 2
        const sVal = (0.5 * simplex.noise2D(ni * 2, nj * 2) + 1) / 2
        const tVal = (0.25 * simplex.noise2D(ni * 4, nj * 4) + 1) / 2
        const vtx = (fVal + sVal + tVal) / 2.15
        geometry.attributes.position.setY(idx, Math.pow(vtx, 2.5) * 350)
}
// 顶点修改后需要添加更新标记才能生效
geometry.attributes.position.needsUpdate = true

方案2：将传统Geometry转换为BufferGeometry #

如果你需要保留原有PlaneGeometry的其他操作逻辑，可以手动将其转为BufferGeometry后再操作顶点：

const segment = 25
const geometry = new THREE.PlaneGeometry(dimension, dimension, segment, segment)
// 转换为BufferGeometry
const bufferGeo = new THREE.BufferGeometry().fromGeometry(geometry)
const vertices = segment + 1
for (let i = 0; i < vertices; i++) {
        const idx = i * vertices
        const fVal = (simplex.noise2D(ni, nj) + 1) / 2
        const sVal = (0.5 * simplex.noise2D(ni * 2, nj * 2) + 1) / 2
        const tVal = (0.25 * simplex.noise2D(ni * 4, nj * 4) + 1) / 2
        const vtx = (fVal + sVal + tVal) / 2.15
        bufferGeo.attributes.position.setY(idx, Math.pow(vtx, 2.5) * 350)
}
bufferGeo.attributes.position.needsUpdate = true
// 后续使用bufferGeo进行渲染即可

补充说明 #

两种方案对原有业务逻辑的侵入性都很低，不需要修改地形生成的核心算法。如果后续可以升级版本，升级到r125及以上版本即可直接使用原有代码，无需额外适配。

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