ITPub博客

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

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

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

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

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

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

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

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

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

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

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

先理解一下概念：事件，就是用户或者是浏览器执行的某种动作。例如：click、load等都是事件的名字。事件处理程序，就是响应事件的函数。事件处理程序的名字是以“on”开头的。例如：事件 click ---> 事件处理程序 onclick（事件处理程序一般都是小写字母）。ThingJS 系统内置了很多事件，比点击鼠标、键盘输入、层级变化等。可以监听这些事件，在事件回调中进行相应的业务逻辑处理。

1. 导航标注动画定制2. 第一人称动态导航3. 多楼层导航模式4、楼层展开功能推介搭建数字孪生可视化场景过程中有这样一个问题:如何确定数字孪生可视化场景中的行动路线是否合理？当然可以创建几个按钮对应查找需要去的位置并聚焦，但是按钮并不是很炫酷也不能很好的反馈一些信息。接下来就用室内导航来解决这一问题。为什么需要室内导航？据研究表明，人的一生当中有80%-90%的时间都是在室内度过的。我们在自己家

1、 通过属性和接口获取鼠标拾取（Pick）的物体2、 通过事件获取鼠标拾取的物体3、 区域 Pick 物体4、 pickedResultFunc设置拾取对象回调函数在开发数字孪生可视化场景应用时经常会用到拾取功能，顾名思义，在数字孪生可视化场景中拾取就是判断一个数字孪生可视化场景中哪个对象被点击。数字孪生可视化场景中的模型非常多，不可避免需要一些交互效果。比如当点击某一个模型的时候做出反馈动作，

说到爆炸图你第一时间想到的是什么？是这样吗？不不不，爆炸图现在一般指立体装配图，有了爆炸图工程技术人员在绘制立体装配示意图时就显得轻松多了，不仅提高了工作效率还减少了工作的强度。如今这项功能不仅仅是用在工业产品的装配使用说明中，而且还越来越广泛的应用到机械制造中，使加工操作人员可以一目了然，而不再像以前一样看清楚个装配图也要花上半天的时间。如何能更简洁地表述产品装配关系？能够让所有人一秒看懂产品各

3D可视化，是目前非常热门的方向。所谓“文不如表，表不如图”，3D可视化具有丰富的展示形式和效果，美观和设计感也成了当下3D可视化行业越来越重视的部分。在3D可视化场景中利用颜色可以对场景内不同信息做出区分，吸引注意力以及加强标识等。使用不当不仅不够美观，还可能会造成一些不必要的歧义。可视化审美的标准有四大要素：新颖、充实、高效和美观。如何通过颜色，既要美观又要突出重点，今天就来分享一下3D可视化

1、 动态创建组合场景2、 加载后的楼层和建筑对齐3、 预知未知加载场景的物体结构对于一些大型的3D可视化场景，使用 CampusBuilder 直接制作会比较困难，直接加载也存在性能、加载时间等问题。解决这个问题首先在CampusBuilder 中可以分成多个工程进行搭建，比如园区和所有建筑的外立面使用一个独立的工程进行搭建，每栋建筑的室内分别使用其他独立工程进行搭建。但是在搭建过程中需要注意每

1、开启场景层级控制2、父子树和分类对象属性树3、切换场景层级在3D可视化场景中加载园区后系统会自动创建园区、建筑、楼层、房间等物体对象，这些对象也自然把场景分成了不同的层级，场景提供了层级结构，可以通过我下面介绍的方法，来控制场景层级。那么层级结构有什么用呢？可以更方便管理和查询到场景中物体；可以批量操作物体，比如移动父物体可以带着孩子一起移动等等。1、开启场景层级控制首先将下面的代码输入到项目

1、 获取模型动画2、 播放模型动画3、 停止播放模型动画在搭建3D可视化场景的过程中，我发现很多模型都有内置动画，很多模型在制作阶段就内置了动画，如果模型有内置动画，可以在 ThingJS 中利用 API 调用播放这些动画。比如官方示例中通过 dbclick 事件来控制机柜开启，click 事件来控制鼠标右键关闭机柜。1、获取模型动画首先通过 animationNames属性获取3D可视化模型都

1、 世界坐标系2、 父物体坐标系3、自身坐标系要想控制一个3D可视化对象的空间位置，首先需要理解空间坐标系。在 ThingJS 开发平台中，使用右手坐标系，横轴为 X 轴和 Z 轴，竖轴为 Y 轴（ThingJS 获取的位置坐标 [x, y, z] 的单位均为米）。描述或控制一个3D可视化物体的位置，在不同情况下，会分别使用以下 3 套坐标系统：1、世界坐标系2、父物体坐标系3、自身坐标系。下面