ThingJS:3D开发基于js就可以实现change表单事件啦

ThingJS开发使用感受 出于为了实现有关厂区的数字孪生项目,断断续续使用ThingJS平台开发一年左右,做一个使用感受的总结。在编码方面,笔者的编码方式和博客中的描述基本一致:“由于平台提供的代码编码端体验不佳,我们不得不先在本地进行开发,再将相关代码复制到在线平台,而调试修改代码也是如此繁琐”。个人感觉至少现阶段的ThingJS还是比较适合去做一些简单的业务场景、数据交互简单的项目,类似于大屏展示,这种纯数据展示;如果要实现一个较为庞大复杂的业务场景时,就不太方便,开发难度也会随之增加。 阅读详情

改变能改变的,接受不能改变的。Change事件也是如此,它只能识别组件数据,ThingJS新功能出炉!3D开发基于js就可以实现change表单事件啦!
Change有“改变”的意思,当元素的值发生改变时,会触发 change 事件。
如何结合2D图形面板和js语法来做3D开发?ThingJS做个好示范,教你着手开发不同物体的温度、雾效和iframe页面。官方新推出change事件的功能,对应各种3D效果元素的值的变化,方便在GUI(图形界面)手动操作,直接生成js代码。
Change事件指代一系列用于改变场景元素的界面组件,都有哪些组件呢?比如string组件、复选框组件、布尔开关组件、单选框组件、iframe组件,都可以一一加入开发序列。
下面就来一一解析一下。首先要绑定界面组件数据,再创建面板和添加相关组件,注意在创建过程中会通过一些颜色或者动画效果来动态呈现变化,包括变色、切换等。

创建面板

// 用于界面组件数据绑定
var dataObj = {
    temperature: '30',
    checkbox: {
        'car01': true,
        'car02': false,
        'car03': false,
    },
    switch1: false,
    radio: '首页',
    iframe: 'https://www.thingjs.com'
};
// 创建面板
var panel = THING.widget.Panel({
    titleText: '面板',
    hasTitle: true,
    width: '300px'
});

添加string组件

官方示例对应温度的变化,通过文本修改来触发change事件。代码中绑定了beforechange,通过return语句终止当前函数并返回当前温度的值,change事件显示当前温度的返回值,面板中需要输入数字,并勾选所作用的物体对象。

// 添加 Stri
【ThingJS | 3D可视化】开发框架,一站式数字孪生 ThingJS是一个基于WebGL和Three.js的开源3D JavaScript库,用于创建交互式的3D场景和应用程序。它提供了丰富的功能和工具,使开发人员能够简单而高效地构建各种类型的3D应用。ThingJS支持导入各种3D模型格式,并提供了各种渲染效果和交互功能,例如阴影、光照、碰撞检测等。 阅读详情

相关推荐

可视化前端开发对技术的要求

前端工程师的职位我是觉得真心不错的,但有的前端工程师野心很大呀,不甘于只写页面代码,还要往更好的方向发展,比如可视化方向。3D可视化已经被越来越多人、企业了解和应用起来。那你知道对于可视化前端开发有什么样的技术要求吗?其实不难。一切都借助于平台开发,thingjs平台简化webgl、封装threejs,只需要前端有一定的开发经验,熟练掌握Javascript语言就行啦~简单拖拽,写一些代码就可以实...

716

数字孪生开发:端渲染与流渲染融合架构实战解析

在三维可视化与数字孪生应用开发中,实时渲染技术是核心基础。其原理是通过图形API(如WebGL/WebGPU)调用GPU进行模型、光照与材质的实时计算与绘制,以生成动态图像。这项技术的价值在于能够创建可交互、沉浸式的虚拟环境,广泛应用于智慧城市、工业仿真、产品展示等领域。然而,单一渲染模式面临挑战:端渲染依赖终端算力,难以承载超大规模高精度场景;流渲染虽能利用云端强大GPU实现影视级画质,但存在固有网络延迟,影响交互实时性。因此,结合两者优势的混合渲染架构成为解决复杂数字孪生项目需求的关键。本文聚焦于分层混

weixin_33851177的博客 394

ThingJS1.0API学习使用总结

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

宇叔儿 1584

使用ThingJS和Unity3D轻松构建3D可视化数字孪生世界

在菜单项的回调函数中,我们可以设置导出路径和文件名,然后使用Unity3D的BuildPipeline.BuildPlayer函数将场景导出为WebGL格式的文件。ThingJS是一个基于Web的3D可视化引擎,它提供了丰富的功能和工具,用于创建交互式的3D场景和模拟环境。上述代码创建了一个名为"MyScene"的脚本,它将两个游戏对象(object1和object2)添加到场景中,并在启动时初始化它们的位置和旋转。在浏览器中,我们可以与场景中的对象进行交互,观察它们的行为和相互作用。

DllCoding的博客 787

set_data_check专题[使用,report_timing,setup/hold检查]

set_data_check用于约束『数据-对-数据』的『建立保持』时间检查,通常被称为非时序约束 ( non-sequential constraints ), 理论上set_data_check 可以设在任意的两个data pin 上,其中一个pin 称为 constrained pin 类似于寄存器的data pin, 另一个pin 称为related pin 类似于寄存器的clock pin.

cy413026的博客 1万+

OriginPro实战:5步搞定碳材料拉曼光谱D峰G峰分析(附完整数据处理流程)

本文详细介绍了使用OriginPro进行碳材料拉曼光谱D峰G峰分析的完整流程,涵盖数据预处理、多图层可视化、高精度分峰拟合等关键步骤。特别针对材料科学研究中的基线漂移、多峰重叠等问题提供专业解决方案,帮助研究者快速完成从原始数据到科研级图表的全流程分析,提升碳材料表征效率与准确性。

vodka的博客 951

【数据集处理】基于ERA5 气温/湿度数据计算湿球温度并判别湿热浪

【数据集处理】基于ERA5 气温/湿度数据计算湿球温度并判别湿热浪

WW、forever的博客 488

YOLOv5改进 | 低照度检测 | 2024最新改进CPA-Enhancer链式思考网络(适用低照度、图像去雾、雨天、雪天)

本文给大家带来的2024.3月份最新改进机制,由CPA-Enhancer: Chain-of-Thought Prompted Adaptive Enhancer for Object Detection under Unknown Degradations论文提出的CPA-Enhancer链式思考网络CPA-Enhancer通过引入链式思考提示机制,实现了对未知退化条件下图像的自适应增强。该方法的核心在于能够利用CoT提示对图像退化进行动态分析和适应,从而显著提升物体检测性能。

Snu77的博客 2224

【25年荣耀校招-()-4月18日-第二题(200分)- 测量接收信号】(题目+思路+Java&C++&Python解析+在线测试)

有一个接收机,以1ms为周期,测量接收信号强度。假设每个测量时刻所测量到的接收信号的强度是独立且同分布的。已知每个测量时刻的接收信号的强度的大于−100dBm的概率为Plarge。请求解以下事件的概率,并将概率输出:连续测量Nmeas次之内,有超过或等于Nover次的测量的接收信号的强度大于−100dBm。

m0_73659489的博客 73

微信小程序 - 最新详细实现模板消息订阅通知功能,给用户微信发送“服务通知“模板消息并点击进入跳转到小程序页面路由,订阅消息通知详细后台申请流程及示例代码,解决授权申请弹框被拒绝后无法调起、常见报错!

微信小程序,vue2,vue3,模板消息,订阅通知,服务通知,小程序模板通知,订阅微信模板消息功能,唤起模板消息订阅弹框并发送服务通知,消息订阅与模板消息发送,一次性订阅,长期永久订阅,申请模板id,详细示例代码教程,配置流程,消息模板,模板ID,用户收不到消息,订阅了通知但微信不来服务通知,报错,小程序平台模板消息订阅功能,唤起订阅模板消息弹框,订阅模板消息发送服务通知功能,如何做模板消息订阅,一直收不到通知,用户通过弹窗订阅,订阅消息,无法打开申请授权弹框,用户拒绝/关闭后,如何引导用户再开启,拒绝后怎

🏆 前端领域优质创作者 5331

Centos 7 Linux 离线安装单机 Kafka:下载、安装、配置、使用

本文详细介绍了在 CentOS 7 系统上离线安装单机版 Apache Kafka 的完整流程,包括环境准备(JDK 安装)、Kafka 安装包上传与解压、关键配置修改(如监听地址)、ZooKeeper 与 Kafka 服务的启动,以及 Topic 的创建、消息的生产和消费等基础操作。适用于无网络环境下的 Kafka 快速部署与学习,为后续开发或测试提供本地消息队列支持。

寒水馨 · 轻量级技术文档 · hanshuixin.org 1320

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

IEM模型,地表粗糙度模拟

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

上一篇: ThingJS加入聚光灯功能,开发更轻松
下一篇: 一个3D城市地图应用开发工具,等你获取 ThingJS 3D 全景 可视化
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值