THREE.js场景对象数组跨文件调用时undefined问题求助

问题核心 #

跨文件调用sceneObject时出现objectsArray为undefined，本质是实例共享问题或数组作用域绑定错误：要么不同文件拿到的不是同一个sceneObject实例，要么objectsArray未正确挂载到实例上导致访问失效。

修复方案 #

1. 正确初始化sceneObject的objectsArray #

修改scene.js，将objectsArray作为实例属性直接初始化，确保所有方法通过this访问该数组：

// scene.js
const sceneObject = {
  scene: null,
  camera: null,
  renderer: null,
  objectsArray: [], // 直接在实例顶部初始化数组
  prepare() {
    // 初始化场景、相机、渲染器
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
  },
  addObject(obj) {
    this.objectsArray.push(obj); // 用this绑定实例数组
  },
  show() {
    // 清空旧对象避免重复渲染
    while (this.scene.children.length > 0) {
      this.scene.remove(this.scene.children[0]);
    }
    // 批量添加对象并渲染
    this.objectsArray.forEach(obj => this.scene.add(obj));
    this.renderer.render(this.scene, this.camera);
  }
};

export default sceneObject;

2. 保证跨文件使用同一个实例 #

不管是all.js还是admin.js，都直接导入scene.js导出的同一个实例，避免中间导出时意外创建新实例：

// all.js
import sceneObject from './scene.js';

sceneObject.prepare();
// 添加测试对象
const testCube = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshBasicMaterial({color: 0x00ff00})
);
sceneObject.addObject(testCube);
sceneObject.show();

export default sceneObject; // 直接导出原实例

// admin.js
import sceneObject from './scene.js'; // 直接从scene.js导入，确保实例唯一

// 绑定表单变更事件
document.getElementById('truck-form-input').addEventListener('change', () => {
  sceneObject.show(); // 此时objectsArray已正确挂载，不会为undefined
});

3. 排查模块重复加载问题 #

若使用Webpack、Vite等打包工具，检查配置确保scene.js不会被多次打包导致实例重复。如果是CommonJS环境，避免使用require多次引入，改用单例模式封装：

// 可选：scene.js用单例模式封装（针对CommonJS）
let instance = null;
function getSceneObject() {
  if (!instance) {
    instance = {
      // 原sceneObject的属性和方法
    };
  }
  return instance;
}
module.exports = getSceneObject();

关键注意事项 #

• 所有操作必须基于同一个sceneObject实例，禁止在不同文件中重新创建sceneObject对象。
• 始终用this.objectsArray访问数组，避免使用全局变量或局部变量导致作用域丢失。
• show方法中先清空场景，避免重复添加对象引发性能问题或视觉异常。

内容的提问来源于stack exchange，提问作者Tomek Burzyński