从零开始学习3D可视化之获取对象

从零开始学习3D可视化之模型动画 获取模型动画 播放模型动画 停止播放模型动画 在搭建3D可视化场景的过程中,我发现很多模型都有内置动画,很多模型在制作阶段就内置了动画,如果模型有内置动画,可以在 ThingJS 中利用 API 调用播放这些动画。 比如官方示例中通过 dbclick 事件来控制机柜开启,click 事件来控制鼠标右键关闭机柜。 1、获取模型动画 首先通过animationNames属性获取3D可视化模型都带有有什么动画。 console.log(obj1.animationNames); // 日志窗口.. 阅读详情

一、query()查询物体

二、 其他查询方法

在数字孪生可视化场景中,添加完对象之后,我们如何尽快查找到对象呢?ThingJS中获取对象有如下几个方法:通过父子属性获取对象;通过分类属性获取对象;使用 query 方法获取对象。

一般来说,我们通过 query() 方法来查询物体(即获取对象)。下面我将详细讲解通过 query 方法获取对象的方法。找到物体后,就可以通过 ThingJS API 提供的功能来控制该物体了。

一、query()查询物体

1、 获取园区中的物体

获取 CampusBuilder 数字孪生可视化园区中的物体时,需要将 query() 方法添加到 load 事件的回调函数中。绑定 load 事件来通知园区物体加载完成,然后就可以通过 query() 方法来获取数字孪生可视化园区中的物体了。代码如下所示。

app.on('load', function () {
 var obj = app.query(value),
})

这个方法我们查询到的是一个 Selector集合,即数字孪生可视化园区中带有该属性的所有物体。

应用示例:按属性查询物体

加载场景后,添加按正则name查询按钮,数字孪生可视化园区内对应属性的模型可以被查询到。

// 加载ThingJS示例园区
var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse'
});
// 通过load事件回调函数,添加界面按钮并绑定按钮事件
app.on('load', function () {
 new THING.widget.Button('按name正则查询', queryByRegExp);
});
// 根据正则表达式匹配 name 中包含
从零开始学习3D可视化之控制对象(2) 1、移动到某个目标位置 2、 让物体沿路径移动 3、 批量控制对象 上篇文章中我学习了控制3D可视化场景中对象显示隐藏和旋转缩放,本篇我继续学习控制3D可视化场景中对象位移和批量控制对象。 1、移动到某个目标位置 我阅读文档中心后发现ThingJS提供了moveTo设置一个移动动画,rotateTo 设置一个旋转动画,scaleTo 设置一个缩放动画,用 movePath 可设置让物体沿一条路径移动等方法。旋转和缩放上篇文章已经实现了,下面我用moveTo 实现将3D可视化场景中物体移动到某个目标 阅读详情

相关推荐

从零开始学习3D可视化之坐标系

1、 世界坐标系 2、 父物体坐标系 3、自身坐标系 要想控制一个3D可视化对象的空间位置,首先需要理解空间坐标系。在 ThingJS 开发平台中,使用右手坐标系,横轴为 X 轴和 Z 轴,竖轴为 Y 轴(ThingJS 获取的位置坐标 [x, y, z] 的单位均为米)。描述或控制一个3D可视化物体的位置,在不同情况下,会分别使用以下 3 套坐标系统:1、世界坐标系2、父物体坐标系3、自身坐标系。下面是我对于世界坐标系、父物体坐标系、自身坐标系的学习和自己的一些理解,如果有错误欢迎指正和讨论。

ThingJS的博客 2350

从零开始学习3D可视化之场景层级(1)

1、开启场景层级控制 2、父子树和分类对象属性树 3、切换场景层级 在3D可视化场景中加载园区后系统会自动创建园区、建筑、楼层、房间等物体对象,这些对象也自然把场景分成了不同的层级,场景提供了层级结构,可以通过我下面介绍的方法,来控制场景层级。那么层级结构有什么用呢?可以更方便管理和查询到场景中物体;可以批量操作物体,比如移动父物体可以带着孩子一起移动等等。 1、开启场景层级控制 首先将下面的代码输入到项目文件中,即可开启 ThingJS 3D可视化示例园区的场景层级控制功能。 ..

ThingJS的博客 1946

从零开始学习3D可视化之摄像机

数字孪生可视化场景中的摄像机,与大家拍照时使用相机的功能相似,数字孪生可视化场景中用摄像机来确定观察 3D 场景的视角。摄像机包含两个重要的位置参数:镜头位置 position 和被拍摄物体的位置 target (又叫目标点)。 1、设置摄像机位置 将下面的代码输入到项目文件中,获取当前摄像机 camera 的 position 和 target 属性,就可以得到数字孪生可视化场景中摄像机的位置信息,也可以将其打印在控制台中。 // 加载场景代码 var app = new THING.App({

ThingJS的博客 1838

从零开始学习3D可视化之控制对象(1)

1、 控制显隐 2、 控制旋转 3、 控制缩放 获取数字孪生可视化场景中的对象后,就可以通过对象的属性和方法来控制对象了。在 ThingJS API中,列举了控制对象的属性和方法,下面本篇文章我打算学习控制对象的方法。 1、控制显隐 ThingJS 中通过设置物体的 visible 属性来直接控制数字孪生可视化场景中物体的显示/隐藏。 如果数字孪生可视化场景中对象有相应的父子关系,那么,当隐藏父亲时,他的子子孙孙也会跟随隐藏。比如当隐藏建筑时,建筑的外立面、楼层、楼层里的物体等子孙会同时隐藏。

ThingJS的博客 1579

从零开始学习3D可视化之拾取

1、 通过属性和接口获取鼠标拾取(Pick)的物体 2、 通过事件获取鼠标拾取的物体 3、 区域 Pick 物体 4、 pickedResultFunc设置拾取对象回调函数 在开发数字孪生可视化场景应用时经常会用到拾取功能,顾名思义,在数字孪生可视化场景中拾取就是判断一个数字孪生可视化场景中哪个对象被点击。数字孪生可视化场景中的模型非常多,不可避免需要一些交互效果。比如当点击某一个模型的时候做出反馈动作,这需要能够通过鼠标的点击位置推导出点击到的模型,这种技术实现称为拾取。 在数字孪生可视化场景中

ThingJS的博客 1889

从零开始学习3D可视化之2D界面

在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的,3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面,下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素,创建2D界面时需要将元素插入到 div2d。 创建 UIAnchor UIAnchor可以把 2D html 界面连接到 3D 物体上,跟随 3D 物体移动。需要注意的是删除后,其对应的 panel 也会被删除。 var uiAnchor = app.create({

ThingJS的博客 1994

从零开始学习3D可视化之场景层级(2)

1、 动态创建组合场景 2、 加载后的楼层和建筑对齐 3、 预知未知加载场景的物体结构 对于一些大型的3D可视化场景,使用 CampusBuilder 直接制作会比较困难,直接加载也存在性能、加载时间等问题。 解决这个问题首先在CampusBuilder 中可以分成多个工程进行搭建,比如园区和所有建筑的外立面使用一个独立的工程进行搭建,每栋建筑的室内分别使用其他独立工程进行搭建。但是在搭建过程中需要注意每个工程里的物体命名必须保证唯一。 1、动态创建组合场景 例如,我按如下步骤来搭建3D可视化园

ThingJS的博客 1736

从零开始学习ThingJS之创建App对象

1、 创建App 2、 加载场景 3、 加载地图 在数字孪生可视化行业,搭建模型以及3D场景都是让人头疼的事,但是有一个平台解决了这些难题,它就是ThingJS。作为面向物联网的3D可视化开发平台其特点是:简单易学、提升效率、快速搭建、丰富模型、一键部署,前端工程师也能轻松进行数字孪生可视化项目开发。如果你是一位数字孪生可视化的初学者或正打算入门,你可以阅读本文并在我的代码基础之上继续深入学习。 首先登录ThingJS官方网站,注册账户后点击在线开发就可以开始开发我们的数字孪生可视化可视化项目啦!开

ThingJS的博客 1753

从零开始学习3D可视化之控制对象编程

接下来,我们将创建一个简单的场景,并在场景中放置一个3D对象。通过编写代码来控制对象的行为和交互,可以实现各种有趣的效果和功能。本文将介绍从零开始学习3D可视化中控制对象编程的基本知识,并提供相应的源代码示例。通过上述示例代码,我们可以看到如何使用Python编程来控制3D可视化中的对象。通过修改对象的属性和添加交互功能,我们可以实现各种有趣的效果和交互体验。接下来,我们需要连接到Unity的场景,并获取我们在场景中放置的对象。例如,我们可以为对象添加点击事件,当用户点击对象时触发特定的操作。

2301_79326588的博客 124

医学图像中的小目标病灶检测难题:我的硕士研究总结与思考

医学图像中的小目标检测和分割,主要指在CT、MRI、超声等医学影像中识别和分割微小病灶或细小结构。这些小目标通常体积小、边界模糊、特征不明显,却往往是关键病灶,例如肺部小结节、脑微出血、乳腺微钙化等。

weixin_45638136的博客 2370

RK3588部署rtmpose模型

摘要: 本文详细介绍了在RK3588开发板上部署RTMPose模型的全流程。首先在Ubuntu环境中搭建MMCV框架,通过MMPose工具将PTH模型转换为ONNX格式。随后使用RKNN-Toolkit2将ONNX模型转换为RKNN格式,并完成开发板部署。关键步骤包括模型转换(PTH→ONNX→RKNN)、环境配置和推理验证,最终实现人体姿态估计功能。整个过程涉及MMPose、RKNN-Toolkit等工具链的使用,为边缘计算场景下的实时姿态分析提供了可行方案。

qq_44224801的博客 1221

关于 MCU 芯片外围电路的快速入门介绍

MCU 外围电路的核心是“围绕 MCU 需求,搭建稳定、匹配的外部支撑”,入门阶段无需掌握复杂设计,只需先吃透供电、复位、时钟、IO 驱动、基础通信这五大模块,再逐步扩展存储、显示、传感器等进阶功能。实践中多调试、多参考成熟方案,是快速掌握外围电路设计的关键。码字不易,若觉得本文对你有用,欢迎,相关技术热点时时看🔥🔥🔥​​​…

JiaWen的博客 1650

vue3的面试题

vue3的面试题

jiang7701037的博客 6271

【RKNN】RKNN-Toolkit2 Python API函数详解

RKNN-Toolkit2 的 API 设计以开发者效率为核心,覆盖模型转换、量化、部署全流程。通过灵活的参数配置(如多核调度、混合量化)和调试工具(性能分析、精度对比),可快速适配复杂边缘场景。

浩瀚之水的专栏 787

Altium Designer应用技巧13: 四层板的拼版方法

本文介绍在Altium Designer中,进行4层板的拼版方法。Altium Designer有多种拼版方法,本文选择最直观的复制、删帖方法来完成,步骤如下: 1、看一下原始文件,如下图所示,我们要对该板进行拼版操作。 2、通过菜单“报告”-“板子信息”得到板子大小,在这里一般切换为mm比较好操作,我们可以使用快捷键"q"。 3、如果是水平拼版,我们需要关心水平长度;如果是垂直拼版...

snmplink的博客 1万+

IEEE S&P 2026 大模型安全论文整理

本文梳理了 IEEE S&P 2026(第47届 IEEE 安全与隐私研讨会)中与 LLM Safety 相关的论文,涵盖大模型越狱攻击、防御与对齐、隐私保护、RAG 安全、多模态大模型安全、智能体安全、图-LLM 安全、工具链安全及生成式 AI 安全与隐私等方向。

CSPhD-winston的博客 1340

基于MATLAB的拉盖尔-高斯光束叠加相位模拟

首先,我们需要设置模拟所需的参数,如光腰半径、传播距离、光束的角动量等。其中,(U)表示光束的电场复振幅,(r)和(\phi)分别是极坐标系下的径向和角向坐标,(z)是传播距离,(A)是归一化系数,(w_p)是光束的光腰半径,(L_p^q)是拉盖尔多项式,(k)是波数,(l)是光束的角动量。通过修改模拟参数,如光腰半径、传播距离、角动量等,您可以进一步探索和理解拉盖尔-高斯光束的叠加相位效应。拉盖尔-高斯光束是一种特殊的光束模式,具有广泛的应用领域,包括光学信息处理、激光加工和量子光学等。

m0_47037246的博客 945

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

上一篇: 从零开始学习ThingJS之创建/销毁物体
下一篇: 从零开始学习3D可视化之控制对象(1)
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值