47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
# 引入方式与事件监听
|
||
|
||
介绍两种集成方式（全局挂载 / 模块化 ESM），以及统一的事件监听方法。
|
||
|
||
## 全局挂载（非模块化）
|
||
1. 引入全局构建产物（替换为你的实际部署地址）：
|
||
```html
|
||
<script src="https://sdk.zguiy.com/zt/assets/index.js"></script>
|
||
```
|
||
2. 获取实例并初始化：
|
||
```js
|
||
const kernel = window.faceSDK?.kernel
|
||
if (!kernel) {
|
||
console.error('SDK 未加载')
|
||
} else {
|
||
kernel.init({
|
||
container: 'renderDom', // 容器 ID（canvas）
|
||
modelUrlList: ['./model.glb'], // 模型列表
|
||
env: { hdrPath: '/hdr/my.env' }, // 环境贴图等参数
|
||
})
|
||
}
|
||
```
|
||
|
||
## 模块化（ESM）
|
||
1. 在 `<script type="module">` 中导入：
|
||
```js
|
||
import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js' // 构建后路径自行替换
|
||
```
|
||
2. 初始化（与全局方式一致）：
|
||
```js
|
||
kernel.init({
|
||
container: 'renderDom',
|
||
modelUrlList: ['./model.glb'],
|
||
env: { envPath: '/hdr/my.env' },
|
||
})
|
||
```
|
||
|
||
## 事件监听（两种方式通用）
|
||
```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)
|
||
```
|