threejs 头疼事情之一事件01

        在做threejs相关开发的时候，或者封装成三维可视化引擎的时候，应用到项目中，总会和事件打交道，因为项目肯定有交互。但是 threejs 对事件又不友好，反正折腾来折腾去，疼痛。

在Three.js中，Object3D类并没有内置的事件系统，如DOM元素在HTML中那样。Three.js主要关注于3D图形渲染，而不是事件处理。然而，Three.js提供了一些机制来处理用户输入和场景交互，以下是一些可以触发或监听的事件类型：

1. 鼠标事件：通过使用Raycaster类，你可以检测鼠标点击或移动与3D对象的交点。这些事件通常不是直接在Object3D上触发，而是通过监听DOM元素（如canvas）的鼠标事件来实现。

2. 触摸事件：类似于鼠标事件，你可以监听触摸屏幕的事件，并将其转换为3D空间中的射线，以检测与场景中对象的交点。

3. 动画帧事件：使用requestAnimationFrame或Three.js的AnimationAction，你可以在每个动画帧中执行特定的逻辑。

4. 渲染器事件：Three.js的渲染器（如WebGLRenderer）可以触发一些事件，例如在渲染前后。

5. 自定义事件：你可以在Object3D或其他Three.js对象上实现自定义事件系统，通过使用JavaScript的EventEmitter或其他模式来管理和触发事件。

6. 交互式控件事件：使用Three.js的控件（如OrbitControls）时，可以监听控件的事件，如旋转、缩放等。

7. 物理引擎事件：如果你将Three.js与物理引擎（如Cannon.js或Ammo.js）结合使用，你可以监听物理事件，如碰撞或接触。

8. 加载器事件：Three.js的加载器（如Loader）可以触发加载进度、成功或失败的事件。

9. 音频事件：如果你使用Web Audio API与Three.js结合，可以监听音频相关的事件。

要在Three.js中实现类似DOM的事件监听，你可以扩展Object3D类或使用组合模式将事件监听器附加到3D对象上。

class InteractiveObject extends THREE.Object3D {
  constructor() {
    super();
    this.listeners = {};
  }

  addEventListener(type, listener) {
    if (!this.listeners[type]) {
      this.listeners[type] = [];
    }
    this.listeners[type].push(listener);
  }

  removeEventListener(type, listener) {
    const index = this.listeners[type].indexOf(listener);
    if (index !== -1) {
      this.listeners[type].splice(index, 1);
    }
  }

  dispatchEvent(event) {
    const type = event.type;
    if (this.listeners[type]) {
      this.listeners[type].forEach(listener => listener(event));
    }
  }
}

const interactiveObject = new InteractiveObject();
interactiveObject.addEventListener('click', event => {
  console.log('Object clicked:', event);
});

// 模拟触发事件
const clickEvent = { type: 'click' };
interactiveObject.dispatchEvent(clickEvent);