Three.js虚拟漫游MVC模式实现报错：Cannot read properties of undefined

从报错栈和描述来看，核心问题就是scene变量未被正确初始化，或是调用createScene时this指向错误，导致this.scene为undefined，无法调用add方法。

1. 确保Scene类的scene属性初始化到位 #

在Scene类的构造函数或init方法中，必须提前完成this.scene的赋值，避免后续调用时为空：

// Scene.js 修正示例
class Scene {
  constructor() {
    this.scene = null;
    this.init(); // 初始化要早于createScene的调用
  }

  init() {
    this.scene = new THREE.Scene(); // 在这里创建场景实例
    // 相机、渲染器等其他初始化逻辑...
  }

  createScene() {
    // 可先打印确认scene是否存在
    console.log(this.scene);
    const testMesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial());
    this.scene.add(testMesh); // 此时scene已初始化，不会报错
  }
}

2. 修复点击回调的this指向问题 #

报错栈显示触发链是sprite.onClick调用createScene，这里大概率是回调函数的this未绑定到Scene实例，导致调用时找不到this.scene。两种解决方式：

// Scene.js 中设置sprite点击事件的代码
setupInteractiveSprite() {
  const sprite = new THREE.Sprite(new THREE.SpriteMaterial());
  // 方法一：用bind绑定当前Scene实例的this
  sprite.onClick = this.createScene.bind(this);
  // 方法二：用箭头函数自动继承当前上下文的this
  sprite.onClick = () => this.createScene();
}

3. 检查Client.js的事件触发逻辑 #

在Client.js批量触发点击回调时，要确保每个sprite的onClick函数已正确绑定Scene实例的上下文：

// Client.js 修正示例
onClick(event) {
  this.scene.sprites.forEach(sprite => {
    // 若已提前绑定this，直接调用即可
    sprite.onClick();
    // 若未绑定，需手动传入Scene实例作为上下文
    // sprite.onClick.call(this.scene);
  });
}

快速排查技巧 #

• 在createScene方法开头添加console.log(this.scene)，直接确认变量是否为undefined
• 检查所有调用createScene的位置，确认this指向的是Scene类的实例
• 确保init方法一定在createScene之前执行，场景实例必须先创建才能添加元素

内容的提问来源于stack exchange，提问作者Florian Francq Twenky