请选择 进入手机版 | 继续访问电脑版
Imagination 2021 ThingJS开发者大会
查看: 724|回复: 0

[分享] 从零起头进修3D可视化之拾取

[复制链接]
avatar

43

主题

43

帖子

322

积分

中级会员

Rank: 3Rank: 3

积分
322
ico_lz  楼主| 发表于 2021-6-22 14:36:12 | 显示全部楼层 |阅读模式
本帖最初由 thisisYXY 于 2021-6-22 14:43 编辑

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

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

3、 地区 Pick 物体

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

在开辟数字孪生可视化场景利用时经常会用到拾取功用,望文生义,在数字孪生可视化场景中拾取就是判定一个数字孪生可视化场景中哪个工具被点击。数字孪生可视化场景中的模子很是多,不成避免需要一些交互结果。比如当点击某一个模子的时辰做出反应行动,这需要可以经过鼠标的点击位置推导出点击到的模子,这类技术实现称为拾取。

在数字孪生可视化场景中模子比力多的时辰,应当若何高效的实现拾取操纵呢?下面先容四种方式:

1、经过属性和接口拾取(Pick)物体
经过平台供给的属性和接口可以获得鼠标拾取到(Pick)的物体,将下面的代码输入到项目文件中,就会在日志窗口输出当前拾取和之前拾取的数字孪生可视化物体。

从零起头进修3D可视化之拾取



代码以下:
  1. <blockquote>// 每一帧判定拾取的物体能否发生变化
复制代码


2、经过事务获得鼠标拾取的物体
经过事务获得鼠标拾取的物体,可以经过 MouseEnter 和 MouseLeave 事务来实现 。将下面的代码输入到项目文件中,即可给鼠标拾取到的工具增加边框。

从零起头进修3D可视化之拾取



代码以下:
  1. <span style="font-size: 12.8px;">// 鼠标拾取物体显现边框
  2. app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) {
  3. ev.object.style.outlineColor = '#FF0000';
  4. });
  5. // 鼠标分开物体边框取消
  6. app.on(THING.EventType.MouseLeave,'.Thing', function(ev) {
  7. ev.object.style.outlineColor = null;
  8. });</span>
复制代码

3、地区 Pick 物体
经过鼠标框选一个数字孪生可视化地区获得地区内的物体,可以参考下面代码按照现实需求停止框选物体的获得。

  1. // 由于框选比力消耗性能,是以预先设备框的“候全集”,只在候全集合框选
  2. var things = app.query('.Thing');
  3. app.picker.areaCandidates = things;

  4. // 启动框选 传入 鼠标按下时起头框选的屏幕坐标
  5. app.picker.startAreaPicking({
  6.     x: x,
  7.     y: y
  8. });
  9. //竣事框选
  10. app.picker.endAreaPicking();
复制代码

4、pickedResultFunc设备拾取工具回调函数
pickedResultFunc设备拾取工具回调函数,可以参考下面的代码按照具体需务实现对应结果。

从零起头进修3D可视化之拾取



代码以下:

  1. //  点窜良入层级挑选设备
  2. // {String} ev.level 当前层级标识列举值 可经过 THING.LevelType 获得列举值,如修建层级标识为 THING.LevelType.Building
  3. // {THING.BaseObject} ev.object 当前层级工具(将要进入的层级工具)
  4. // {THING.BaseObject} ev.current 当前层级工具(将要进入的层级工具)
  5. // {THING.BaseObject} ev.previous 上一层级工具(分开的层级工具)
  6. app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
  7.     app.picker.pickedResultFunc = function (obj) {
  8.         return obj;
  9.     }
  10. }, 'customLevelPickedResultFunc');
  11. // 停息修建层级的默许挑选行为
  12. app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelPickedResultFunc);
复制代码

————————————————

数字孪生可视化:https://www.thingjs.com/



回复

使用道具 举报

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

本版积分规则