@tmesoft/3d-teaching-center v2.0.8

说明

一、基本使用

const labFloor = new LabFloor(app, {
  // 禁用后处理，不需要控制的情况下可以禁用。默认启用后处理
  disablePostProcessing: false,
  // 自动更新，无模型动画可以开启，自己控制更新时机。默认开启
  autoUpdate: true,
  // 禁用点击模型，不需要点击的情况下可以禁用。默认启用点击
  disableClickModel: false
})

// 关闭鼠标控制，默认 true
labFloor.enabled = false 

// 配置主题样式
// 默认'normal' PC后台样式
// 'dark' 导览样式
labFloor.theme = 'normal'

// 控制实验室环境状态显示隐藏，默认 false
labFloor.showStates = true

// 请求数据
const v = Date.now()
Promise.all([
  // 模型列表数据
  request.get(`glb/models.json?v=${v}`),
  // 上一次保存的数据
  request.get(`data.json?v=${v}`)
]).then(([modelList, jsonData]) => {
  // 第一次使用没有 jsonData 数据
  labFloor.initList(modelList)
  // 有上次保存的数据，需要遍历更新 data.name 以达到更新绑定的实验室名称
  if (jsonData) {
    labFloor.setJSON(jsonData)
  }
})

labFloor.addEventListener('focusChange', e => {
  console.log('焦点变化', e.model)
})

二、事件

// labFloor 能够监听的事件有：
// focusChange    焦点变化
// hoveron        移入
// hoveroff       移出
// pointerdown    按下
// pointerup      抬起
// click          点击

// 举例：监听当前鼠标点击的模型变化，取消当前选中会得到 undefined
labFloor.addEventListener('focusChange', e => {
  console.log('焦点变化', e.model)
})

三、属性

// 相机
labFloor.camera

// 渲染器
labFloor.renderer

// css2d 渲染器
labFloor.labelRenderer

// 从后端获取的模型文件列表
labFloor.list

// 当前实验室模型对象
labFloor.models

// Boolean，默认为 true 可以控制场景内的模型的平移、旋转 、缩放
labFloor.enabled

// Boolean，默认为 true，控制 tween 动画(即实验室模型高亮透明度变化的动画)
labFloor.needTween = true

// 配置主题样式
// 默认'normal' PC后台样式
// 'dark' 导览样式
labFloor.theme = 'dark'

// 控制实验室环境状态显示隐藏，默认 false
// 名称旁边的四个小颜色格子
labFloor.showStates = true

// 获取当前焦点设备模型，没有则是 undefined
labFloor.focus
// 能获取该模型绑定的数据
labFloor.focus.data
// 用于已绑定实验室的户型模型，显示绑定的实验室名称
// 注意：在 setJSON 前通过遍历修改 data.name 以达到更新绑定的实验室名称
labFloor.focus.data.name

// 绘制延迟的时间，用于控制帧率（低性能设备用），单位ms，默认16ms(60fps)
// 设备性能差的情况下，可以设置为 33ms(30fps) 或 66ms(15fps)，甚至更高
labFloor.delayTime = 16

/*
读写模型绑定的数据：
获取的焦点模型对象，统一读写 data 下的 key 与 value
注意：data 是一个 Object，不要修改 data 的值。
因为实验室模型自带设备的 data 是引用的数据，getJSON 时不会从模型对象上获取。
*/

// 获取当前焦点设备模型的环境状态，名称旁边的四个小颜色格子
// 注意：isLab = true 的模型才有 states
// 环境按照颜色划分为 green、yellow、blue、purple 
// 环境状态 true 开启， false 关闭（默认）
labFloor.focus.states
// 示例：绿色开启
labFloor.focus.states.green = true

// 安防状态下的报警图标 true 开启， false 关闭（默认）
labFloor.focus.warning.visible = false

四、方法

// 第一次场景初始化模型文件列表使用，之后不再使用
// modelList 是后端返回的模型列表
labFloor.initList( modelList )

// 单独使用 JSON 数据渲染场景，用于重置还原场景等
labFloor.setJSON( jsonData )

// 返回当前场景数据，用于保存到后端
labFloor.getJSON()

// 单独导入设备模型到场景内，添加设备可以用，可以传 id 或 列表中的设备数据
labFloor.addModel( 'typeId'  或   labFloor.list['typeId'] )

// 删除场景内的模型，可以传 array
labFloor.removeModels( 模型对象 )

// 销毁实例
labFloor.destroy()

// 模型可以控制的状态
// 注意：isLab = true 的模型才有 controls
// 状态按照颜色划分为 green、yellow、blue、purple、red，reset 恢复
// 示例：绿色开启
labFloor.focus.controls.green.play()
// 示例：恢复默认状态
labFloor.focus.controls.reset()

// 更新绘制
labScene.update()