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

从零起头进修3D可视化之物体挑选

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-6-23 16:14:29 | 显示全部楼层 |阅读模式
本帖最初由 thisisYXY 于 2021-6-23 16:15 编辑

1、挑选物体

2、经过属性和方式,侦测挑全集变化

3、经过事务侦测挑全集变化

搭建好数字孪生可视化场景后,应当若何停止交互?这其中最关键的就是若何实现物体的挑选。比如鼠标点击后判定能否选中了某个模子或模子的某个部分。在数字孪生可视化场景中鼠标悬停到物体上,并不代表已经挑选了这个物体,需要点击后才暗示挑选了它。

1、挑选物体
挑选数字孪生可视化场景中的物体,可以经过 Selection 模块实现,经过 app.selection 的接口实现该功用。挑全集是被封装到笼统Selection中的DOM元素的有序调集。一般来说,经过对全局数字孪生可视化工具挪用挑全集方式从而获得最初的挑全集实例。然后,你便可以在Selection实例上挪用自带的方式来建立它的子集了。

见下例:

  1. //将物体加入到挑全集合
  2. app.selection.select(obj);
  3. // 判定工具能否在挑全集合
  4. app.selection.has(obj);
  5. //将物体从挑全集合删除
  6. app.selection.deselect(obj);
  7. //清空挑全集
  8. app.selection.clear();
复制代码


2、经过属性和方式,侦测挑全集变化
经过平台供给的属性和方式,可以侦测挑全集变化。Selection 经过供给 isChanged 方式获得挑全集变化,经过 objects 和 previousObjects 获得当前挑全集和变化之前的挑全集。

  1. if(app.selection.isChanged()) {
  2. //获得当前哪些物体被挑选
  3. console.log(app.selection.objects);
  4. //当isChanged时,之前都有那些物体被挑选
  5. console.log(app.selection.previousObjects);
  6. }
复制代码


3、经过事务侦测挑全集变化
也可以经过事务侦测挑全集变化,利用 Select 和 Deselect 事务切确控制数字孪生可视化物体针对挑选的响应,以下例:

  1. app.on(THING.EventType.Select, '.Thing', function (ev) {
  2. // 挑全集合的物体色彩停止改变
  3. ev.object.style.color = "#ff0000";
  4. });
  5. app.on(THING.EventType.Deselect, '.Thing', function (ev) {
  6. // 物体从挑全集合删除时,断根色彩
  7. ev.object.style.color = null;
  8. });
复制代码


还可以经过 SelectionChange 事务告诉数字孪生可视化物体挑选调集更新。

  1. app.on(THING.EventType.SelectionChange, function (ev) {
  2. console.log(ev.previousObjects+" "+ev.objects);
  3. });
复制代码


我的实现计划是色彩区分法:鼠标按下时物体重绘为红色将选中的物体色彩停止改变;取消物体选中时色彩取消改变。

从零起头进修3D可视化之物体挑选



具体代码以下:

  1. var app = new THING.App({
  2. url: 'https://www.thingjs.com/static/models/storehouse'
  3. });

  4. app.on('load', function () {
  5. // 从场景当挑选一个物体
  6. var obj = app.query('car01')[0];
  7. THING.widget.Button('选中指定物体', function () {
  8. // 选中物体
  9. app.selection.select(obj);

  10. });
  11. THING.widget.Button('取消选中物体', function () {
  12. // 取消选中的物体
  13. app.selection.deselect(obj);

  14. });
  15. });
  16. app.on(THING.EventType.Select, '.Thing', function (ev) {
  17. // 将选中的物体色彩停止改变
  18. ev.object.style.color = "#ff0000";
  19. });
  20. app.on(THING.EventType.Deselect, '.Thing', function (ev) {
  21. // 取消物体选中时,色彩取消改变
  22. ev.object.style.color = null;
  23. });
复制代码


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

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



回复

使用道具 举报

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

本版积分规则