在 Three.js 中将模型加载器（如 FBXLoader）封装于 ES6 类方法时，因普通回调函数丢失 this 上下文，导致无法访问类私有属性（如 #scene），引发加载失败；正确做法是使用箭头函数或缓存 this 引用。
在 three.js 中将模型加载器（如 fbxloader）封装于 es6 类方法时，因普通回调函数丢失 `this` 上下文，导致无法访问类私有属性（如 `#scene`），引发加载失败；正确做法是使用箭头函数或缓存 `this` 引用。
在基于类的 Three.js 应用开发中，将场景、相机、渲染器等核心对象封装为类成员（尤其是使用私有字段 #scene）是良好实践。但当在类方法中调用异步加载器（如 FBXLoader.load()）时，其三个回调函数（onLoad、onProgress、onError）默认以全局上下文（非类实例）执行，因此 this 不再指向当前 RenderCanvas 实例——这直接导致 this.#scene.add(obj) 报错（Cannot read private member #scene from an object whose class did not declare it），即使模型已成功下载完毕。
根本原因在于：FBXLoader.load() 的回调函数是普通函数声明（function (obj) { ... }），而非箭头函数，其内部 this 绑定与调用位置无关，而是由执行时的调用方式决定（此处为 loader 内部调用，this 指向 window 或 undefined（严格模式）），因此无法访问类的私有字段。
✅ 推荐解决方案：使用箭头函数（简洁、语义清晰、自动绑定 this）
loadGeometries() {
const modelLoader = new FBXLoader();
for (const path of listOfObjects) {
modelLoader.load(
path,
(obj) => { // ← 箭头函数：自动继承外层作用域的 this
obj.traverse((child) => {
// 可在此处设置材质、启用阴影等
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
this.#scene.add(obj); // ✅ 正确访问私有场景
},
(xhr) => {
console.log(`Loaded ${Math.round((xhr.loaded / xhr.total) * 100)}%`);
},
(err) => {
console.error(`Failed to load model from ${path}:`, err);
}
);
}
}⚠️ 替代方案（兼容旧环境）：显式缓存 this 引用
loadGeometries() {
const modelLoader = new FBXLoader();
const self = this; // 或 const scope = this;
for (const path of listOfObjects) {
modelLoader.load(
path,
function (obj) { // 普通函数
obj.traverse(function (child) { /* ... */ });
self.#scene.add(obj); // ✅ 使用缓存变量访问私有属性
},
function (xhr) { /* ... */ },
function (err) { /* ... */ }
);
}
}? 注意事项与最佳实践：
- 避免在循环中重复创建 Loader 实例：FBXLoader 实例可复用，应在类构造函数中初始化一次（如 this.#fbxLoader = new FBXLoader();），提升性能并减少内存开销；
- 错误处理需具体化：onError 回调应记录 path 和 err，便于定位哪个模型出错；
- 异步加载顺序不可控：多个 load() 并发执行，添加顺序不等于加载完成顺序；若需严格顺序，应使用 Promise.all() 封装或链式加载；
- 资源管理：加载后的模型建议保存引用（如 this.#models.push(obj)），便于后续销毁、动画控制或射线拾取；
- 类型安全（TypeScript）：为 listOfObjects 显式标注类型（如 string[]），并在 loadGeometries 参数中校验路径有效性，增强健壮性。
综上，该问题本质是 JavaScript this 绑定机制与 ES2022 私有字段访问限制共同作用的结果。采用箭头函数是最符合现代 TypeScript/ES6 开发习惯的解法，既保持代码简洁，又确保上下文安全。
