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可视头部技术厂商!

相关文章
|
安全 网络协议 数据安全/隐私保护
掌握Qt和C++:构建你的第一个P2P应用程序
掌握Qt和C++:构建你的第一个P2P应用程序
827 3
|
安全 Linux 网络安全
【超详细】Linux系统修改SSH端口教程
在linux中,默认的SSH端口号为22,由于这是咱们都知道的端口号,一旦有入侵者进行端口扫描的时候扫描出22端口,就立马知道这是进行SSH登录的端口号,因而咱们需要修改默认的端口号。
14473 2
【超详细】Linux系统修改SSH端口教程
|
7月前
|
数据采集 人工智能 自然语言处理
小白必看 OpenClaw 2.6.2 高频 Skill 技能使用教程
OpenClaw 2.6.2(小龙虾)重磅升级!推荐15个高实用性Skill技能,覆盖文件整理、办公自动化、浏览器操作、系统管理、内容处理五大场景。小白必开5大核心技能:文件自动分类、Office/WPS自动化、PDF全能处理、网页信息采集、系统状态检测与清理,指令一发,多任务并行完成,办公效率飙升!
|
8月前
|
Web App开发 人工智能
火语言 RPA:模拟真人操作 —— 微博超话签到、发布互动贴与浏览全流程案例
本案例基于火语言RPA,自动化完成微博超话签到、发帖互动及10次滚动浏览,精准模拟真人行为。支持指定Chrome路径与用户配置,智能判断签到弹窗、条件执行操作,并自动关闭浏览器释放资源,有效提升账号活跃度。
566 2
|
8月前
|
人工智能 Ubuntu API
“小龙虾AI”🦞OpenClaw进阶指南!阿里云/本地部署接入百炼Coding Plan免费API+四大场景(信息/运营/金融/办公)实战
2026年,OpenClaw(昵称“小龙虾”)的开源生态已愈发成熟,ClawHub平台收录的技能超5700款,但多数用户仍陷入“安装即闲置”的困境——技能装了一堆,却不知道如何转化为实际生产力。核心问题在于缺乏“场景化落地思维”:OpenClaw的价值不在于“能装多少技能”,而在于“用技能解决什么问题”。
1403 0
|
10月前
|
机器学习/深度学习 人工智能 Cloud Native
在2026这个AI元年中,如何构建于云上的“智能体”生态?
本文展望2026“AI元年”,指出AI将从工具升维为基础设施,核心单元由模型转向具备感知、规划、执行与学习能力的“智能体”。文章提出三大行动:重塑认知(运营智能体而非调用API)、重构技术栈(模型即基础设施,依托云平台)、重思应用(找准生态位)。强调云是智能体生态的操作系统与孵化器。(239字)
604 0
|
JavaScript Shell API
FastAPI是什么?
FastAPI是一个现代、高性能的Python Web框架,专为构建API设计。它利用标准的Python类型提示,支持同步及异步编程,并借助Pydantic实现数据验证。FastAPI以卓越的性能媲美Node.js和Go,代码简洁优雅,能自动生成交互式API文档如Swagger UI和ReDoc,方便测试和调试。其对`async`和`await`的支持使之适用于WebSocket等高并发场景。快速上手仅需安装FastAPI和Uvicorn,编写少量代码即可启动服务并访问自动生成的文档界面。FastAPI不仅易于入门,还支持复杂的功能如依赖注入和后台任务,非常适合追求高性能和快速开发的项目。
1492 2
|
前端开发 UED 开发者
React 数据表格分页实现
本文详细介绍了如何在React中实现数据表格的分页功能,包括基础实现、常见问题及解决方案。通过状态管理和事件处理,我们可以有效地减少页面加载时间,提升用户体验。文章提供了完整的代码示例,帮助开发者解决分页按钮样式、按钮过多和初始加载慢等问题,并给出了相应的优化方案。
611 53
|
人工智能 算法 安全
AI时代:不可替代的“人类+”职业技能
在生成式人工智能快速发展的背景下,关于“人类工作者是否会被算法取代”的焦虑日益增加。本文探讨了AI对职业的重塑作用,指出真正的挑战在于如何通过职业技能培训重新定义人类的不可替代性。文章分析了替代与创造的辩证关系,强调人机协作时代的核心能力,如架构设计力、情感智慧和伦理决策力,并提出职业技能培训应从岗位技能导向转向能力生态构建。最终,通过系统性培训发展“人类+”特质,使AI成为解放人类潜能的工具,而非竞争对手。
|
机器学习/深度学习 PyTorch 算法框架/工具
聊一聊计算机视觉中常用的注意力机制以及Pytorch代码实现
本文介绍了几种常用的计算机视觉注意力机制及其PyTorch实现,包括SENet、CBAM、BAM、ECA-Net、SA-Net、Polarized Self-Attention、Spatial Group-wise Enhance和Coordinate Attention等,每种方法都附有详细的网络结构说明和实验结果分析。通过这些注意力机制的应用,可以有效提升模型在目标检测任务上的性能。此外,作者还提供了实验数据集的基本情况及baseline模型的选择与实验结果,方便读者理解和复现。
1660 0
聊一聊计算机视觉中常用的注意力机制以及Pytorch代码实现