官方示例（17）：3D场景顶牌模型化开发ThingJS

最新推荐文章于 2022-12-23 14:38:28 发布
最新推荐文章于 2022-12-23 14:38:28 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ThingJS 3D可视化 物联网 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ThingJS/article/details/114070224
本文介绍了如何在3D场景中创建广告顶牌，包括在CampusBuilder中设置信息牌以及使用ThingJS进行场景顶牌的开发。详细讲述了在模模搭中配置信息牌的步骤，以及在ThingJS平台上进行编辑和代码描述的方法，强调了3D效果和交互功能的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

#前端 #3D开发 #物联网场景可视化

  1. 3D场景中的广告顶牌
  2. CampusBuilder设置信息牌
  3. ThingJS开发场景顶牌
3D场景中的广告顶牌

我们都见过户外广告牌，作为一种户外媒体装置设立于楼群或公路旁，不仅吸引人流，提供场景指引，还可以作为建筑设计的一部分。因此，广告牌的造型设计是多样的。
在这里插入图片描述

在物理世界，广告牌会受到制作材料、受力构件的影响；在3D场景中，顶牌不再是实际意义上的广告牌，而是一种信息表达形式。
3D场景的广告顶牌通常需要图形标注，加入了在线元素，比如缩放、颜色和透明度等，起到更美观的作用。

CampusBuilder设置信息牌

ThingJS提供可视化开发组件，智慧场景在CampusBuilder（模模搭）搭建。

（1）顶牌在模模搭界面内又称为“信息牌”，通常在模型（如柜子）上显示，所以要先选中模型，并明确模型ID、模型名称和自定义属性，左下角编辑信息牌。
在这里插入图片描述

（2）信息牌可以选择不同的样式，并且设置3D模型化或者可见显示，预览确认后即可。

最低0.47元/天 解锁文章
ThingJS官方示例：7天学会管线3D可视化开发
ThingJS的博客
07-29 1481
对于城市来说，地下管线及其附属设施，是保障城市运行的重要基础设施和生命线，如今想要提升地下管线建设管理水平，3D可视化的需求应运而生。 如何使用thingjs迅速生成管线可视化demo，我来为你解答。 在物联网中，对于管线的检测始终存在难度，如何用可视化的方式来解决这个管线监管问题呢？不论是城市管线还是社区，商场、大厦里的管线，想要实时检测到管线的状态都是比较困难的。我们又该如何通过现如今的技术来实现管线的可视化管理呢？ 智慧电力可视化系统构建发电、输电、变电、配电、用电、调度、通信信息各个环节逐级可视。具
ThingJS官方案例（四）：快速应用3D场景下的模拟导航能力
ThingJS的博客
12-26 1630
3D室内场景承载了建筑物基础的环境信息，利用ThingJS平台模拟导航功能，实现物联网远程管理的可视化。在一个室内场景中，相隔的两个房间也可以实现路径导航功能！ 第三人称视角 第一人称视角 首先保证房间、门和电梯/楼梯添加相应属性后，就可以利用鼠标点击功能，设置导航起点、导航终点，自动生成导航线。为了满足模拟导航能力，3D建筑需要有特定的搭建规则。 详情见文档【ThingJS室内导航场景的搭建规则】>> 其中导航点、导航线的对象可以自由设置其样式，包括启动UV动画，设置动画播放速度，更能引
ThingsJs--学习笔记3：在springboot项目前端嵌入thingsjs页面，并在实现对它的跨域数据对接
ZLZQ_Yuan
05-29 2439
1.在线编写thingsjs页面 var app = new THING.App(); app.background = [0, 0, 0]; // app.camera.earthFlyTo. THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', at
ThingJS官方示例（七）：室内导航定位查询能力，轻松开发不难
ThingJS的博客
01-09 1684
#前端开发##3D可视化# 导航标注动画定制 第一人称动态导航 多楼层导航模式 楼层展开功能推介 三维室内地图包含丰富的环境信息，真实展示外部环境，尤其是复杂的室内商场，遇到消防险情或者事故报警，如何尽快定位，以最快的速度到达现场？使用三维地图定位查询导航，在虚拟场景进行交互，足不出户就能够完成路径规划和指挥智能。 工厂的生产车间、交通要道的场内监控点，遇到应急事件一样需要路径导航规划的辅助哟！ThingJS提供的室内导航查询定位方法，并不是新技术，应该说是常见的定位方法。ThingJS提供JS类库在
ThingJS-X森可视平台框架源码 java+Netcore版本 旗舰版企业版
xevalon的博客
12-23 296
JNPF快速开发平台支持自由布局页面，拖拽控件至页面中，针对不同的控件进行内容设值和数据绑定，所见即所得的实现大屏可视化页面开发。
官方示例（十六）：3D场景中BIM剖切面参数化开发ThingJS
ThingJS的博客
02-06 1608
#前端# #BIM# #物联网可视化开发# 3D场景内的模型剖切 剖切对象初始化 剖切面事件控制 简介：建筑楼宇是一个实体，室内往往被遮挡，对于建筑设计、楼宇管理和设备维护造成了一定的困难。如果想了解房屋内部的复杂构造情形，这时候利用假想的剖切面进行几何切割，室内的构造情况露出。ThingJS引入了3D剖切面功能，参数化开发方法更精确，直接在屏幕呈现剖切效果。 demo链接：http://www.thingjs.com/guide/?m=sample 3D场景内的模型剖切 ThingJS支持对模型
ThingJS 官方示例（一）：禁区告警的3D电子围栏可视化
ThingJS的博客
12-22 1858
电子围栏又称周界防盗报警系统，监控防区工作状态，实景中的电子围栏系统用于农业、畜牧业，以及监狱、军事设施等安全敏感地区，而在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控。3D可视化场景则更加轻量化实现，展示工人的实时位置、电子围栏的范围、现场的安全情况，帮助我们直观了解当前工厂人员的安全状况。 ThingJS平台上，电子围栏指的是一个区域，使用PolygonRegion属性。创建物体对象或模型并开启移动功能，即可开始检测目标点是否进入电子围栏区域，判断true或
ThingJS官方示例（三）：3D标记“Marker”跳跃、闪烁和发光动画效果
ThingJS的博客
12-25 1776
物联网3D可视化场景中，经常用到标注元素作为线路标绘、业务区域标绘，比如定位物联网设备或危险源位置，进行安全作业或者路径导航规划，远程解决难题。 ThingJS的3D标记“Marker”，往往用于顶牌，有两个主要作用： 传入div, image或canvas写文字，展现在3D场景中或绑定在3D物体上； 添加一个图片放置到你希望的位置，作为孩子添加到对象身上，随着对象一同移动。 注意，标记Marker受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。 功能列表更新Ma
官方示例（十）：网页开发3D粒子系统实现降雨效果 ThingJS
ThingJS的博客
01-16 1524
简介：气温的变化会带动水汽条件的变化，带来降雪、降雨、降冰雹等奇异的天气现象，不仅仅是人的活动会受到影响，物联网设备管理、传感器监测及安全作业都要相应调整。 为了提前准备好预案工作，3D孪生场景的仿真过程就派上了用场，比如预测紧急情况或事故灾害的后果，并基于数字孪生模型以及数字仿真两个条件，以完成必要的危机解决方案。 demo演示地址：http://www.thingjs.com/guide/?m=sample #前端 #3D开发 #物联网 加载场景 雨滴计时器 降雨效果 在数字孪生仿真过程中，需要3D
ThingJS-front:ThingJS.io平台的前端
05-15
ThingJS ThingJS是开源物联网平台。 该项目是ThingJS平台的开发模板。 基于 主要利润 开源的 轻型跨平台应用 任何层的单一语法（JavaScript） 相关的开发堆栈（webpack，npm等） 运行时和开发依赖项（通过npm） 跨平台，硬件独立的数据总线（ ） 跨平台，独立于硬件的 友好的开发模式（热重载，调试器，存储编辑器等） 机载著名框架（ ， ） 与云服务轻松集成 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle
JS版3D360度全景展示图效果源码
08-05
JS版3D360度全景展示图效果源码,支持大部分手机浏览器!
官方示例（十二）：网页加载道路及Geoline开发ThingJS
ThingJS的博客
01-20 1392
#前端开发# #交通可视化# #Geoline# 简介：智慧城市对于我们并不陌生，目前已经有600多个城市平台智慧化，拥有空、天、地一体化的基础网络部署，针对城市交通物理实体对象的仿真模拟也有了长足发展。为了更逼真的孪生技术应用于交通出行，ThingJS平台结合物联网专业领域应用经验，构建智慧交通场景，加入定制化特效，让城市交通也有机会展示最好的一面！ 体验见demo链接：http://www.thingjs.com/guide/?m=sample 1. 基础图层叠加 动态加载地球组件之后，基于地图Ma
150个官方3D源码打包，参加0元送500魔豆活动 三维可视化 全景 3D建模 ThingJS
ThingJS的博客
10-20 1570
**开发效率低？培训成本巨大？开发人才流失频繁？**物联网领域的3D可视化开发前景看好，却也面临传统3D开发难题！ 使用目前最流行的3D开发框架three.js，一个加载模型、调光、选择模型弹框的功能，就能写出上百行代码……！ Three.js虽说是大多数开发者首次接触的WebGL 3D库，但ThingJS是新兴的3D框架，封装了对模型交互事件的API、对模型的操作及层次关系，一个个具体的模型抽象把开发者从复杂的3D概念中解放出来。 ThingJS “三好”助力便捷3D开发： 采用JavaScript语言
如何利用ThingJS开发物联网可视化小Demo？
qq_42739428的博客
03-05 794
如何利用ThingJS平台制作一个3D可视化应用并且发布出去？怎么去制作一个简单的可视化入门项目？如何判断自己能不能进军3D可视化行业?多说不练假把式，今天我们就来学习ThingJS平台中的官方示例，然后仿照一个官方示例来制作一个升级版的例子，如果能做出来，那么就代表着，我们有能力迈入可视化的大门，如果做不出来，建议先学会javaScript基础，毕竟这个就是ThingJS平台将物联网可视化技术降...
ThingsJs-学习笔记1:初步了解
ZLZQ_Yuan
05-28 2981
1.官网： thingsjs官网 2.大致功能概述： thingsjs介绍 ThingJS平台的推出，解决了传统3D开发人员投入大、开发效率低、场景制作周期长、模型无法复用、系统部署复杂的问题。 特点： （1）强大的3D引擎：可在各类主流网页浏览器中自如运行，包括可在移动端直接访问运行。 （2）简化模型制作：ThingBuilder（包括面向园区级别的搭建工具CampusBuilder，还包括面向城市级场景的CityBuilder）。使用平台的CampusBuilder3D场景快速搭建工具，拥有便捷的搭建
ThingJS做项目需要多种设备状态怎么办？戳进来，我教你~
宇叔儿
02-04 643
使用ThingJS开发项目时，经常会遇到一个设备会有多种状态，比如：设备在线\离线、告警、鼠标移入移出状态、设备选中的状态等。那么想要更好的管理这些状态，我们就需要一个设备状态管理。而且设备不止这一种，我们的设备有摄像头、门禁、灯杆、消防栓、机柜、烟感等等，都想要使用这一套状态怎么办？ 别急，下面我们就来教你怎么解决这个问题 在ThingJS的开发平台上，给我们开放了自定义类的方法，供我们定义自己的类 注意：想要使用自定义类，我们得需要先定义再注册 第一步：定义类 使用ES6的语法定义一个类，我.
java如何首页信息展示_轻松展示关键信息，ThingJS地图弹出信息如何做？
weixin_34493827的博客
02-26 196
在屏幕中间弹出一个提示窗口，用户不会错过任何信息，类似于iphone一样的操作，ThingJS的3D地图弹出信息增强了用户体验！无论是2D地图还是3D地图，经常会有展示信息面板的需求，可以用来表示物体对象的位置，也可以实时展示某物体的状态。在ThingJS开发教程中，这些有地理位置的坐标，我们称之为“信息弹窗InfoWindow”。 thingjs开发中支持使用layer来显示Web界面的信息弹...
ThingJS，让物联网开发更简单！
qq_42739428的博客
01-15 1681
随着互联网的不断发展壮大，物联网可视化也逐步受到各行各业的关注，不但制作出优秀的3D可视化场景是一个难题，而且开发3D可视化场景，形成3d可视化行业应用也是一个难题，那么我们该如何去开发3D可视化场景呢？如何让一个虚拟的3D场景不仅能够展示现实场景，还能够同步现实中的部分功能呢？ThingJS可视化平台就能让你快速开发3D场景！ ThingJS提供了从搭建场景到发布项目这四个步骤的资料，其中相关...
thingjs教程
最新发布
04-01
### ThingJS 使用教程及相关资源 ThingJS 是一款强大的三维可视化开发工具，支持开发者快速构建基于 Web 的 3D 应用程序。以下是关于 ThingJS 的使用教程、官方文档以及示例的详细介绍。 #### 一、ThingJS 平台上传资源方法 在 ThingJS 中，可以通过多种方式上传所需的资源文件，包括但不限于图片、JavaScript 文件、CSS 样式表以及自定义模型等。具体操作如下： - **上传文件夹**：可以直接将整个文件夹压缩成 ZIP 格式后上传至 ThingJS 平台[^1]。 - **单个文件上传**：对于单独的图片、脚本或其他小型资源，可以选择逐个上传的方式完成。 - **模型与特殊资源**：如果涉及复杂的 3D 模型或者其他定制化资产，则需按照特定格式准备后再行导入。 #### 二、T3D.js 工程环境搭建指南 为了更好地利用 ThingJS 提供的功能模块，了解底层依赖——即 T3D.js 的基本设置尤为重要。该引擎并不像传统框架那样提供单一入口文件用于启动应用实例；相反，它是作为一个外部库被嵌入到 HTML 页面中的。典型流程如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T3D Example</title> <!-- 引入核心库 --> <script src="./path/to/t3d.min.js"></script> </head> <body> <div id="renderCanvas"></div> <!-- 渲染区域 --> <script type="module"> import * as THREE from './path/to/three.module.js'; // 如果需要 Three.js 扩展功能 const scene = new Scene(); const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100); const renderer = new WebGLRenderer({ canvas: document.getElementById('renderCanvas') }); renderer.setSize(window.innerWidth, window.innerHeight); function animate() { requestAnimationFrame(animate); render(); // 更新画面逻辑 controls.update(); // 若存在交互控制组件则同步状态 } animate(); function render(){ renderer.render(scene, camera); } </script> </body> </html> ``` 上述代码片段展示了如何创建基础渲染循环并初始化场景结构[^2]。值得注意的是，在实际部署前还需调整路径参数以匹配服务器端布局情况。 #### 三、更多学习资料推荐 除了掌握基础知识外，深入探索实践案例同样不可或缺。以下链接指向了一些权威参考资料地址： - [在线演示](https://uinosoft.github.io/t3d.js/examples/) —— 浏览各种预置效果展示； - [技术手册](https://uinosoft.github.io/t3d.js/docs/) —— 查阅详尽 API 描述说明[^3]。 另外还有一篇专门针对线路绘制的文章可供参考[^4]，其中介绍了通过监听鼠标点击事件动态生成轨迹线条的技术要点。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值