THREE.js Object3D调用JSON.stringify时报错：无法读取未定义属性[uuid]

这个问题我之前也碰到过，核心原因是直接用JSON.stringify()处理THREE.js的Object3D对象，没有遵循它内部的序列化机制。THREE.js的Object3D.toJSON()方法内部会维护一个UUID映射表来处理循环引用和对象关联，直接调用JSON.stringify触发的默认序列化流程会破坏这个逻辑，导致出现读取UUID属性时的undefined错误。

下面是几个可行的解决方案：

1. 使用THREE.js官方的JSONExporter（推荐） #

THREE.js专门提供了JSONExporter工具来处理3D对象的序列化，它能正确处理Object3D的父子关系、UUID映射和内部状态：

// 初始化导出器
const exporter = new THREE.JSONExporter();
// 解析你的Object3D得到可序列化的JSON对象
const serializedData = exporter.parse(yourTopLevelObject3D);
// 再转换成JSON字符串
const jsonString = JSON.stringify(serializedData);

2. 先调用Object3D.toJSON()再序列化 #

如果你不想用JSONExporter，可以先手动调用Object3D的toJSON()方法得到预处理后的对象，再进行stringify，这样能避免内部映射表的问题：

// 先得到THREE.js处理后的序列化对象
const preparedObj = yourTopLevelObject3D.toJSON();
// 再安全执行stringify
const jsonString = JSON.stringify(preparedObj);

3. 排查自定义属性或不完整的子对象 #

如果上面的方法还是报错，需要检查你的Object3D结构：

• 有没有添加非可序列化的自定义属性（比如函数、DOM元素、循环引用的对象）？如果有，需要在序列化前移除或处理这些属性，比如重写toJSON方法：

yourTopLevelObject3D.toJSON = function() {
  // 先调用父类的toJSON方法
  const baseJson = THREE.Object3D.prototype.toJSON.call(this);
  // 删除或转换不可序列化的自定义属性
  delete baseJson.userData.someFunctionProp;
  delete baseJson.userData.domElementRef;
  return baseJson;
};

• 有没有未初始化的子对象？比如某个Mesh没有绑定geometry或material，这类不完整的对象会导致序列化流程出错，确保所有子对象都是完整初始化的。

内容的提问来源于stack exchange，提问作者Emma Scott Lavin