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

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

1、移动到某个目标位置

2、 让物体沿路径移动

3、 批量控制对象

上篇文章中我学习了控制3D可视化场景中对象显示隐藏和旋转缩放,本篇我继续学习控制3D可视化场景中对象位移和批量控制对象。

1、移动到某个目标位置

我阅读文档中心后发现ThingJS提供了moveTo设置一个移动动画,rotateTo 设置一个旋转动画,scaleTo 设置一个缩放动画,用 movePath 可设置让物体沿一条路径移动等方法。旋转和缩放上篇文章已经实现了,下面我用moveTo 实现将3D可视化场景中物体移动到某个目标位置。

两辆叉车我设置了两个目标位置,一个是世界坐标系一个是自身坐标下的位置。

完整代码如下:

var app = new THING.App({
 url: "models/storehouse"
})
 
// 加载场景后执行
app.on('load', function () {
 var car01 = app.query('car01')[0];
 var car02 = app.query('car02')[0];
 // 移动到 世界坐标系下某位置
 new THING.widget.Button('世界坐标系下位置', function () {
        car01.moveTo({
            position: [0, 0, 0], // 移动到世界位置
            time: 2 * 1000,
            orientToPath: true,
 // lerpType:null, // 插值类型 默认为线性插值
            complete: function (ev) {
                console.
webgl可视化平台ThingJS之查询并且控制物体移动 ThingJS中如何查询并控制3D场景中的物体? 使用query方法就可以查询到3D场景中的物体,并且对该物体进行控制,比如控制物体沿某一路径移动等等。但是,最好是在场景创建的时候就为每一个物体添加诸如id、name等属性,方便在ThingJS中查询到该物体,并且对该物体进行控制。 具体使用方法如下: // 查询 id 为 001 的对象集合 app.query('#001'); // 查询名称为... 阅读详情

相关推荐

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

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

ThingJS的博客 1579

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

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

ThingJS的博客 2350

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

一、query()查询物体 二、 其他查询方法 在数字孪生可视化场景中,添加完对象之后,我们如何尽快查找到对象呢?ThingJS中获取对象有如下几个方法:通过父子属性获取对象;通过分类属性获取对象;使用 query 方法获取对象。 一般来说,我们通过 query() 方法来查询物体(即获取对象)。下面我将详细讲解通过 query 方法获取对象的方法。找到物体后,就可以通过 ThingJS API 提供的功能来控制该物体了。 一、query()查询物体 1、 获取园区中的物体 获取 CampusB

ThingJS的博客 1584

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

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

ThingJS的博客 1839

制作简单的ROSWEB (2) -使用rosjs 进行栅格地图web端3d可视化

制作简单的ROSWEB (2) -使用rosjs 进行栅格地图web端3d可视化 参考博客: 利用Websocket实现ROS与Web的交互 前言: 本次实现的功能主要是,在web浏览器端调用rosjslib实现控制机器人移动、和获取地图显示。因为个人不懂javascript,所以做的比较简陋,主要还是做代码拼接。两部分代码分别为: 一.3d栅格地图可视化 二.web端发布话题,实现按键控制车体前进后退 代码出处: 3d栅格地图可视化 web端发布话题,实现按键控制车体前进后退 环境说明 这里说明一下: 主

weixin_41281151的博客 1万+

从零开始学习3D可视化之模型动画

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

ThingJS的博客 1909

从零开始学习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可视化之控制对象编程

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

2301_79326588的博客 124

GPOPSII 对控制量变化率进行约束,避免控制量振荡

在这篇文章中,在GPOPSII中通过对控制量变化的约束,优化求解得到更平滑的控制量曲线,更符合真实控制约束。

Dannyfomer的博客 1871

1.用Python写了一个进销存管理的软件~需求分析&界面设计&数据库设计&技术路线选择~

前端也打算用Python来写,查了很多的python库,大家比较推荐的是wxpython和QPython,之前接触过一点点的QT,确实非常强大,但是库比较重量级,自己写的这个东西明显配不上QT,又详细调研了一下wxpython,就是它了!

pepper_lihui的专栏 4323

手把手教你用6轴IMU跑通LIO-SAM:参数配置与代码修改保姆级教程

本文提供了一套完整的6轴IMU适配LIO-SAM的解决方案,包括参数配置与代码修改的详细步骤。从理解6轴与9轴IMU的关键差异入手,逐步指导如何调整核心配置文件params.yaml、重构utility.h关键函数、优化mapOptimization.cpp的位姿融合逻辑,并给出编译验证与性能调优建议,帮助开发者快速实现6轴IMU在LIO-SAM中的稳定运行。

weixin_28717807的博客 357

力扣(Leetcode)第1题:两数之和(C语言版本)

题目: 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出和为目标值 target 的那两个整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回答案。 示例 1: 输入:nums = [2,7,11,15], target = 9 输出:[0,1] 解释:因为 nums[0] + nums[1] == 9 ,返回 [0, 1] 。 示例 2: 输入:nums = [3,2,4], target = 6

qq_39855356的博客 3326

PADS安装教程(超详细)

声明:个人实践 一、工具准备 pads9.5完整破解版百度网盘提取码【wjx9】 链接:https://pan.baidu.com/s/1pIP6BJO435ssmF7Hjwyz8A 提取码:wjx9 安装环境:win10 64位 二、开始解压安装 关闭杀毒,exe以管理员身份运行 点击【skip】,不然又得licese 点击【agree】 点击【modify】 设置安装的工具、路径及工程路径 设置完成后,开始【install】 在之后注册。 将Crack复制到PADS安装目录

qq_42057393的博客 5万+

rv1126如何切换720p和1080p

切换720p和1080p可以使用modetest,但是需要将这两种模式都添加到connector中去 添加一个新的mode到connector中去,其实内核中已经有相关接口了,需要做一些小改动。 1.不采用设备树的方式去配置,将720p和1080p的timing参数配置放在数组中。 2.这里的printer和设备树中的.compatible = "printer"一致。 3.将其添加到connector中去 static int panel_simple_get_fixed_modes(struct

weixin_42097108的博客 865

PCL点云DBSCAN聚类算法:基于密度的点云聚类

核心点是在给定半径内拥有足够多邻居点的点,边界点是在给定半径内没有足够多邻居点但是位于核心点的邻域内的点,噪声点是既不是核心点也不是边界点的点。本文将介绍PCL中的DBSCAN(基于密度的空间聚类应用噪声)算法,用于点云数据的聚类。上述示例代码首先从PCD文件中读取点云数据,并设置了DBSCAN聚类的参数,包括邻域搜索半径(epsilon)和邻域内最小点数(min_points)。需要注意的是,示例代码中的点云数据格式为pcl::PointXYZ,如果使用其他类型的点云数据,需要相应地修改代码。

LpmShell的博客 1242

第4章-07-将WebDriver获取的Cookie传递给Requests

在使用Selenium WebDriver获取了浏览器的Cookies之后,你可以将这些Cookies传递给requests库,以便在后续的HTTP请求中使用这些Cookies。这样做可以让你模拟浏览器会话,使得请求看起来像是从之前使用Selenium WebDriver控制的浏览器发出的。

黑夜开发者的博客 693

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

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

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

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值