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

相关文章
|
JavaScript 前端开发
React craco 解决 webpack < 5 used to include polyfills for node.js core ...
React craco 解决 webpack < 5 used to include polyfills for node.js core ...
1156 0
|
安全 网络协议 数据安全/隐私保护
掌握Qt和C++:构建你的第一个P2P应用程序
掌握Qt和C++:构建你的第一个P2P应用程序
718 3
|
5月前
|
机器学习/深度学习 人工智能 Cloud Native
在2026这个AI元年中,如何构建于云上的“智能体”生态?
本文展望2026“AI元年”,指出AI将从工具升维为基础设施,核心单元由模型转向具备感知、规划、执行与学习能力的“智能体”。文章提出三大行动:重塑认知(运营智能体而非调用API)、重构技术栈(模型即基础设施,依托云平台)、重思应用(找准生态位)。强调云是智能体生态的操作系统与孵化器。(239字)
379 0
|
前端开发 UED 开发者
React 数据表格分页实现
本文详细介绍了如何在React中实现数据表格的分页功能,包括基础实现、常见问题及解决方案。通过状态管理和事件处理,我们可以有效地减少页面加载时间,提升用户体验。文章提供了完整的代码示例,帮助开发者解决分页按钮样式、按钮过多和初始加载慢等问题,并给出了相应的优化方案。
517 53
|
人工智能 算法 安全
AI时代:不可替代的“人类+”职业技能
在生成式人工智能快速发展的背景下,关于“人类工作者是否会被算法取代”的焦虑日益增加。本文探讨了AI对职业的重塑作用,指出真正的挑战在于如何通过职业技能培训重新定义人类的不可替代性。文章分析了替代与创造的辩证关系,强调人机协作时代的核心能力,如架构设计力、情感智慧和伦理决策力,并提出职业技能培训应从岗位技能导向转向能力生态构建。最终,通过系统性培训发展“人类+”特质,使AI成为解放人类潜能的工具,而非竞争对手。
|
机器学习/深度学习 PyTorch 算法框架/工具
聊一聊计算机视觉中常用的注意力机制以及Pytorch代码实现
本文介绍了几种常用的计算机视觉注意力机制及其PyTorch实现,包括SENet、CBAM、BAM、ECA-Net、SA-Net、Polarized Self-Attention、Spatial Group-wise Enhance和Coordinate Attention等,每种方法都附有详细的网络结构说明和实验结果分析。通过这些注意力机制的应用,可以有效提升模型在目标检测任务上的性能。此外,作者还提供了实验数据集的基本情况及baseline模型的选择与实验结果,方便读者理解和复现。
1465 0
聊一聊计算机视觉中常用的注意力机制以及Pytorch代码实现
|
JavaScript
js的鼠标移入移出事件
js的鼠标移入移出事件
|
机器学习/深度学习 人工智能 算法
【AI系统】AI的历史、现状与理论基础
人工智能(AI)作为一门跨学科的研究领域,其目标是模拟、延伸和扩展人的智能。本文旨在概述AI的历史发展、当前趋势以及理论基础,为读者提供一个系统的视角。
538 0
AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axio
AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axio
|
存储 关系型数据库 MySQL
架构面试题汇总:40道题吃透mysql(2024版)
架构面试题汇总:40道题吃透mysql(2024版)