请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 332|回复: 0

[分享] ThingJS供给picker类拾取计划完成通明修建内的拾取

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-9-28 20:47:23 | 显示全部楼层 |阅读模式

挑选三维模子工具(射线拾取)若何操纵? 在canvas画布上利用鼠标单击选中一个三维模子工具,三维模子然后做出反应,比如弹出一个窗口、色彩发生变化。ThingJS供给picker类拾取计划来完成通明修建内的拾取。

ThingJS供给picker类拾取计划完成通明修建内的拾取

物联网利用中 3D 场景中的模子会越来越多,这时我们不成避免需要一些交互结果,比如当点击某一个模子的时辰做出反应行动,这需要我们可以经过鼠标的点击位置推导出点击到的模子,这类技术实现称为 3D 拾取。

Picker(挑选器/拾取器/拔取器)是指供给多个选项调集供用户挑选其中一项的控件,在T

hingJS在线开辟平台,Picker是thingjs中为拾取建造的一个类,主如果用于拾取物体,同时也有框选拾取的功用。

在3D场景中会建立某些对应实在物品的工具,模子内置了简单动画,经过很多事务设备,比如点击鼠标、键盘输入、层级变化等,让用户监听这些事务,在事务回调中停止响应的营业逻辑处置。

在三维场景模子比力多的时辰,我们需要斟酌若何高效的实现拔取操纵。官方支持分歧的拾取技术实现:

1. 经过属性和接口获得鼠标拾取(Pick)的物体

2. 经过事务获得鼠标拾取的物体

3. 地区 Pick 物体

4. pickedResultFunc设备拾取工具回调函数

ThingJS供给picker类拾取计划完成通明修建内的拾取

官方示例新颖出炉,可以用代码块点窜良入层级挑选设备。

回调函数就是一个经过函数指针挪用的函数,可经过 pickedResultFunc 设备拾取工具回调函数,示例以下:

  1. var app = new THING.App({
  2. url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
  3. });
  4. app.on('load', function (ev) {
  5. app.level.change(ev.campus);
  6. })
  7. // 点窜良入层级挑选设备
  8. // {String} ev.level 当前层级标识列举值 可经过 THING.LevelType 获得列举值,如修建层级标识为 THING.LevelType.Building
  9. // {THING.BaseObject} ev.object 当前层级工具(将要进入的层级工具)
  10. // {THING.BaseObject} ev.current 当前层级工具(将要进入的层级工具)
  11. // {THING.BaseObject} ev.previous 上一层级工具(分开的层级工具)
  12. app.on(THING.EventType.EnterLevel, '.Campus', function (ev) {
  13. app.picker.pickedResultFunc = function (obj) {
  14. if (obj instanceof THING.Thing) {
  15. return obj;
  16. }
  17. return null;
  18. }
  19. }, 'customLevelPickedResultFunc');
  20. // 停息园区层级的默许挑选行为
  21. app.pauseEvent(THING.EventType.EnterLevel, '.Campus', THING.EventTag.LevelPickedResultFunc);
  22. app.on('click', function (ev) { console.log(ev.object.name) })
  23. app.on(THING.EventType.EnterLevel, '.Campus', function () {
  24. var build = app.buildings[0];
  25. build.floors.visible = true;
  26. build.floors[0].things.inheritStyle = false;
  27. build.style.opacity = 0.2;
  28. build.pickable = false;
  29. build.floors.forEach(function (floor) {
  30. floor.pickable = false;
  31. })
  32. build.floors[0].things.forEach(function (thing) {
  33. thing.pickable = true;
  34. })
  35. })
复制代码


ThingJS,3D开辟轻松来袭!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则