ThingJS有4种技术实现对象拾取方式

简介: 对象的拾取,这是3D技术的一个专业术语。

对象的拾取,这是3D技术的一个专业术语。也就是在二维屏幕当中选择三维对象。ThingJS有4种技术实现方式。
1.jpg

物联网应用中 3D 场景中的模型会越来越多,这时我们不可避免需要一些交互效果,比如当点击某一个模型的时候做出反馈动作,这需要我们能够通过鼠标的点击位置推导出点击到的模型,这种技术实现称为 3D 拾取。

Picker(选择器/拾取器/选取器)是指提供多个选项集合供用户选择其中一项的控件,在T
hingJS在线开发平台,Picker是thingjs中为拾取制作的一个类,主要是用于拾取物体,同时也有框选拾取的功能。

在3D场景中会建立某些对应真实物品的对象,模型内置了简单动画,通过很多事件设置,比如点击鼠标、键盘输入、层级变化等,让用户监听这些事件,在事件回调中进行相应的业务逻辑处理。

在三维场景模型比较多的时候,我们需要考虑如何高效的实现选取操作。官方支持不同的拾取技术实现:

  1. 通过属性和接口获取鼠标拾取(Pick)的物体
  2. 通过事件获取鼠标拾取的物体
  3. 区域 Pick 物体
  4. pickedResultFunc设置拾取对象回调函数
    2.jpg

官方示例新鲜出炉,可以用代码块修改进入层级选择设置。
回调函数就是一个通过函数指针调用的函数,可通过 pickedResultFunc 设置拾取对象回调函数,示例如下:

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址
});
app.on('load', function (ev) {
    app.level.change(ev.campus);
})
//  修改进入层级选择设置
// {String} ev.level 当前层级标识枚举值 可通过 THING.LevelType 获取枚举值,如建筑层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 当前层级对象(将要进入的层级对象)
// {THING.BaseObject} ev.current 当前层级对象(将要进入的层级对象)
// {THING.BaseObject} ev.previous 上一层级对象(离开的层级对象)
app.on(THING.EventType.EnterLevel, '.Campus', function (ev) {
    app.picker.pickedResultFunc = function (obj) {
        if (obj instanceof THING.Thing) {
            return obj;
        }
        return null;
    }
}, 'customLevelPickedResultFunc');
// 暂停园区层级的默认选择行为
app.pauseEvent(THING.EventType.EnterLevel, '.Campus', THING.EventTag.LevelPickedResultFunc);

app.on('click', function (ev) { console.log(ev.object.name) })

app.on(THING.EventType.EnterLevel, '.Campus', function () {
    var build = app.buildings[0];
    build.floors.visible = true;
    build.floors[0].things.inheritStyle = false;
    build.style.opacity = 0.2;
    build.pickable = false;
    build.floors.forEach(function (floor) {
        floor.pickable = false;
    })
    build.floors[0].things.forEach(function (thing) {
        thing.pickable = true;
    })
})

ThingJS,国内的3D可视头部技术厂商!

相关文章
|
2天前
|
数据可视化 搜索推荐 定位技术
三维地图万能子组件玩法全流程!拓展业务表达边界(附免费试用)
为了满足用户日益增长的个性化和定制化需求,我们推出了地图✖️万能子组件,支持自定义拼接地图组件内容,包括图表、标题等,打造超级信息面板。该组件可灵活展示地理信息业务数据,丰富可视化形式。此外,提供7天高级版免费试用、个人免费版永久使用等福利,并附有详细教程视频,帮助用户轻松配置和优化组件效果。
|
16天前
|
数据可视化 决策智能
你的文档还是静态的吗?实时协作改变游戏规则!
在高效协作成为工作刚需的今天,协作文档已成为团队核心需求。本文从团队需求出发,深入分析了实时协作的重要性、关键特性和解决方案,探讨了文档、任务和数据联动的新趋势,强调了选择合适工具对提升团队效率的关键作用。
|
6月前
|
图形学
【unity小技巧】手戳代码程序化绘制地形Terrain树和预制体物品、动物
【unity小技巧】手戳代码程序化绘制地形Terrain树和预制体物品、动物
72 0
|
6月前
|
Linux iOS开发 MacOS
【随手记】maplotlib.use函数设置图像的呈现方式
【随手记】maplotlib.use函数设置图像的呈现方式
68 0
|
7月前
|
算法 图形学 UED
Unity Hololens2开发|(八)MRTK3空间操作 BoundsControl(边界控制)
Unity Hololens2开发|(八)MRTK3空间操作 BoundsControl(边界控制)
|
数据可视化 物联网
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
984 15
好客租房140-长列表性能优化(可视区域渲染)
好客租房140-长列表性能优化(可视区域渲染)
103 0
好客租房140-长列表性能优化(可视区域渲染)
好客租房146-渲染(展示索引下每一行的高度)
好客租房146-渲染(展示索引下每一行的高度)
110 0
好客租房146-渲染(展示索引下每一行的高度)
|
前端开发
好客租房51-通讯的三种方式(子组件传递给父组件)
好客租房51-通讯的三种方式(子组件传递给父组件)
123 0
好客租房51-通讯的三种方式(子组件传递给父组件)
|
vr&ar 图形学
【Unity3D 灵巧小知识点】 ☀️ | 层级面板中的 ‘小手指‘ 作用: 在Scen中将该物体设置为不可选中状态
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。
【Unity3D 灵巧小知识点】 ☀️ | 层级面板中的 ‘小手指‘ 作用: 在Scen中将该物体设置为不可选中状态