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月前
|
开发者 图形学 Java
Unity物理引擎深度揭秘:从刚体碰撞到软体模拟,全面解析实现复杂物理交互的技巧与秘诀,助你打造超真实游戏体验
【8月更文挑战第31天】物理模拟在游戏开发中至关重要,可让虚拟世界更真实。Unity作为强大的跨平台游戏引擎,内置物理系统,支持从刚体碰撞到布料模拟的多种功能。通过添加Rigidbody组件,可实现物体受力和碰撞;使用AddForce()施加力;通过关节(如Fixed Joint)连接刚体以模拟复杂结构。Unity还支持软体物理,如布料和绳索模拟,进一步增强场景丰富度。掌握这些技术,可大幅提升游戏的真实感和玩家体验。
68 0
|
2月前
|
图形学
小功能⭐️Unity 如何判断物体是否在摄像机视野内或外
小功能⭐️Unity 如何判断物体是否在摄像机视野内或外
|
4月前
经验大分享:QML动态标注线
经验大分享:QML动态标注线
23 0
|
数据可视化 物联网
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
912 0
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
|
数据采集 运维 NoSQL
数据地图?地图数据?傻傻分不清楚!
数据地图?地图数据?傻傻分不清楚!
An动画基础之按钮动画与基础代码相结合
An动画基础之按钮动画与基础代码相结合
739 0
An动画基础之按钮动画与基础代码相结合
|
数据可视化 物联网
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
869 0
Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
|
移动开发 数据可视化 前端开发
基于自然流布局的可视化拖拽搭建平台设计方案
LowCode 是高效、高性能的拖拽式低代码开发平台. 也是笔者最近一直在研究的方向, 对于可视化搭建平台的实现方案笔者之前写过很多文章, 这里带大家探索一个新方向——基于自然流布局的可视化搭建平台.
917 0
|
算法 前端开发 Java
地图建筑群的光影效果原理和应用实践
高德开放平台在2020年初推出了AMap JSAPI 2.0版本,现在版本已经稳定下来。在JSAPI 2.0版本中我们采用了新的渲染管线,在每个渲染流程中都针对性的进行了性能优化。
383 0
地图建筑群的光影效果原理和应用实践
|
移动开发 前端开发 数据可视化
ThingJS是如何编辑3D空间物体的?
人所在的三维空间很复杂,情景也会随着人与任意对象之间的任务而发生变化
ThingJS是如何编辑3D空间物体的?