51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课 免费课 排行榜 短视频 直播课 软考学堂
全部课程 软考 信创认证 华为认证 厂商认证 IT技术 PMP项目管理 免费题库
在线学习
文章 资源 问答 课堂 专栏 直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库

3D地图与3D柱状图联合使用

给3D地图添加3D柱状图使用的功能原理是在地图上加上圆柱对象，可以用颜色和高度分别代表分类和值大小，根据需要将柱状图放置到指定位置即可。3D地图与3D柱状图联合使用，效果大概是这样： 注：根据你项目需求的不同，需要的可能是整个中国的地图数据，也可能是某个省的，市的，县的，区的等，这时怎么办？ 1. 去网上搜有很多，但是可能数据不全，或者会员才能下载。 2、CityBui

可视化
前端
数字孪生
地图
原创 精选 2021-07-30 13:34:48 4046 阅读

通过创建GeoLine给地图添加烟花图效果

除了提供多种类型的模型外，还预置了多种粒子效果，包括：水、火、烟、雨、雪等，每种粒子效果按照不同的使用场景又有多种表现形式，可以满足在不同的天气条件下数字孪生可视化场景中的情况。那能不能在数字孪生可视化地图上添加效果呢？下面我就通过创建GeoLine（地理线）给数字孪生可视化地图添加烟花图效果。 几个关键点： 1. 烟花的火花颜色，大小，位置这三个变量。 2. 烟花飞出

可视化
数字孪生
地图
数据
原创 推荐 2021-07-29 15:38:04 3168 阅读

从零开始学习3D可视化之项目部署

项目部署，也就是将完成的数字孪生可视化项目发布，在互联网上可以访问到。作为一个合格的程序猿，仅仅会打代码还是远远不够的，项目的部署也是必须要会的操作，也就是所谓的上线，将我们本地开发好的数字孪生可视化项目部署到远程服务器上，可以通过远程服务器的公网ip或者域名加上端口号访问到我们的数字孪生可视化项目。ThingJS项目部署分为在线部署和离线部署。 首先，我先给大家捋一下两个项目部署的流程：

可视化
数字孪生
部署
前端
原创 2021-07-27 16:37:13 2292 阅读

从零开始学习3D可视化之演示项目

数字孪生可视化项目开发过程中的每个环节都很重要，都必须认真对待。数字孪生可视化场景开发完成后，进行分享或者演示已完成的项目是必不可少的。ThingJS提供三种方式供项目演示和分享已完成的项目：电脑分享；手机分享；iFrame 分享。 你可以通过以下步骤演示和分享数字孪生可视化项目： 1. 选择资源 - 我的项目，在弹出的面板中，即可查看自己所有数字孪生可视化项目。点击设置按钮，可以对项目

可视化
前端
数字孪生
原创 2021-07-26 14:36:09 2436 阅读

从零开始学习3D可视化之数据对接（3）

MQTT是ThingJS平台支持的四种数据对接方式之一，MQTT又称Message Queuing Telemetry Transport，消息队列遥测传输，是 ISO 标准（ISO/IEC PRF 20922）下基于发布 (Publish)或订阅 (Subscribe)范式的消息协议，可视为“资料传递的桥梁”。MQTT是一个轻量级协议，使用MQTT协议的中心是broker（服务器/代理），客户

可视化
数字孪生
数据
前端
原创 精选 2021-07-23 15:41:58 4329 阅读

从零开始学习3D可视化之数据对接（2）

在日常使用的互联网产品中，很多都是前后端数据的交互来完成的，说到数据交互就不得不提Ajax和WebSocket，它们可是数据交互的利器，那么它们分别是什么？Ajax上篇文章已经讲过了，那WebSocket又是什么呢？ WebSocket 是 HTML5 一种新的协议，实现了浏览器与服务器之间的全双工通信。 为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTT

可视化
数字孪生
前端
数据
数据对接
原创 精选 2021-07-22 14:18:52 2939 阅读

从零开始学习3D可视化之数据对接（1）

基于数字孪生可视化场景，使用在线开发或离线开发SDK进行数字孪生可视化场景开发完毕后，在所开发的数字孪生可视化可视化应用中，对接物联网或业务数据，实时驱动数字孪生可视化场景动态变化或图表数据更新。ThingJS支持以下四种数据对接方式，可与第三方物联网系统进行通信（数据传输），分别为Ajax、JSONP、WebSocket、MQTT。 数据对接_Ajax 即“Asynchronous Jav

可视化
数字孪生
3D
前端
原创 精选 2021-07-20 14:18:36 2674 阅读

从零开始学习3D可视化之2D界面

在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的，3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面，下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素，创建2D界面时需要将元素插入到 div2d。 创建 UIAnchor UIAnchor可以把 2D html 界面连接到 3D 物体上，跟随 3D 物体移动。

可视化
物联网
数字孪生
3d
原创 精选 2021-07-19 14:55:38 4060 阅读

从零开始学习3D可视化之3D界面

生活中我们经常会说到3D，比如3D游戏、3D电影等等。3D指三维，三个维度、三个坐标，即长、宽、高。换句话说，就是立体的，3D的空间的概念是由X、Y、Z三个轴组成的空间，是相对于只有长和宽的平面（2D）而言。2D又叫平面图形，图形内容只有水平的X轴向与垂直的Y轴向。而一直以来在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的，3D“容器”提供了3D和2D的界面展示能力。 Th

JavaScript
原创 精选 2021-07-16 10:00:43 4104 阅读

从零开始学习3D可视化之摄像机“最佳看点”

在数字孪生可视化场景中，当摄像机看向目标物体时，一般将物体中心点作为 “看点” 的 target 位置。我理解的就是像我们拍摄时摄像机看向物体的最佳角度。 可以通过相对于目标物体的坐标系下 x 轴旋转角度、 y 轴旋转角度以及距目标物体“中心”的距离来确定一个位置，作为“看点”的 position 位置。 比如，当（ x 轴旋转角度， y 轴旋转角度，距离）=（0,0,1）时，是在正朝向

可视化
数字孪生
3d
前端
原创 2021-07-14 15:37:28 2562 阅读

从零开始学习3D可视化之摄像机自由飞行

我学习数字孪生可视化有一小段时间了，第一个制作目标就是在数字孪生可视化场景中实现一个自由飞行的摄像机。使用WSAD键控制摄像机的前后左右移动，使用QE控制摄像机的升降。 这个功能比较简单，代码也一目了然，不做过多解释了，直接上代码吧。 var app = new THING.App({ url: 'https://www.thingjs.com/static/models/sto

可视化
物联网
数字孪生
3D
原创 2021-07-13 16:47:10 2452 阅读

从零开始学习3D可视化之摄像机投影方式

我们看到的3D 画面其实是计算机把三维空间中的物体从世界坐标系通过各种复杂的计算投影到屏幕坐标系，并显示在视口中。再说的简单一些，就相当于拿着手机拍了一张照片，放到了窗口里面显示出来。 生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。 空间几何体转化为一个二维图的过程就是投影，不同的投影

可视化
数字孪生
前端
原创 2021-07-12 15:17:54 2528 阅读

从零开始学习3D可视化之摄像机

数字孪生可视化场景中的摄像机，与大家拍照时使用相机的功能相似，数字孪生可视化场景中用摄像机来确定观察 3D 场景的视角。摄像机包含两个重要的位置参数：镜头位置 position 和被拍摄物体的位置 target (又叫目标点)。 1、设置摄像机位置 将下面的代码输入到项目文件中，获取当前摄像机 camera 的 position 和 target 属性，就可以得到数字孪生可视化场景中摄像机的

可视化
前端
数字孪生
物联网
原创 精选 2021-07-09 16:17:52 2953 阅读

教你给场景添加天空盒，超简单！

在数字孪生可视化场景中，如果要更换场景天空，例如白天、黑夜、雾霾效果等，这个时候可以考虑采用天空盒技术。可以为数字孪生可视化场景里添加上一片逼真的天空，使得世界更加美丽真实。 天空盒是一个包裹整个场景的立方体，可以很好地渲染并展示整个场景环境。天空盒其实就是将一个立方体展开，然后在六个面上贴上对应的贴图，在实际的渲染中，将这个立方体始终罩在数字孪生可视化场景摄像机的周围，让数字孪生可视化场景

可视化
数字孪生
物联网
前端
天空
原创 精选 2021-07-08 15:07:04 7149 阅读

简单四步学会在数字孪生可视化场景中创建小地图！

众所周知，小地图在游戏中是至关重要的，小地图用于显示周围环境信息。在数字孪生可视化场景中小地图也是经常应用于场景中的，用来显示地图或者当前场景的视角。首先，小地图是以主角为中心的。其次，小地图上应该用图标来代替真实的人物或者物体模型，因为小地图通常很小，可能无法看清真实的模型。 创建小地图的方法网上有很多种，这里我使用ThingJS来实现数字孪生可视化场景的小地图的功能，可以用来显示地图或者

可视化
数字孪生
前端
地图
原创 精选 2021-07-07 14:26:41 3283 阅读

手把手教你实现聚光灯效果

聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线，这与我们现实中看到的聚光灯是一致的。其灯光从一点发出，沿着某一个方向照射出一个锥形光照范围。聚光灯近似于一个有夹角范围限定的点光源。聚光灯可用于数字孪生可视化场景中模拟舞台、汽车车头灯，手电筒，台灯等光源效果，可添加至3D容器、摄像机等对象下方，对其中所有对应的数字孪生可视化对象生效。 在数字孪生可视化场

可视化
数字孪生
灯光
前端
原创 精选 2021-07-06 14:36:05 3420 阅读

从零开始学习3D可视化之事件卸载、事件暂停

事件就是用户或浏览器自身执行的某种动作，而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，比如 click 事件的事件处理程序就是 onclick。下面我将继续学习数字孪生可视化场景中如何卸载事件、暂停和恢复事件、自定义事件。 卸载事件 如果内存中保留大量无用的事件处理程序，会影响性能。所以一定要在不需要的时候及时移除事件处理程序。

可视化
数字孪生
前端
技术
学习
原创 精选 2021-07-02 10:19:58 3215 阅读

从零开始学习3D可视化之事件的常用方法

1、 绑定事件并添加条件 2、 同一个事件注册多个回调 3、 tag 标签 4、 设置事件优先级 5、 注册单次事件 事件不会自己执行，需要触发(即事件被触发之后才可执行)。审视任何JavaScript代码的核心，你会发现正是事件是把所有东西融合在一起。下面我学习了一些在数字孪生可视化场景中事件的常用方法。 1、 绑定事件并添加条件 事件添加了条件，只有在符

可视化
前端
数字孪生
3D
原创 2021-07-01 14:05:33 2253 阅读

Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

关于我们
官方博客 全部文章 热门标签 班级博客
了解我们 网站地图 意见反馈
友情链接
鸿蒙开发者社区 51CTO学堂
51CTO 软考资讯