@tmesoft/lab-scene v2.0.8

说明

一、基本使用

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()