@tmesoft/lab-scene
v2.0.8
Published
a lab scene
Downloads
6
Keywords
Readme
说明
一、基本使用
const labScene = new LabScene(app, {
// 禁用后处理,不需要控制的情况下可以禁用。默认启用后处理
disablePostProcessing: false,
// 自动更新,无模型动画可以开启,自己控制更新时机。默认开启
autoUpdate: true,
// 禁用点击模型,不需要点击的情况下可以禁用。默认启用点击
disableClickModel: false
})
// 请求数据
const v = Date.now()
Promise.all([
// 模型列表数据
request.get(`glb/config.json?v=${v}`),
// 上一次保存的数据
request.get(`data.json?v=${v}`)
]).then(([modelList, jsonData]) => {
// 初始化列表
labScene.initList(modelList)
// 有上次保存的数据
if (jsonData) {
labScene.setJSON(jsonData)
} else {
// 第一次使用没有 jsonData 数据,传入第一个实验室
labScene.initLab(modelList.labs[0])
}
})
labScene.addEventListener('focusChange', e => {
console.log('焦点变化', e.model)
})
// 控制实验室模型动画播放
// 实际使用需要遍历 labScene.lab.equipments 下设备的 data 值匹配对应的模型再控制
// immediate 与 progress,生效条件 action.loop = THREE.LoopOnce 并且 action.clampWhenFinished = true
// immediate boolean,可选,立即到动画结果,无过渡动画
// progress number 0~1,可选,设置动画播放到指定进度
labScene.lab.equipments[ 'xx' ].controls.on_window.play(immediate, progress)
labScene.lab.equipments[ 'xx' ].controls.off_window.play(immediate, progress)
// 注意: 实验室模型动画控制:on_window、off_window、on_curtain、off_curtain
// 控制设备模型动画
// immediate 与 progress,生效条件 action.loop = THREE.LoopOnce 并且 action.clampWhenFinished = true
// immediate boolean,可选,立即到动画结果,无过渡动画
// progress number 0~1,可选,设置动画播放到指定进度
labScene.equipmentList[ typeId ].models[ 'xx' ].controls.on.play(immediate, progress)
labScene.equipmentList[ typeId ].models[ 'xx' ].controls.off.play(immediate, progress)
// 注意: 设备模型动画控制:on、off
二、事件
// labScene 能够监听的事件有:
// focusChange 焦点变化
// hoveron 移入
// hoveroff 移出
// pointerdown 按下
// pointerup 抬起
// click 点击
// 举例:监听当前鼠标点击的模型变化,取消当前选中会得到 undefined
labScene.addEventListener('focusChange', e => {
console.log('焦点变化', e.model)
})
三、属性
// 相机
labScene.camera
// 渲染器
labScene.renderer
// 从后端获取的实验室列表 array
labScene.labList
// 从后端获取的设备的列表 array
labScene.equipmentList
// 当前实验室模型对象
labScene.lab
// 当前界面上可以点击的设备模型对象
labScene.equipments
// Boolean,默认为 true 可以控制场景内的设备平移、旋转
labScene.enabled
// 获取当前焦点设备模型,没有则是 undefined
labScene.focus
// 能获取该模型绑定的数据
labScene.focus.data
// 绘制延迟的时间,用于控制帧率(低性能设备用),单位ms,默认16ms(60fps)
// 设备性能差的情况下,可以设置为 33ms(30fps) 或 66ms(15fps),甚至更高
labScene.delayTime = 16
/*
读写模型绑定的数据:
获取的焦点模型对象,统一读写 data 下的 key 与 value
注意:data 是一个 Object,不要修改 data 的值。
因为实验室模型自带设备的 data 是引用的数据,getJSON 时不会从模型对象上获取。
*/
// 控制场景灯光,0(全黑)~1(正常),开灯1,关灯0.4
labScene.renderer.toneMappingExposure = 1
// 控制门窗动画,遍历设备(object),对比每个设备下的 data 数据,再控制动画
labScene.lab.equipments
// 控制其它设备动画,根据设备类型获取对应设备对象,遍历设备(array),对比每个设备下的 data 数据,再控制动画
labScene.equipmentList[typeId].models
四、方法
// 第一次场景初始化使用,之后不再使用
// modelList 是后端返回的模型列表
// jsonData 是上一次保存的场景数据,没有的话可以使用模板
labScene.initData( modelList, jsonData )
// 单独使用 JSON 数据渲染场景,用于重置还原场景等
labScene.setJSON( jsonData )
// 返回当前场景数据,用于保存到后端
labScene.getJSON()
// 单独初始化实验室模型,切换实验室可以用,可以传 id 或 列表中的实验室数据
labScene.initLab( typeId || abScene.labList[typeId] )
// 单独导入设备模型到场景内,添加设备可以用,可以传 id 或 列表中的设备数据
labScene.addModel( typeId || labScene.equipmentList[typeId] )
// 删除场景内的模型,可以传 array
// 删除实验室传:labScene.lab 注意:实验室模型下自带的设备会被一起删除
// 删除设备模型传:labScene.equipments 注意:实验室模型下的设备不会被删除
labScene.removeModels( 模型对象 )
// 销毁实例
labScene.destroy()
// 更新绘制
labScene.update()