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

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

1、 控制显隐

2、 控制旋转

3、 控制缩放

获取数字孪生可视化场景中的对象后,就可以通过对象的属性和方法来控制对象了。在 ThingJS API中,列举了控制对象的属性和方法,下面本篇文章我打算学习控制对象的方法。

1、控制显隐

ThingJS 中通过设置物体的 visible 属性来直接控制数字孪生可视化场景中物体的显示/隐藏。

如果数字孪生可视化场景中对象有相应的父子关系,那么,当隐藏父亲时,他的子子孙孙也会跟随隐藏。比如当隐藏建筑时,建筑的外立面、楼层、楼层里的物体等子孙会同时隐藏。

加载ThingJS示例园区后,我打算将数字孪生可视化园区内的小车进行显隐控制,点击按钮,可以显示或隐藏小车。

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});

app.on('load', function () {
    var car1 = app.query('car01')[0];

    // 创建Box 父物体为小车
    var box = app.create({
        type: 'Box',
        center: 'Bottom', // 中心点
        localPosition: [0, 0.2, 1], // 设置 Box 相对于父物体的位置
        parent: car1 // 指定父物体
    });

    var visible = true;

    new THING.widget.Button('显隐小车', function () {
        // 显示隐藏小车
        car1.visible = !car1.visible;
    });
});

运行项目后,可以通过按钮控制小车的显示或者隐藏。

ThingJSAPI之控制楼层效果 如何控制楼层的层级效果?比如进入楼层展开楼层?三维可视化园区中该怎么去访问对象?又是如何让场景显示和隐藏的呢?在ThingJS物联网可视化PaaS平台中,ThingJS提供了控制场景的方法,让我们来看看它是如何控制的吧! ThingJS官方示例中按分类访问对象,使用全局APP对象,通过forEach函数遍历园区中所有对象,并且打印出对象的id属性。 /** * 说明:通过 “分类对象属性树” 访问... 阅读详情

相关推荐

3D仿真教程:ThingJS全套环境搭建方案

在现实世界中,所有物体都不是独立存在的,周围都存在相应环境,常见的环境元素有雨、电、风、光束等,都是3D仿真的主要对象。ThingJS提供了全套环境搭建方案。 如何控制环境与效果?ThingJS 提供4种方式来控制天空和背景:  如何设置背景颜色  如何设置灯光效果  如何设置粒子效果  如何进行幕后处理 (一)设置背景颜色 • 使用 app.background 属性设置背景颜色; app.background = 0xff8844; 取消背景颜色可直接设置: app.background = n

ThingJS的博客 3057

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

1、移动到某个目标位置 2、 让物体沿路径移动 3、 批量控制对象 上篇文章中我学习了控制3D可视化场景中对象显示隐藏和旋转缩放,本篇我继续学习控制3D可视化场景中对象位移和批量控制对象。 1、移动到某个目标位置 我阅读文档中心后发现ThingJS提供了moveTo设置一个移动动画,rotateTo 设置一个旋转动画,scaleTo 设置一个缩放动画,用 movePath 可设置让物体沿一条路径移动等方法。旋转和缩放上篇文章已经实现了,下面我用moveTo 实现将3D可视化场景中物体移动到某个目标

ThingJS的博客 1665

ThingJS 和three.js对比开发太空漫游技术!3D 可视化

ThingJS 3D用来增加视觉效果,给人以更加直观,真实的感觉。 ThingJS 3D框架简化了开发工作,面向对象和模块化的特点使得网页代码更加易于管理和维护,并且提供近200个官方示例,直接获取API能力,不需要基于3D概念进行开发,适合3D商业项目快速生成!距离您的业务仅一层之隔,是非开发者也容易理解的一种应用方法。 Three.js是更为底层的3D渲染器,提供各式各样的3D开发概念,例如材质、网格、shader、灯光,逐一进行定制化开发,要求程序员要有清晰的设计思路,尤其是在3D对象类的定义上。

ThingJS的博客 3448

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

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

ThingJS的博客 1946

从零开始学习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

从零开始学习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

Unity 2D与3D可视化效果开发指南

htmltable {th, td {th {pre {简介:在Unity游戏引擎中实现2D和3D可视化效果是创造吸引人的游戏体验的关键。本项目利用C# API和其他.NET框架技术,详细展示了如何控制2D和3D对象的可见性,包括在代码中动态改变对象的显示状态。通过这个项目,开发者可以学习到在Unity中管理2D和3D对象可见性的技巧,以及如何使用.NET框架实现复杂的交互逻辑,优化游戏性能,实现动态内容的隐藏与显示。

weixin_29840475的博客 1191

基于ThingsBoard+ESP8266的MQTT远程控制实战:从设备接入到仪表盘交互

本文详细介绍了基于开源物联网平台ThingsBoard与ESP8266开发板,通过MQTT协议实现远程控制的完整实战流程。从环境搭建、设备创建、仪表盘设计到核心代码编写与联调,手把手指导完成从云端到硬端的物联网闭环,为智能家居与物联网原型开发提供低成本、高效率的解决方案。

weixin_29192365的博客 334

攻克+86手机号Discord验证墙:从“无效”到“成功”的实战指南

本文提供了一份针对+86手机号在Discord注册时频繁遭遇“手机号无效”问题的实战解决指南。文章系统分析了问题根源,并分步详解了从打造纯净网络环境、尝试多种手机号格式(如+86前加0),到更换iOS等客户端设备的有效方法,旨在帮助用户成功完成Discord手机号验证。

mac99的博客 1132

MATLAB PDE工具箱电磁场仿真平行电容板及电偶极子详解

首先打开matlab,在命令行输入pdetool打开PDE工具箱 工具箱的功能我就不赘述了,大概就是以有限元的数值计算方法,计算二阶偏微分方程,因此可以解决电磁场、热力学等问题。 首先点击左上角按钮,画三个矩形 画完一个后可以双击矩形编辑,参数如下: 其中R1表示上极板,R2表示下极板,R3表示整个空间区域。 在上方Set formula为R3-R2-R1,表示求解区域是整个空间区域减去两个极板。下拉框选择Electrostatics表示求解的是静电场问题。 接下来点击上方菜单栏中的这个按钮,表

weixin_42845306的博客 1万+

告别VMware Tools!用open-vm-tools在Ubuntu 22.04上搞定共享文件夹(附开机自动挂载)

本文详细介绍了在Ubuntu 22.04上使用open-vm-tools替代VMware Tools实现高效共享文件夹管理的方法。通过开源工具open-vm-tools,用户可避免传统方案的兼容性问题,享受自动适配内核、系统更新同步等优势。文章包含从安装配置到开机自动挂载的全流程指导,特别适合在VMware虚拟机中运行Ubuntu Desktop的开发者提升工作效率。

weixin_32520095的博客 585

3.5.3以太网ETH TC8-PMA物理层测试

英文原版-OA_Automotive_Ethernet_ECU_TestSpecification_Layer_1_100BASE-T1_v3.0.pdf。PMA测试时各个测试项目所进入的测试模式不同,如TX_01对应测试模式1;TX_04对应测试模式5;例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。TX_07对应测试模式5;物理层测试主要分为两部分:IOP测试(包括链接时间,信号质量,线路诊断),PMA测试。

qq_28664971的博客 7698

C/C++小宇宙代码(完整代码)

C语言实现小宇宙的完整代码。

AIGC 2526

Python爬虫实战:深度解析携程/飞猪酒店评论API与大数据采集

本文详细介绍了如何通过Python爬虫技术获取携程和飞猪平台的酒店评论数据。我们涵盖了从API分析、反爬虫对策到数据存储和处理的完整流程。API逆向分析:通过浏览器开发者工具发现和分析API接口反爬虫对策:使用请求头随机化、IP代理、浏览器自动化等技术异步处理:使用asyncio提高爬取效率数据质量:实现数据清洗和质量检查机制系统架构:构建可扩展的分布式爬虫系统未来改进方向:机器学习识别验证码分布式爬虫架构实时数据流处理更智能的反反爬虫策略。

2201_76125261的博客 602

基于YOLO26/11/v8算法的Web目标检测系统,人脸表情识别系统,Django+Vue3 的前后端分离,实现摄像头实时识别,YOLO26/YOLO11/v8 + LLM大模型智能分析,科研必备

在人工智能迈向通用化(AGI)的今天,“视觉感知 + 语言理解”的多模态联合是未来的趋势。单纯的检测画框已经无法满足复杂的业务需求,如何让系统“看懂”画面并进行“思考”,是当前视觉项目的重点。我们知道目标检测是计算机视觉中的重要任务,广泛应用于安防监控、自动驾驶、智能家居等领域。因此本项目将 YOLO 目标检测模型(兼容 YOLO26/v11/v8 系列)与 DeepSeek 等顶流大语言模型(LLM) 进行联合,使用 Django (后端) + Vue3 (前端) 技术栈

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 2845

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

android 蓝牙通讯demo

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

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值