# 事件监听指南

说明如何订阅/取消订阅 SDK 事件，适用于全局挂载与 ESM 两种集成方式。

## 获取实例
- ESM：`import { kernel } from '.../index.js'`
- 全局：`const kernel = window.faceSDK?.kernel`

以下示例统一使用 `kernel`。

## 常见事件
- 相机：`camera:changed`
- 热点：`hotspot:click`、`hotspot:hover`、`hotspot:focus`、`hotspot:rendered`
- 模型：`model:loaded`、`model:replaced`、`model:destroyed`、`model:load:progress`
- 材质：`material:applied`、`material:reset`
- 其他：业务自定义事件（若有）

## 订阅与取消
```ts
// 订阅
const handleHotspotClick = (evt) => {
  console.log('hotspot click', evt.id, evt.payload)
}
kernel.on('hotspot:click', handleHotspotClick)

// 取消订阅
kernel.off('hotspot:click', handleHotspotClick)
```

## 示例：热点事件
```ts
kernel.on('hotspot:hover', ({ id, hovering }) => {
  // 根据 hovering 控制高亮/提示
})

kernel.on('hotspot:rendered', () => {
  console.log('所有热点已就绪')
})
```

## 示例：模型事件
```ts
kernel.on('model:load:progress', ({ id, progress }) => {
  console.log(`模型 ${id} 进度`, progress)
})

kernel.on('model:loaded', ({ id }) => {
  console.log(`模型 ${id} 加载完成`)
})

kernel.on('model:replaced', ({ id }) => {
  console.log(`模型 ${id} 已替换`)
})
```

## 示例：相机与材质
```ts
kernel.on('camera:changed', (state) => {
  console.log('相机状态', state)
})

kernel.on('material:applied', ({ target, material }) => {
  console.log(`材质已应用到 ${target}: ${material}`)
})
```

## 调试与日志
```ts
// 输出加载、事件、性能相关的调试信息
kernel.debug(true)
```
