问题背景 #

升级到Three.js r125版本后，原代码里直接操作geometry.vertices以及设置verticesNeedUpdate的方式会报错——这两个属性在新版本中已被移除，且官方迁移指南和更新日志未明确提及这一变动，给旧代码维护带来了不小困扰。

原报错代码片段：

this.geometry.vertices[0].x = this.geometry.vertices[2].x = -this.canvas.width / 2;
this.geometry.vertices[1].x = this.geometry.vertices[3].x = this.canvas.width / 2;
this.geometry.vertices[0].y = this.geometry.vertices[1].y = this.canvas.height / 2;
this.geometry.vertices[2].y = this.geometry.vertices[3].y = -this.canvas.height / 2;
this.geometry.verticesNeedUpdate = true;

原因说明 #

Three.js的演进过程中，BufferGeometry早已成为推荐使用的几何体类型（旧的Geometry类型在r125版本已被完全移除），而BufferGeometry从设计上就不存在vertices和verticesNeedUpdate属性，取而代之的是通过attributes.position管理顶点数据，并用needsUpdate标记数据需要同步到GPU。

修复后的代码 #

结合社区实践建议，修改后的可行代码如下：

const negativeWidth = -this.canvas.width / 2;
const positiveWidth = this.canvas.width / 2;
const positiveHeight = this.canvas.height / 2;
const negativeHeight = -this.canvas.height / 2;

// 逐个更新顶点的XY坐标（3D场景可使用setXYZ()方法）
this.geometry.attributes.position.setXY(0, negativeWidth, positiveHeight);
this.geometry.attributes.position.setXY(1, positiveWidth, positiveHeight);
this.geometry.attributes.position.setXY(2, negativeWidth, negativeHeight);
this.geometry.attributes.position.setXY(3, positiveWidth, negativeHeight);

// 标记位置属性需要更新，通知Three.js重新上传数据到GPU
this.geometry.attributes.position.needsUpdate = true;

关键改动点 #

• 放弃直接操作vertices数组，改为通过geometry.attributes.position访问顶点数据
• 使用setXY()（或3D场景的setXYZ()）方法更新单个顶点坐标，比直接修改底层数组更安全规范
• 用attributes.position.needsUpdate = true替代原有的verticesNeedUpdate = true，完成GPU数据同步的标记

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