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

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

1、 创建App

2、 加载场景

3、 加载地图

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

首先登录ThingJS官方网站,注册账户后点击在线开发就可以开始开发我们的数字孪生可视化可视化项目啦!开始的第一个步骤是创建App,下面我就通过创建App开始学习ThingJS。

1、 创建App

App 对象是 ThingJS 库的功能入口,用于 3D 场景初始化。

下面通过创建 App 对象,对 3D 场景进行初始化,此时,App 对象为空。

var app = new THING.App();
 

并通过添加属性名称和属性值,来设置 App 对象属性。

var app = new THING.App({ name: value, });

name 为 App 对象属性的名称。value 为 App 对象属性的值。

2、 加载场景

数字孪生可视化场景可以在CampusBuilder(又称模模搭)或者CityBuilder中创建,园区保存后会自动同步到ThingJS同一账号下。

将下面的代码输入到项目文件中,即可加载ThingJS示例园区。

var app = new THING.App({ url: "models/storehouse/", });

运行项目后,在预览窗口中,可以展示出 ThingJS示例园区,如下图所示。

ThingJS1.0API学习使用总结 文章声明,此文章为本人方便查找使用,学习积累ThingJSAPI的个人总结,原创API请查看ThingJS官网http://www.thingjs.com!! 阅读详情

相关推荐

从零开始学习ThingJS之创建/销毁物体

1、 加载模型 2、 添加多个数字孪生可视化园区 3、 销毁物体 在数字孪生可视化场景初始化后,我们就可以在3D场景内添加物体对象了,可以通过 create() 方法来创建物体,例如,加载模型、添加标记、创建基本形体、添加多个园区等。通过 destroy() 方法,可以销毁物体,即在场景中删除物体。 通过 create() 方法创建物体,并通过对象名称和属性,来添加所创建的物体属性。 var obj = app.create({ name: value, }) 通过 dest..

ThingJS的博客 2150

ThingJS有4种方法来完成对象拾取

拾取,所谓拾取就是判断一个三维场景中哪个对象被点击。ThingJS有4种方法来完成对象拾取。 物联网应用中 3D 场景中的模型会越来越多,这时我们不可避免需要一些交互效果,比如当点击某一个模型的时候做出反馈动作,这需要我们能够通过鼠标的点击位置推导出点击到的模型,这种技术实现称为 3D 拾取。 Picker(选择器/拾取器/选取器)是指提供多个选项集合供用户选择其中一项的控件,在T hingJS在线开发平台,Picker是thingjs中为拾取制作的一个类,主要是用于拾取物体,同时也有框选拾取的功能。 在3

ThingJS的博客 714

ThingJS不起眼功能介绍

ThingJS不起眼功能介绍 在ThingJS中有许多的官方示例,这个是很直白也很容易被使用者查看和使用的,但是在开发的过程中却有一个非常有用的功能一直被忽视,更多的人只是快速浏览了一遍这些官方示例,有时候并没有浏览完整就开始尝试开发,结果就在使用ThingJS过程中遇到了各种困难,实际上,除了官方示例,ThingJS的快捷代码功能更加方便!功能相比于官方示例也是各有千秋~=! ThingJS快捷代码功能 ThingJS拥有一个快捷代码功能,从新建APP到综合,每个快捷代码都能简化我们的开发,尤其是快捷代码

qq_42739428的博客 1820

【ThingJS | 3D可视化】开发框架,一站式数字孪生

ThingJS是一个基于WebGL和Three.js的开源3D JavaScript库,用于创建交互式的3D场景和应用程序。它提供了丰富的功能和工具,使开发人员能够简单而高效地构建各种类型的3D应用。ThingJS支持导入各种3D模型格式,并提供了各种渲染效果和交互功能,例如阴影、光照、碰撞检测等。

云散的博客 3131

ThingJS,像孩子搭乐高一样去开发3D商业项目!

ThingJS是一个基于JS代码进行开发的PAAS平台,通过轻量化的官方示例,快速上手3D可视化,只要懂得JS的设计师或者开发人员,都能够在短时间内有不错的开发成果。 启动平台之后,第一步该是创建对象APP,以便承载后期的3D功能开发。 ThingJS启动后创建核心对象APP ThingJS的核心对象APP创建方法如下: 1 var app = new THING.App(); 加载园区场景 这个是核心对象的创建方法,具体还有加载园区的方式,通过URL的方式将园区加载至ThingJS中: var app

ThingJS的博客 1510

ThingJS:如何把关键组件变身为可视化点击操作对象

城市数据,在可视化设计中属于比较复杂 、抽象、不宜展示的,如何通过可视化的形式来展示它们之间的关系和规律是所考虑的重点问题。ThingJS基于二十年城市可视化项目经验,把关键组件变身为可视化点击操作对象,轻松普惠3D城市制作技术。 智慧城市指的是运用信息和通信技术手段,实现精细化和动态管理,并提升城市管理成效和改善市民生活质量。城市大屏应用通过可视化的形式营造感知氛围,把数据背后的故事生动描绘,调动受众的情绪与感知,传达本地文化背后的商业价值。 ThingJS支持通过编辑界面可视化的点击方式来快速使用搭建地

ThingJS的博客 1546

ThingJS支持塌陷性能,加快3D渲染速度

在3D建模阶段,塌陷性能其实就是附加,材质也会合并会变成一种材质。加快渲染速度。ThingJS在导入塌陷后的模型后再进行轻量3D开发。 今天来讲讲如何基于js语法来开发一个物体模型拆解展开的效果,专业名称叫“物体爆炸图”,标准ThingJS体系模型出于互动模型性能考虑,都要求在模型上传前做塌陷,这种建模细节对于提升3D开发效率很有必要,目的是减少模型对内存的占用。 在3D开发之前,模型本身会重叠很多命令,占用很大一部分内存和CPU,拖慢电脑,所以针对模型进行塌陷后(指的是把很多个物体合并成一个,转换为一个.

ThingJS的博客 1568

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

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

ThingJS的博客 1579

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

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

ThingJS的博客 1946

蛋白质组学进阶指南 | (八)差异蛋白筛选与功能解析实战

本文是蛋白质组学差异蛋白筛选与功能解析的实战指南。详细讲解了如何利用R语言的limma包进行差异表达分析,结合FDR校正和差异倍数设定筛选关键蛋白,并通过火山图可视化结果。进一步介绍了使用clusterProfiler进行GO与KEGG功能富集分析,以及利用STRING数据库和Cytoscape构建蛋白互作网络以识别枢纽分子,最终串联分析形成可验证的生物学假说。

weixin_29208077的博客 747

【云迁移工具RDA】迁移常见问题

Agent无法正常启动,Linux系统提示“SMS.0201 Failed to start sms agent!”,Windows系统提示“SMS.0201 源端主机网络繁忙,无法连接api网关”。该问题通常是由于源端没有通公网,或者没有按照要求配置hosts,无法与iam或者sms通信导致。需要排查源端网络。1.登录源端服务器。2.检查源端是否能正常访问互联网,若无法访问,请处理后重新启动Agent。可参考弹性公网IP Ping不通检查源端的DNS,防火墙,安全组、本地网络等。

2404_89358774的博客 1487

VCS和UVM常用编译选项

VCS编译选项 -full64 在64bit模式下编译、仿真,用于64位操作系统 -j8 指定编译器可以并行编译的进程数为8 -timescale=1ns/1ps 指定仿真时间和精度 +libext+.v+.V+.sv+.svh 识别.v、.sv、.svh等多种格式文件 -sverilog 支持system verilog 编译 -f xxx.lisf 指定包含所有设计文件列表的文件名 -top test 设置顶层模块为test。(指包含.

qq_40571921的博客 9934

ESP32-CAM图传小车:端边协同的嵌入式视觉系统设计

在物联网边缘智能场景中,嵌入式视觉系统需平衡实时性、算力与成本。其核心在于理解图像采集、硬件编码、低延迟传输与分层计算的基本原理——OV2640等CMOS传感器配合JPEG硬件编码可显著降低主控负载;TCP流式协议比HTTP/RTSP更适配资源受限MCU;而‘计算卸载’架构将OpenCV等重负载移至Android端,使ESP32专注实时控制与传输,既发挥FreeRTOS任务调度优势,又规避了PSRAM带宽与内存瓶颈。该模式广泛适用于教育机器人、智能巡检及DIY视觉终端等场景,本文以WiFi图传坦克小车为载体

weixin_42524864的博客 375

运维与软件实施课表

运维与软件实施课表 课程 章节编号 章节 课程地址 软件及操作系统基础 ch01 软件及操作系统基础01 实施、运维工程师基本技能:https://blog.youkuaiyun.com/qq_28189423/article/details/82700539 老毛桃制作winPE镜像:https://blog.youkuaiyun.com/qq_2818942...

Mr.O~的博客 1万+

图神经网络与大模型融合的理论综述:架构、机制与未来方向

然而,它们普遍缺乏对图结构数据的原生支持,无法直接处理边、节点之间的拓扑关系,这限制了其在关系密集型任务中的表现 [23]。2020年发布的BERT [16] 开启了自监督预训练时代,而2021年后,T5 [17]、PaLM [18]、LLaMA [19] 等模型相继推出,参数规模突破千亿级,展现出惊人的上下文学习(In-context Learning)与链式推理(Chain-of-Thought)能力 [20]。例如,将医学影像作为图节点,结合病理报告文本,实现更精准的疾病诊断 [58]。

andeyeluguo的博客 296

【NI Multisim 14.0原理图设计基础——元器件分类】

电阻(RESISTOR):该元器件栏中的电阻都是标称电阻,是根据真实电阻元器件而设计的,其电阻值不能改变。 排阻(RESISTOR PACK):相当于多个电阻并列封装在一个壳内,它们具有相同的阻值。 电位器(POTENTIOMETER):即可调电阻,可以通过键盘字母动态调节电阻,大写表示增加电阻值,小写表示减小电阻值,调节增量可以设置。 电容(CAPACITOR):所有电容都是无极性的,不能改变参数,没有考虑误差,也未考虑耐压大小。 电解电容器(CAP_ELECTROLIT):所有电容都是有极性的,“+”极

RL2698853114的博客 4万+

45 - Android系统源码-crosvm 实战:基于 KVM 的 Rust 安全虚拟机监控器核心技术

摘要:crosvm 是 Google 开发的基于 KVM 的轻量级虚拟机监控器(VMM),采用 Rust 语言编写,专为 ChromeOS 和 Android 设计。其核心特点包括: 安全架构:通过 Rust 的内存安全特性和多进程隔离(每个设备运行在独立沙箱进程)大幅降低攻击面 性能优化:基于 KVM 的硬件虚拟化支持,结合异步 I/O (io_uring/epoll) 实现高效设备模拟 模块化设计:清晰的 trait 抽象层(Hypervisor/Vm/Vcpu)支持跨平台扩展 Android 集成

保持专注,保持热爱 226

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

WINCC7.3破解文件

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

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

上一篇: ThingJS粒子特效一键实现雨雪效果
下一篇: 从零开始学习ThingJS之创建/销毁物体
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值