使用OGL库时触发Camera.js:104 TypeError错误求助

问题根源 #

错误Camera.js:104 Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')触发于frustumIntersectsMesh方法，核心原因是创建Mesh时传入的geometry参数为undefined，导致相机执行视锥体相交检测时，无法读取几何体的属性。

查看你的Canvas类代码：你定义了createGeometry方法用于创建平面几何体，但在类的构造函数里从未调用过这个方法，导致this.planeGeometry始终未初始化。当createMedias方法将this.planeGeometry传递给Media类时，Media创建Mesh时的geometry参数就是undefined，最终触发该错误。

解决方案 #

在Canvas类的构造函数中添加createGeometry方法的调用，确保平面几何体被提前初始化：

constructor() {
  this.createRenderer();
  this.createCamera();
  this.createScene();
  this.createGeometry(); // 新增此行，初始化几何体
  this.onResize();
  this.createMedias();
  this.update();
  this.addEventListeners();
}

额外检查（可选） #

可以在Media类的构造函数中添加参数校验，避免因传入无效参数导致的潜在错误：

constructor(options) {
  // ... 其他初始化代码
  if (!this.geometry) {
    console.error('Media类初始化时未传入有效的geometry参数');
    return;
  }
  this.createShader();
  this.createMesh();
  // ...
}

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