ThingJS：次时代3D城市大屏，2款工具3分钟搭建完成！

最新推荐文章于 2025-05-04 00:15:00 发布
原创 最新推荐文章于 2025-05-04 00:15:00 发布 · 997 阅读 · 8
标签
#javascript
本文介绍了如何利用ThingJS的CityBuilder和阿里云DataV，快速搭建酷炫的3D次世代数据大屏。通过3个简单步骤，包括CityBuilder一键创建城市、DataV模板制作大屏以及大屏与3D城市的IFrame嵌入，实现3D城市与传统图表的结合，打造独特可视化效果。

次时代3D数据大屏最近特别火？通过ThingJS CityBuilder+DataV在线工具，学会快速制作可视化大屏。

在这里插入图片描述

还在制作上图这种千篇一律的数据大屏？OUT啦！酷炫的3D次世代数据大屏帮你一秒俘获甲方爸爸的芳心！
在这里插入图片描述

本图片来自ThingJS用户 云南唯恒基业科技有限公司
今天就来教大家三维数据大屏！
为了方便演示，我们来制作一个简单的三维城市与传统二维图表相结合的大屏，相信大家学习之后都能做出酷炫的三维大屏！
先来看看结果：
在这里插入图片描述

所需工具

• ThingJS平台：面向互联网的3D可视化开发平台
• CityBuilde r：聚焦城市的3D地图搭建工具
• DataV：阿里云的数据可视化产品

操作步骤

CityBuilder一键城市·–·ThingJS在线预览·–·DataV创建大屏·–·大屏对接3D城市

步骤1：CityBuilder一键城市

• 打开CityBuilder，在“地图项目”-“我的”页面中新建项目，选择模板。

最低0.47元/天 解锁文章
ThingJS：让你远程操控城市大屏，管理更高效
ThingJS的博客
09-18 1704
如今，城市生活的面貌已与十年之前大不相同——未来十年可能迎来更惊人的飞跃。 经过多年探索，城市变得越来越“有智慧”。ThingJS提供智慧3D可视化技术工具，让你远程操控城市大屏，管理更高效。 第二十三届中国北京国际科技产业博览会，简称科博会，昨天在北京的中国国际展览中心开展了，这一次优锘科技也上了线上展播的头条，在数字化城市领域占得一席。欢迎扫一扫二维码查看ThingJS智慧城市项目，感受一下优锘ThingJS团队的技术创新能力。 有必要再介绍一遍，ThingJS主要是为js开发者提供一套3D开发组件，
基于threejs开发的3D地球大屏可视化，支持2D地图模式，飞线，涟漪，配置简单易上手
qq81650984的博客
08-10 3491
基于threejs开发的地球大屏可视化纯js组件,适用所有前端js项目
Three.js3D可视化介绍，以及本地搭建three.js官网
jieyucx的博客
06-19 1万+
three.js官网Three.js是一个基于WebGL的图形库，它可以轻松地在浏览器中创建3D场景和动画。同时，它支持外部模型和纹理的导入，让开发者可以更加便捷地创建出震撼的3D场景。Three.js游戏开发Three.js可以轻松地创建3D游戏场景和动画效果，让游戏制作变得更加简单。产品展示：对于需要展现3D产品模型的企业来说，Three.js可以帮助他们创建出非常逼真的展示场景，大大提升了产品展示效果。教育培训Three.js还可以用于教育培训领域，例如创建出生动有趣的动画来解释物理现象或者化学反应。
基于vue3+threejs实现可视化大屏
2401_83384536的博客
06-30 3443
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。本文需要对 threejs 的一些基本概念和 api 有一定了解。如果对 threejs 这部分还不了解的可以看下官方文档和一些中文文档进行学习。官方文档地址：threejs.org/中文文档地址：www.webgl3d.cn/pages/aac9a…
Three.js城市展示，可视化大屏
qq_53742640的博客
02-14 3544
1、d3.js通过投影把地图数据的json映射到3维空间中，城市地图的json下载我就不多讲了，网上有很多教程，换成自己所需的城市就行；2、地图上展示的数据展示的label，一开始用的sprite小精灵模型做的，但是会失真不清楚，后来换成了CSS2DRenderer这种方式，就相当于把html渲染到3维空间里，屡试不爽；3、为了达到“酷炫智能”效果，在一加载和点击区县的时候，做了camera的动画（镜头移动、拉近），在这里就要在vue中引入tween.js了，tween做补间动画，还是很好用的；
【森城市】GIS数据漫谈（四）— 坐标系统
ThingJS的博客
07-15 677
两者相差了将近20km！于是利用水准面表示地球的物理表面，简单说就是假设有一个静止的海水面（一个无波浪、无潮汐、无水流、无大气压变化，处于流体平衡状态的静止海平面），向陆地延伸形成的一个封闭曲面来表示地球的物理表面。但此时还有一个问题针对不同的区域，用一个椭球体去“贴合”的时候必然会出现有的地方“贴合”的好，有的地方“贴合”的不好，因此还需要一个大地基准面来确定椭球体的“位置”和“姿态”。不同的历史时期，不同的国家和地区，根据相应的资料推算出不同大小的椭球体来近似的代表大地水准面。...
GIS数据漫谈（三）
ThingJS的博客
07-12 867
赤道把地球分为了北半球和南半球，与赤道平行的线就是纬线。赤道是最大的纬圈，由此向北或向南，纬圈半径递减。赤道纬度为 0°，由赤道向两级各分为90°。北半球的称为北纬，南半球的称为南纬。经线为连接南北两极并且与纬线垂直相交的半圆。经线的起始线最初并不统一，1884年，国际本初子午线会议（International Meridian Conference）在美国华盛顿召开。会议确定以穿过当时的英国伦敦格林尼治天文台的经线为本初子午线，即 0°经线。以本初子午线为参照，向东和向西各分180°，称为东经和西经。我们
GIS数据漫谈（五）— 地理坐标系统
ThingJS的博客
07-27 2929
2000国家大地坐标系。由于天地图的坐标系统是CGCS2000的，在天地图上拾取一个点的经纬度来观察。比如由于区域的特殊性，公开的矢量数据本身就在原始测绘数据的基础上进行了偏移，降低精度。这里用的是QGIS，通过XYZTiles图层加载的天地图卫星底图，再把shp文件叠加加载。（1）一般情况下是由于经纬度的坐标系和地图底图的坐标系不匹配导致。（腾讯地图同理），又称火星坐标系，它是一种对经纬度数据的加密算法，即加入随机的偏差。的标准三维场景的构建服务，使城市三维场景的构建速度提升至分钟级。...
GIS数据漫谈（六）— 投影坐标系统
ThingJS的博客
07-28 1230
在没有电脑、没有数字化地图的时代最实用的是纸质地图，但纸质地图是平面的，要把地“球”展开到地图的“平面“上（把地球在一张纸上“画”出来）就需要。为了让投影后的平面能正好在一个正方形内表示，即让投影后的Y轴范围也是[-20037508.342789244,20037508.342789244]，反算出纬度的限制范围约为[-85.06,85.06]。假设地球被套在一个圆柱中，赤道与圆柱相切，然后在地球中心放一盏灯，把球面上的图形投影到圆柱体上，再把圆柱体展开，就形成以一幅墨卡托投影的世界地图。...
Web3D工厂可视化，工厂三维可视化大屏，工厂模型展示，统计图表，人员定位，人车轨迹运动，电子围栏
左本Web3D
03-23 3796
随着物联网技术和WebGL技术的不断发展，工厂三维可视化大屏正在成为一个越来越受欢迎的解决方案。利用Three.js这一优秀的WebGL渲染引擎，可以帮助我们在Web端实现高质量的三维可视化效果，为工厂管理和生产优化提供重要的帮助。本文将介绍如何结合物联网技术和Three.js引擎，实现工厂三维可视化大屏，包括工厂模型展示、统计图表、人员定位和人车轨迹运动等功能，为读者带来一些有益的思路和启示。个人主页：我是左本Web3D，更多案例预览请点击==》在线案例。
热门阅读：基于 vue3+threejs 实现可视化大屏
前端开发博客
01-12 908
大家好，我是宝哥最近我做了一个统计爬虫，专门统计公众号上前端开发号主发表文章的数据，后面可能会多多分享一些热门文章给你们。喜欢的话记得关注我，有哪些喜欢的前端号主也可以推荐给我。今天分享一篇在Vue 3项目中使用Three.js创建可视化大屏项目的文章，文末还推荐了几个相关的项目供参考。喜欢本文记得文末点赞告诉我。爬虫数据：阅读：7500 喜欢：3 点赞: 15 评论: 0前言Three.js是一...
three.js学习之vR展厅
weixin_43909743的博客
10-11 2189
注意：video文件超过100M， git push 不上去，我没加git扩展。所以clone下来项目后需要你自己加上一个video。清空 main.js 和 style.css 内容。新建如下untils/init.js文件填入内容。index.html 中只留下核心代码。main.js - 创建立方缓冲几何体。安装项目需要的所有依赖，并启动项目浏览。二、展厅-第一个页面内容展示。一、初始化 vite 项目。选择 Vanilla 模版。四、展厅 第三个页面。五、展厅-第四个页面。六、展厅-第五个页面。
基于three.js开发可视化应用经验总结
lovelygugu的博客
04-26 5358
文章目录背景简介技术方案介绍及对比WebglThree.jsWEBGL和Three.js的关系具体应用过程星空背景流线汇聚效果行政分区环形选择器Three.js 中使用TWEEN插件实现动画使用orbit controls插件（轨道控制）来控制模型交互动作通过THREE.RAYCASTER给模型绑定鼠标事件疑难问题分析及解决方案Canvas纹理贴图模糊场景中渲染顺序错误z-fighting问题透明渲染Three.js性能优化 背景简介 越来越多的应用已经不再满足于二维的数据可视化，追求效果更好的3D数据可视
常见可视化大屏编辑器有哪些？
前端-尔嵘
12-20 5892
乐吾乐Le5le大屏可视化设计器，零代码实现物联网、工业智能制造等领域的可视化大屏、触摸屏端UI以及工控可视化的解决方案。同时也是一个Web组态工具，支持2D、3D等多种形式，用于构建具有实时数据展示、监控预警、丰富交互的组态画面。拥有丰富的大屏组件和行业模板，能够快速搭建酷炫的2D和嵌入3D数据可视化大屏和数字孪生，携手打造数字化时代的前沿大屏应用。帆软可视化大屏是一款专业的大屏数据可视化工具，由北京帆软科技有限公司推出。
three.js应用在可视化大屏上，都能实现哪些动态效果?
最新发布
2401_87844781的博客
05-04 999
Three.js 是一个基于 WebGL 的开源 3D 图形库，它可以在网页上创建各种令人惊叹的 3D 场景和动画效果。Three.js 提供了丰富的 API 和工具，使得开发者可以轻松地创建复杂的 3D 模型、材质、光照和动画效果。跨平台性：可以在各种浏览器和设备上运行，无需安装额外的插件。高性能：利用 WebGL 的硬件加速功能，实现流畅的 3D 渲染。易用性：提供了简洁的 API 和丰富的文档，使得开发者可以快速上手。
【保姆进阶级】Three.js做一个酷炫的城市展示可视化大屏
热门推荐
ethanpu的博客
07-13 1万+
three.js酷炫的城市展示，保姆进阶级搭建~！
CityBuilder+DataV制作次世代3D城市大屏，一秒俘获甲方的心！
delouyou5212的博客
06-04 1020
还在制作上图这种千篇一律的数据大屏？OUT啦！酷炫的3D次世代数据大屏帮你一秒俘获甲方爸爸的芳心！ （上图来自ThingJS用户 云南唯恒基业科技有限公司） 今天就来教大家三维数据大屏！ 为了方便演示，我们来制作一个简单的三维城市与传统二维图表相结合的大屏，相信大家学习之后都能做出酷炫的三维大屏！ 先来看看结果： 所需工具 ThingJS平台：面向互联网的3D...
threejs三维地图大屏项目分享
netcy的专栏
11-09 9884
上面分享的三维地图大屏。echart使用json解析生成地图projection投影svg 解析生成三维地图模型动态材质修改贴图的offset和repeat算法等经纬度定位，双线性差值三维的三维坐标转平面坐标的投影算法最终多个技术的融合，做出了文章开头的效果。其中比较难的是中间三维地图的生成和效果优化方案，如果有类似需求的读者可以参考。如果你有好的经验，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。
使用CityBuilder搭建智慧城市3D可视化模型
qq_42739428的博客
10-17 7878
使用CityBuilder搭建智慧城市3D可视化模型，之前一直在使用各种3D可视化编辑器，发现无论做什么，如果不愿意花时间琢磨，怎么样做不好，这次我花了一天时间，学习了一下如何使用CityBuilder搭建智慧城市3D可视化模型，主要是看到了如下图模型，手痒之下就去了解了一番，好在不用下载任何软件，直接使用ThingJS网站准备的CityBuilder在线开发工具，就能完成一部分的3D智慧城市模型...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值