1.7 KiB
1.7 KiB
引入方式与事件监听
介绍两种集成方式(全局挂载 / 模块化 ESM),以及统一的事件监听方法。
全局挂载(非模块化)
- 引入全局构建产物(替换为你的实际部署地址):
<script src="https://sdk.zguiy.com/zt/assets/index.global.js"></script> - 获取实例并初始化:
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)
- 在
<script type="module">中导入:import { kernel } from 'https://sdk.zguiy.com/zt/assets/index.js' // 构建后路径自行替换 - 初始化(与全局方式一致):
kernel.init({ container: '#renderDom', // 容器 ID(canvas) 或者 DOM 元素引用 modelUrlList: ['./model.glb'], env: { envPath: '/public/hdr/hdr.env', intensity: 1.2, rotationY: 0.3 }, // 环境贴图等参数 })
事件监听(两种方式通用)
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