0.0.10 • Published 9 months ago
@cooolar/yuanbo-viewer v0.0.10
元播插件
本插件用于在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)
- 初始化SKU
skuId
- SKU ID
options
- 可选参数如下
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
onConfig | function | - | SKU配置信息回调 |
onLoading | function | - | 加载进度回调 |
onError | function | - | 报错信息回调 |
function setContainer(container: string | HTMLElement)
- 设置挂载节点
container
- 节点ID或DOM元素,用于挂载预览器内容元素
function setRendering(enable: boolean)
- 控制渲染开始与停止
enable
- true
开始 | false
停止
function playSizeAnimation(enable?: boolean)
- 调用尺寸动画
enable
- 可选,true
开启 | false
关闭 尺寸动画,默认为当前状态取反
function reset()
- 重置模型状态
function dispose()
- 销毁实例