npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tmesoft/lab-scene

v2.0.8

Published

a lab scene

Downloads

6

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