当前位置: 首页 > news >正文

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

在这里插入图片描述

博主:_LJaXi Or 東方幻想郷
专栏: 数字孪生 | 3D可视化框架
开发工具:ThingJS在线开发工具

ThingJs 低代码开发

  • ThingJs 低代码开发
    • 注意点
    • 场景效果配置
    • 层级
      • 层级常用API
      • 实例化 Thing,加载场景
      • load 加载函数
      • ThingJs 层级关系图
      • 查找层级
      • 层级切换完成
      • 飞行完成
    • 楼层
      • 层级事件常用API
      • 监听层级切换事件
      • 获取当前选中的物体
      • 停止进入物体层级默认行为
    • 创建按钮(两种方法)
    • 添加摄像头
    • 创建管线
      • 管线切换
    • 鼠标操作
    • 设置物体样式
    • 循环动作

ThingJs 低代码开发

注意点

有问题直接戳官网: ThingJs 在线开发工具

对象拾取: 只有物品编辑了 UserID Name 或者添加 自定义属性 之后, 导入到 ThingJs 中才能成为独立的管理对象,被程序读取或修改

场景效果配置

灯光配置

app.lighting = {}

后期设置(美化效果)

app.postEffect = {}

天气效果

app.fog = {} // 雾化效果
apep.create // 接口创建粒子,实现雨雪效果
例子类型:'ParticleSystem'

动态天空及天空盒

app.ksyEffect = {}

在这里插入图片描述

层级

层级常用API

app.level.change(object); // 层级切换到指定对象
app.level.back(); // 返回当前层级的父物体层级
app.level.current; // 获取当前的层级对象
app.level.previous; // 获取之前的层级对象

实例化 Thing,加载场景

var app = new THING.App({url: '', // 场景urlbackground: '#00000', // 场景颜色env: ‘Seaside' // 主题吧,忘了
})

load 加载函数

app.on('load', (ev) => {app.level....
})

ThingJs 层级关系图

在这里插入图片描述

查找层级

app.query('.Building'); // 查找物体类是 Building 的对象
app.query("car01")[0]; // 查询名称(name)是 car01 的对象
app.query("[alarm]"); // 有物体类型属性的,无论值是什么
app.query('["userData/物体类型"="粮仓"]'); // 查询物体类型属性是粮仓的对象
app.query("[levelNum>2]"); // 查询levelNum大于2的对象,支持 <=, <, =, >, >=// 支持链式查询
app.query('.Building').query("[alarm]");// 正则表达式(RegExp)对象
app.query(/car/); 
/
var reg = new RegExp(/car/);
app.query(reg);

层级切换完成

complete() {console.log("层级切换完成")
}

飞行完成

flyComplete() {console.log("场景飞行完成")
}

楼层

层级事件常用API

EnterLevel; // 进入层级事件 (包含4个内置响应)
LeaveLevel; // 退出层级事件 (包含1个内哭响应)
LevelFlyEnd; // 层级切换飞行结束事件

进入层级时的场景控制 THING.EventTag.LevelSceneOperations,如进入建筑时显示所有楼层;进入物体时,设置兄弟物体半透明

进入层级时的飞行控制 THING.EventTag.LevelFly,如进入各个层级时的飞行控制 (飞行时间、视角等)

进入层级时背景热制 THING.EventTag,LevelSetBackground,如进入建筑后隐藏天空盒

进入层级时的 Pick 设置 THING.EventTag.LevelPickedResultFunc,如进入建筑后是只能 Pick 楼层还是也能 Pick 楼层下的物体

退出层级时的场景控制 THING.EventTag.LevelSceneOperations,如从园区进入建筑层级 (即退出园区) 后,园区隐藏

监听层级切换事件

//第二个参数可以输入.Building/.Floor/.Thing,来监听是建筑、楼层、物体的层级切换,不输入默认监听所有层级
// 监听进入楼层事件
app.on(THING.EventType.EnterLevel, '', function (ev) {if (ev.current.name == '1楼') {//进入一楼显示两个设备数据//todo//...}else{//todo//...}
}, '进入楼层显示面板')

获取当前选中的物体

app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {var object = ev.object;
}, 'customEnterThingOperations')

停止进入物体层级默认行为

// 停止进入物体层级的默认行为
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);

在应用程序中,THING.EventType.EnterLevel 事件代表进入楼层的事件类型。当用户进入某个楼层时,系统会默认执行一些与层级场景相关的操作,比如加载和显示该楼层的模型、摄像机切换等

使用 app.pauseEvent 方法可以暂停或停止特定事件的默认行为。在您的代码中,通过调用 app.pauseEvent 方法来停止 ‘THING.EventType.EnterLevel’ 事件与 ‘.Thing’ 类相关的默认行为

换句话说,当用户进入楼层并且当前对象是 ‘.Thing’ 类的实例时,通过停止默认行为,您可以自定义处理事件并阻止系统默认的操作

创建按钮(两种方法)

new THING.widget.Button('按钮文本', function () {// 写逻辑
}, "方法描述(随便写)")
new THING.widget.Button('文本',绑定方法(注意不是字符串))

添加摄像头

// 视频url地址,但是url必须是https协议的,
// 其本质是将https协议的一个摄像头html网页引入一个iframe的panel面板中。
var panel2 = null;
// 将视频嵌入到3D场景中
if (panel2) {panel2.destroy();panel2 = null;
} else {// 将视频页面作2D界面元素 通过快捷界面库 panel 的iframe组件进行添加panel2 = new THING.widget.Panel({titleText: "视频监控",dragable: true,hasTitle: true,width: "400px",closeIcon: true});var iframe = panel2.addIframe({ url: 'https://jiafei.imdo.co/test2/play.html?serial=34020000001320001293&code=34020000001320000001' }, 'url').caption("").setHeight('400px');panel2.position = [50, 50];// 关闭 panel 时,移除嵌入视频的 iframe 页面panel2.on("close", function() {// panel.remove(iframe);panel2.destroy();panel2 = null;});
}

创建管线

var pos = [[10.298, 3, -6.635], [-8.702, 3, -6.635], [-8.702, 3, 3.365], [-5.702, 3, 3.365], [-5.702, 3, 1.365]];
// 创建管线
line1 = app.create({type: 'PolygonLine',points: pos,width: 0.15,style: {image:'https://www.thingjs.com/static/images/poly_line_01.png', // 管线中的纹理资源}
});
line1.scrollUV = true;
app.query('.PolygonLine').style.alwaysOnTop = true;
line1.play({time: 8000
})

在这里插入图片描述

管线切换

var pos = [[10.298, 3, -6.635], [-8.702, 3, -6.635], [-8.702, 3, 3.365], [-5.702, 3, 3.365], [-5.702, 3, 1.365]];
// 创建管线
line1 = app.create({type: 'PolygonLine',points: pos,width: 0.1,style: {image: 'https://www.thingjs.com/static/images/line01.png', // 管线中的纹理资源}
});
line1.scrollUV = true;
app.query('.PolygonLine').style.alwaysOnTop = true;
line1.play({time: 8000
})

在这里插入图片描述

鼠标操作

app.on(THING.EventType.MouseEnter,'.Deploy',(ev)=>{//触发事件后执行的操作ev.object.hoverState();
},'mouseEnterDeploy');app.on(THING.EventType.MouseLeave,'.Deploy',(ev)=>{//触发事件后执行的操作ev.object.hoverState();
},'mouseLeaveDeploy');app.on(THING.EventType.Click,'.Deploy',(ev)=>{//触发事件后执行的操作ev.object.hoverState();
});

设置物体样式

/*** 获取当前楼层的屋顶*/
function getFloorRoof() {var floor = app.level.current; // 当前楼层var roof = floor.roof; // 楼层屋顶roof.style.opacity = 0.8; // 设置屋顶透明度roof.style.color = '#0000ff'; // 设置屋顶颜色roof.visible = true;
}

循环动作

function carmove(){car.moveTo({// position: [-8.967, 0.02, -2.714], // 移动到世界位置offsetPosition: [0, 10, 0], // 相对自身 向后移动到 10m 处time: 0.5 * 1000,'complete': function () {carinit();}// lerpType:null, // 插值类型 默认为线性插值});
}function carinit(){car.moveTo({// position: [-8.967, 0.02, -2.714], // 移动到世界位置offsetPosition: [0, -10, 0], // 相对自身 向后移动到 10m 处time: 0 * 1000,'complete': function () {carmove();}// lerpType:null, // 插值类型 默认为线性插值});
}

相关文章:

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

博主&#xff1a;_LJaXi Or 東方幻想郷 专栏&#xff1a; 数字孪生 | 3D可视化框架 开发工具&#xff1a;ThingJS在线开发工具 ThingJs 低代码开发 ThingJs 低代码开发注意点场景效果配置层级层级常用API实例化 Thing&#xff0c;加载场景load 加载函数ThingJs 层级关系图查找层…...

SpringBoot返回响应排除为 null 的字段

SpringBoot返回响应排除为 null 的字段 可以通过全局配置&#xff0c;使返回响应中为null的字段&#xff0c;不在出现在返回结果中。 注意&#xff1a;这样配置&#xff0c;使得返回响应包含的字段随请求结果变化&#xff0c;响应到底包含哪些字段不直观&#xff1b;除非业务…...

华为数通方向HCIP-DataCom H12-821题库(单选题:41-60)

第41题 以下关于IS-IS协议说法错误的是? A、IS-IS协议支持CLNP网络 B、IS-IS 协议支持IP 网络 C、IS-IS 协议的报文直接由数据链路层封装 D、IS-IS协议是运行在AS之间的链路状态协议 答案&#xff1a;D 解析&#xff1a; 关于IS-IS协议的说法错误是D. IS-IS协议是运行在A…...

OpenAI推出GPT-3.5Turbo微调功能并更新API;Midjourney更新局部绘制功能

&#x1f989; AI新闻 &#x1f680; OpenAI推出GPT-3.5Turbo微调功能并更新API&#xff0c;将提供GPT-4微调功能 摘要&#xff1a;OpenAI宣布推出GPT-3.5Turbo微调功能&#xff0c;并更新API&#xff0c;使企业和开发者能够定制ChatGPT&#xff0c;达到或超过GPT-4的能力。通…...

相机成像之3A算法的综述

3A算法是摄像机成像控制技术中的三大自动控制算法。随着计算机视觉的迅速发展,该算法在摄像器材领域具有广泛的应用和前景。 那么3A控制算法又是指什么呢? (1)AE (Auto Exposure)自动曝光控制 (2)AF (Auto Focus)自动聚焦控制 (3)AWB (Auto White Balance)自动白平衡控…...

最新AI系统ChatGPT程序源码/微信公众号/H5端+搭建部署教程+完整知识库

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…...

OpenCV实例(九)基于深度学习的运动目标检测(二)YOLOv2概述

基于深度学习的运动目标检测&#xff08;二&#xff09;YOLOv2&YOLOv3概述 1.YOLOv2概述2.YOLOv3概述2.1 新的基础网络结构&#xff1a;2.2 采用多尺度预测机制。2.3 使用简单的逻辑回归进行分类 1.YOLOv2概述 对YOLO存在的不足&#xff0c;业界又推出了YOLOv2。YOLOv2主要…...

【Docker】已经创建好的Docker怎么设置开机自启

已经创建好的Docker怎么设置开机自启 1.使用命令Docker update来完成2.查看是否开启3.验证是否开启 1.使用命令Docker update来完成 操作步骤&#xff1a; docker update --restartalways 容器ID2.查看是否开启 docker inspect 容器Id看到这里RestartPolicy设置为如图&#…...

E - Excellent Views

Problem - E - Codeforces 问题描述&#xff1a;数组H大小都不相同。从i到j是可行的&#xff0c;当且仅当 不存在 k &#xff0c;使 ∣ i − k ∣ ≤ ∣ i − j ∣ , H k > H j 不存在k&#xff0c;使 \\ |i - k| \leq |i - j|, \quad H_k > H_j 不存在k&#xff0c;使…...

WiFi天线和NB-IoT天线不通用

表面看起来完全一样。但是把WiFi天线插到NB-IoT设备后&#xff0c;信号弱了很多。还导致设备反复重启...

IoT DC3 是一个基于 Spring Cloud 的开源的、分布式的物联网(IoT)平台本地部署步骤

dc3 windows 本地搭建步骤&#xff1a; ​​ 必要软件环境 进入原网页# 务必保证至少需要给 docker 分配&#xff1a;1 核 CPU 以及 4G 以上的运行内存&#xff01; JDK : 推荐使用 Oracle JDK 1.8 或者 OpenJDK8&#xff0c;理论来说其他版本也行&#xff1b; Maven : 推荐…...

VBA Excel自定义函数的使用 简单的语法

一个简单的教程&#xff0c;实现VBA自定义函数。 新建模块 复制后面的代码放进来 函数的入口参数不定义&#xff0c;则认为是一块区域&#xff1b; 反之&#xff0c;如FindChar1 As String&#xff0c;则认为是输入的单值。 循环和分支如下例子&#xff0c;VB比较接近自然语…...

字节跳动 从需求到上线全流程 软件工程流程 需求评估 MVP

走进后端开发流程 整个课程会带大家先从理论出发&#xff0c;思考为什么有流程 大家以后工作的团队可能不一样&#xff0c;那么不同的团队也会有不同的流程&#xff0c;这背后的逻辑是什么 然后会带大家按照走一遍从需求到上线的全流程&#xff0c;告诉大家在流程的每个阶段&am…...

线性代数-矩阵的本质

线性代数-矩阵的本质 线性代数-矩阵的本质...

React基础入门之虚拟Dom

React官方文档&#xff1a;https://react.docschina.org/ 说明 重要提示&#xff1a;本系列文章基础篇总结自尚硅谷课程&#xff0c;且采用类式写法&#xff01;&#xff01;最新的函数式组件写法见高级篇。 本系列文档旨在帮助vue同学更快速的学习react&#xff0c;如果你很…...

C++基础Ⅰ编译、链接

目录儿 1 C是如何工作的1.1 预处理语句1.2 include1.3 main()1.4 编译单独编译项目编译 1.5 链接 2 定义和调用函数3 编译器如何工作3.1 编译3.1.1 引入头文件系统头文件自定义头文件 3.1.2 自定义类型3.1.3 条件判断拓展: 汇编 3.2 链接3.2.1 起始函数3.2.2 被调用的函数 3.3 …...

VMware和ubuntu配置Hadoop环境

目录 一、获取VMware安装包 1、官网获取 1&#xff09;首先先进入官网&#xff0c;官网首页是下面这样&#xff1a; 2&#xff09;接着点击产品选项 3&#xff09;进入后点击查看所有产品&#xff0c;然后在右上角选择排序方式为Z到A&#xff0c;然后向下滑动找到Workstation…...

uview2.0自定义tabbar

tabbar组件 <template><u-tabbar :value"tab" change"changeTab" :fixed"true" :border"true" :placeholder"true":safeAreaInsetBottom"true"><u-tabbar-item text"消息" icon"c…...

Star History 月度开源精选|Llama 2 及周边生态特辑

7 月 18 日&#xff0c;Meta 发布了 Llama&#xff0c;大语言模型 Llama 1 的进阶版&#xff0c;可以自由免费用于研究和商业&#xff0c;支持私有化部署。 所以本期 Star History 的主题是&#xff1a;帮助你快速把 Llama 2 在自己机器上跑起来的开源工具&#xff0c;无论你的…...

修改电脑上路由表使笔记本默认走无线

如果笔记本上即连接了有线&#xff0c;也连接了无线&#xff0c;默认电脑会走有线的&#xff0c;通过route print命令查看路由表就可以看出来&#xff0c;因为无线的“metric”跳数要比有线的高 解决方法&#xff1a; 如果想实现让默认走无线&#xff0c;就需要修改自己电脑的…...

Spring Cache的介绍以及怎么使用(redis)

Spring Cache 文章目录 Spring Cache1、Spring Cache介绍2、Spring Cache常用注解2.1、EnableCaching注解2.2、CachePut注解2.3、CacheEvict注解2.4、Cacheable注解 3、Spring Cache使用方式--redis 1、Spring Cache介绍 Spring Cache是一个框架&#xff0c;实现了基于注解的缓…...

软考高级系统架构设计师系列论文六十九:论信息系统的安全风险评估

一、信息系统相关知识点 软考高级信息系统项目管理师系列之四十三:信息系统安全管理软考高级系统架构设计师:系统安全分析与设计...

Ubuntu系统安装之后首需要做的事情

Ubuntu系统的初步环境搭建 1、换源2、显卡3、浏览器4、输入法5、终端6、ROS7、VSCode8、设置时间与win一致9、 TimeShift10、 Anaconda&#xff08;考虑装不装&#xff09; 1、换源 点开Software&&Update&#xff0c;找到Ubuntu Software中的Download from&#xff0c…...

Qt——QPushButton控件的常见属性、方法和信号

Qt中QPushButton控件的常见属性、方法和信号 一、QPushButton控件常见属性 一、QPushButton控件常见方法 一、QPushButton控件常见信号 一、QPushButton控件常见属性&#xff08;Properties&#xff09; 1. text: 描述&#xff1a;按钮上显示的文本。 用法&#xff1a; butto…...

AUTOSAR规范与ECU软件开发(实践篇)5.5 基于ISOLAR-A的系统级设计与配置方法(上)

目录 前言 1 系统配置输入文件创建与导入 2、 Composition SWC建立 前言 如前所述, AUTOSAR支持整车级别的软件架构设计, 开发人员可以进行整车级别的软件组件定义, 再将这些软件组件分配到各个ECU中, 这就是AUTOSAR系统级设计需要完成的主要任务。 下面结合AUTOSAR方法论…...

mongoDB的CRUD

...

flutter TARGET_SDK_VERSION和android 13

config.gradle ext{SDK_VERSION 33MIN_SDK_VERSION 23TARGET_SDK_VERSION 33COMPILE_SDK_VERSION SDK_VERSIONBUILD_TOOL_VERSION "33.0.0"//兼容库版本SUPPORT_LIB_VERSION "33.0.0"}app/build.gradle里面的 defaultConfig {// TODO: Specify your…...

大数据Flink(六十六):Flink的重要概念和小结

文章目录 Flink的重要概念和小结 一、​​​​​​​​​​​​​​数据流图(Dataflow Graph)...

Rider 添加NuGet软件包 (NuGet Package)

如图&#xff0c;在解决方案中选择自己的项目右键&#xff0c;点击管理 NuGet 软件包即可 在搜索栏中搜索自己要使用的软件包安装即可使用...

什么是JVM ?

一、JVM 简介 JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java 虚拟机。 虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机&#xff1a; JVM 、 VMwave 、 Virtual Box 。 JVM 和其他两个虚拟机的区别…...