# 引入方式与事件监听

介绍两种集成方式（全局挂载 / 模块化 ESM），以及统一的事件监听方法。

## 全局挂载（非模块化）
1. 引入全局构建产物（替换为你的实际部署地址）：
   ```html
   <script src="https://sdk.zguiy.com/zt/assets/index.global.js"></script>
   ```
2. 获取实例并初始化：
   ```js
   const kernel = window.faceSDK?.kernel
   if (!kernel) {
     console.error('SDK 未加载')
   } else {
     kernel.init({
       container: '#renderDom',           // 容器 ID（canvas） 或者 DOM 元素引用
       modelUrlList: ['./model.glb'],    // 模型列表
       env: { envPath: '/public/hdr/hdr.env', intensity: 1.2, rotationY: 0.3 },  // 环境贴图等参数
     })
   }
   ```

## 模块化（ESM）
1. 在 `<script type="module">` 中导入：
   ```js
   import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js' // 构建后路径自行替换
   ```
2. 初始化（与全局方式一致）：
   ```js
   kernel.init({
     container: '#renderDom',           // 容器 ID（canvas） 或者 DOM 元素引用
     modelUrlList: ['./model.glb'],
     env: { envPath: '/public/hdr/hdr.env', intensity: 1.2, rotationY: 0.3 },  // 环境贴图等参数
   })
   ```

## 事件监听（两种方式通用）
```js
kernel.on('model:load:progress', (data) => console.log('模型加载进度', data))
kernel.on('model:loaded', (data) => console.log('模型加载完成', data))
kernel.on('model:click', (data) => console.log('模型点击', data))

// 需要时可移除
// kernel.off('model:loaded', handler)
```

## 提供测试用的模型和环境贴图
```
https://sdk.zguiy.com/resurces/model/model.glb

```

```
https://sdk.zguiy.com/resurces/hdr/hdr.env

```