React(TypeScript)项目中Three.js组件出现position未定义错误求助

问题原因及解决办法 #

你遇到的报错和组件作用域无关，核心是以下两个可能的原因，按优先级排查即可：

1. Three.js版本兼容性问题 #

Three.js从r125版本开始正式移除了旧的Geometry类，所有内置几何体默认返回BufferGeometry实例，如果你当前项目的Three.js版本和代码编写时的版本不一致，或者引入了兼容旧版本的垫片包，可能导致你创建的IcosahedronGeometry是旧版Geometry实例：

• 旧版Geometry没有attributes属性，也没有getAttribute()方法，所以会触发你碰到的两类报错
• 解决方法：将几何体手动转换为BufferGeometry即可，修改对应代码：

var geometry = new THREE.IcosahedronGeometry(radius, 1);
// 新增转换逻辑
geometry = new THREE.BufferGeometry().fromGeometry(geometry);
const count = geometry.attributes.position.count;

2. React 18严格模式重复挂载问题 #

如果你的项目使用React 18且开启了严格模式，开发环境下类组件的componentDidMount会执行两次，第一次创建的Three.js相关实例会被隐式释放，第二次执行时可能拿到已经销毁的geometry对象，属性为undefined。
解决方法：

• 在componentWillUnmount生命周期中添加Three.js资源销毁逻辑，主动释放几何体、材质、渲染器、事件监听器，避免内存泄漏和异常
• 初始化前加判断，避免重复挂载渲染实例

额外注意项 #

你当前代码中MeshPhongMaterial的顶点颜色属性拼写错误：你写的是vertexColours: true，正确属性名是vertexColors: true（没有字母u），修正后顶点颜色才能正常生效。

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