0.0.13 • Published 12 months ago
@cooolar/yuanbo-viewer v0.0.13
元播插件
本插件用于在H5页面中引入三维预览器，快速查看SKU模型。
使用方法
NPM引入
npm i @cooolar/yuanbo-viewer使用
import { YuanboViewer } from '@cooolar/yuanbo-viewer'
const viewer = new YuanboViewer({
container: 'viewer',
skuId: '28347589851036732',
onConfig: config => console.log('config - ', config),
onLoading: value => console.log('loading - ', value),
onError: err => console.error(err)
})API参考
YuanboViewer
方法 constructor(options?: object)
- 构造函数
options - 可选参数如下
| 参数名 | 类型 | 是否必传 | 默认值 | 说明 | |
|---|---|---|---|---|---|
| container | string | HTMLElement | 否 | - | 节点ID或DOM元素，用于挂载预览器内容元素 |
| skuId | string | 否 | - | SKU ID | |
| modelScalar | number | 否 | 1 | 模型大小比例，值越小模型越小，例：0.5表示模型显示正常大小的一半 | |
| onConfig | function | 否 | - | SKU配置信息回调 | |
| onLoading | function | 否 | - | 加载进度回调 | |
| onError | function | 否 | - | 报错信息回调 | |
| skuApiUrl | string | 否 | - | 私有化部署API路径 | |
| debug | boolean | 否 | false | 调试模式 |
function initSKU(skuId: string, options?: object): Promise<void>
- 初始化SKU
skuId - SKU ID
options - 可选参数如下
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onConfig | function | - | SKU配置信息回调 |
| onLoading | function | - | 加载进度回调 |
| onError | function | - | 报错信息回调 |
function setContainer(container: string | HTMLElement): void
- 设置挂载节点
container - 节点ID或DOM元素，用于挂载预览器内容元素
function setRendering(enable: boolean): void
- 控制渲染开始与停止
enable - true开始 | false停止
function playSizeAnimation(enable?: boolean): Promise<void>
- 调用尺寸动画
enable - 可选，true开启 | false关闭 尺寸动画，默认为当前状态取反
function playInstallSizeAnimation(enable?: boolean): Promise<void>
- 调用安装尺寸动画
enable - 可选，true开启 | false关闭 安装尺寸动画，默认为当前状态取反
function reset(): void
- 重置模型状态
function dispose(): void
- 销毁实例