UE4从零开始制作数字孪生道路监测平台(ue4ui界面制作)

UE4从零开始制作数字孪生道路监测平台 UE4从零开始制作数字孪生道路监测平台

推荐整理分享UE4从零开始制作数字孪生道路监测平台(ue4ui界面制作)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:ue4制作ui,ue4实例教程,ue4实例教程,ue4教程,ue4教程,ue4教程,ue4制作ui,ue4ui界面制作,内容如对您有帮助，希望把文章链接给更多的朋友！

UE4集成Cesium for Unreal和WebSocket，后端使用NodeJs搭建服务器进行数据模拟和真实数据实时转发。

1：新建UE4项目并集成Cesium for Unreal

Cesium for UE4插件解锁了虚幻引擎中的3D地理空间生态系统。通过将高精度全尺寸WGS84 globe、开放API和空间索引开放标准（如3D图块）以及基于云的真实世界3D内容与虚幻引擎的强大功能相结合，我们将能够使用游戏引擎创建利用真实世界内容的地理空间应用程序的新时代。

1.1：获取Cesium for UE4 插件先安装UE4引擎，需要4.26及以上的，我之前用的是4.25.4，现在需要换成4.26.2。插件地址：Cesium for Unreal in Code Plugins - UE Marketplace (unrealengine.com)登录epic账号，点击页面中的Free之后再点击在启动浏览器打开，就会自动启动Epic Games Launcher。下载这个插件即可1.2：使用&加载插件

创建好一个游戏项目

加载该插件

进入到程序，转到 编辑-> 插件并在插件窗口右上角的插索栏中搜索"Cesium"，确保选中插件的启用复选框

在编辑→项目设置→自动曝光 来修改曝光

然后把初始场景中的所有对象都删除

Ctrl+S保存关卡，取一个名字addam-cesium

打开菜单编辑->项目设置，再选择项目->地图和模式。将编辑器开始地图和游戏默认地图设置为刚创建的关卡addam-cesium。这样可以确保在重新启动虚幻编辑器时自动重新打开您的关卡。

1.3：添加SunSky照明和DynamicPawn

在内容管理器右下角→视图选项中打钩显示引擎内容和显示插件内容

在内容中搜索CesiumForUnreal以打开CesiumForUnreal内容

CesiumSunSky蓝图给室外场景增加了炫酷的天阳光照明，它扩展了内置的SunSky蓝图，让它跟真实地球上的太阳光一模一样。

添加Cesium的太阳光，一定要用Cesium的不能用自己的太阳光。

同样，Cesium的DynamicPawn扩展了内置的DynamicPawn，使其能在地球上任意移动，并允许使用鼠标滚轮控制移动速度，特别是距离地面很远时非常有用（用键盘WSAD前后左右移动，鼠标控制方向，滚轮控制移动速度）。

当视角在Cesium地球上方的不同位置之间飞行时，照相机应遵循与地球表面平行的弯曲路径，而不是线性的点对点飞行轨迹。Cesium的FloatingPawn就是做这个用的，它确保你从地球的一边飞到地球的另外一边时，向上的方向始终从地球的球心指向天空（直观的理解就是：因为地球是园的，不是平的，所以虚幻引擎默认的相机移动方式就不行了）。

在此之后需要设置玩家为玩家0

1.4：连接到Cesium ion并创建一个地球

点击Connect按钮，连接到Cesium ion。这时浏览器会自动打开，要求您允许Cesium for Unreal使用Cesium ion中当前登录的帐户访问您的资产：

通过单击工具栏中的Cesium按钮来打开Cesium面板。在Quick Add中，单击Cesium World Terrain + Bing Maps Aerial imagery右侧的加号（可以随意添加其他Cesium World Terrain + imagery组合之一）。 、

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0h1pw3CQ-1675041397096)(UE4从零开始制 作数字孪生道路监测平台.assets\1671092251066.png)]

此步骤将在世界大纲视图中生成新的Cesium World Terrain和CesiumGeoreference蓝图对象。

如果场景太暗，请调整CesiumSunSky对象上的Solar Time属性，比如设置一个美丽的日落场景。您可能还想更改时区Time Zone。

1.5：加载本地3Dtiles（1）加载本地3Dtiles

再已经构建好的地图上添加Blank 3D Tiles Tileset，这步操作将往场景中添加一个新的、空白的Cesium3DTileset Actor。 之后世界大纲视图就会出现这个，改个名字，我的是改成AddamTileset

双击再细节页面就会出现详细信息

Source改成From Url

下面Url改成本地文件地址，我的是

D:\GameProject\MyModel\nantaizihu\tileset.json就得改成file:///D:/GameProject/MyModel/nantaizihu/tileset.json

file:///D:/GameProject/MyModel/nantaizihu/tileset.json

http://139.9.62.222/static/nantaizihu/tileset.json

在细节面板中调整LocalTileset的位置Location，将其放置在需要的地方。例如，要将3D Tileset贴在地形上，请将Location的Z坐标更改为7400。

接下来在世界大纲视图中找到CesiumGeoreference，双击细节面板上点击Place Georeference Origin Here，这个会校准我们的世界起始位置的经纬度，并且把相机DynamicPawn的位置重置为（0，0，0）

目前Cesium for Unreal不支持加载本地quantized-mesh地形文件。但是，可以从任何服务器（包括本机localhost）加载地形资产。要完全离线加载地形资产，请考虑设置本机localhost地形服务。可以使用与上述相同的步骤，用http://localhost:portNumber/terrainAsset设置Url属性。

PS：也可以考虑使用Cesium的Ion功能，将3D地图上传到Cesium官网

My Assets | Cesium ion

然后UE4中

（2）使用制图多边形隐藏切片集的某些部分

现在虽然3Dtiles加上了，但是会有问题，类似于这种地方其实是Cesium初始地球地形穿模导致，这个时候我们可以使用制图多边形隐藏切片集的某些部分。

首先添加和塑造多边形

参与者添加到关卡。您可以通过在“放置Actor”面板中搜索并将其拖动到关卡中来查找该Actor，或者只需单击一下即可从“Cesium快速添加”面板中添加它。

该执行组件看起来像一个方形样条，在闭合环中具有四个控制点。目前，样条曲线只能是线性的，并且不允许使用曲线。这样可以更快地进行栅格化。

可以选择一个点移动该点位置，要移动其中一个点，请在视口中单击该点以选择该点。使用变换小控件更改其位置。

若要添加新点，请按住键盘上的 alt 键，然后在按住 alt 键的同时移动一个点。将创建一个新点。也可以右键单击样条线点，然后选择“重复点”。 Alt+鼠标左键选择一个点，之后复制一个点，然后四边形就变成五边形了。

让这个和模型边缘贴合（因为模型部分就不需要加载Cesium地球底图了），在和模型契合的时候可以把这个线换个颜色。

要删除某个点，请右键单击该点，然后选择“删除点”。

创建多边形的更多提示和技巧：

制图多边形是 2.5D 的，因此它将影响样条点下方和上方的所有内容。因此，它不适用于垂直剪裁，例如切掉建筑物侧面的窗户。样条点的精确 Z 位置无关紧要，只有 X 和 Y 位置才重要。为了最精确地放置多边形，请尝试使样条点尽可能靠近切片集的表面。您可以在“详细信息”面板中更改样条曲线的颜色。查找**编辑器“未选择的样条线段颜色”**参数。

之后将多边形连接到切片集

选择自己想要去除该部分的蓝图，我选择的是Cesium World Terrain（Cesium的地球地图）

点击添加组件搜索Cesium Polygon Raster Overlay

给这个Cesium Polygon Raster Overlay 添加一个Polygon并设置为刚才的Blank 3D Tiles Tileset。

最终效果就完成啦。

1.6：去除Cesium的logo

这个Cesium的logo一运行就会有

我们找到CesiumCreditSystemBP，编辑蓝图

在细节面板搜索Credits Widget Class，改成none。改了之后由于没有这个了Cesium会出点问题，但是不影响整体运行。

1.7：最终效果呈现

2：关卡蓝图添加WS通信并设计车辆蓝图类

2.1：集成HTTP & WebSocket Helper

也可以使用源码直接编译的方式

链接：https://pan.baidu.com/s/1pxO0farSSNki6O-o5J5jEg 提取码：ougf

可以去我分享的百度网盘下载库文件，然后引入把文件夹解压放到UE_4.26\Engine\Plugins下。然后重启UE搜索HTTP就有这个了。

2.1：介绍一下HTTP & WebSocket Helper1）WebSocketOptions

创建一个蓝图类Actor

在时间图表中，创建一个创建WebSocketOptions，这个

Protocol可以选择是ws还是wss

Url就输入ws的地址和端口，例如我的测试端口就是127.0.0.1:8800

该节点输出就是WebSocketOptions

2）AsyncWebSocket

后面再连接一个AsyncWebSocket，异步节点，用于使用指定的协议和标头建立 websocket 通信 .

输入是：WebSocketOptions ，输出就是WebSocketResult

比如我们现在的需求是，创建连接页面上输出Hello，之后有消息过来就把这个消息给输出到页面，如果连接关闭输出一个“连接失败”。

这个时候需要另一个节点Break WebSocketResult

3）HTTP & WebSocket Helper节点汇总Node输入输出NoteCreateWebSocketvoidWebSocketHandler将处理程序保存到变量中以便于访问BindEventToOnConnectedCallback Eventvoid连接到对等方时调用BindEventToOnConnectionErrorCallback EventErrorReason(String)连接发生错误时调用BindEventToOnClosedCallback EventCode(Int), Reason(String), ClosedByPeer(Bool)当通信因错误或对等方关闭时调用BindEventToOnTextMessageCallback EventMessage(String)接收对等方短信时调用BindEventToOnByteMessageCallback EventMessage(Array(Byte))在接收对等方的原始消息时调用，无论是文本消息还是二进制消息BindEventToOnConnectionRetryCallback EventRetryCount(Int)在出错后重试打开通信时调用BindEventToOnMessageSentCallback EventMessage(String)发送短信时调用OpenWebSocketOptionsResult(Bool)尝试打开连接，如果 websockethandler 发送了 open 命令，则返回 true，要知道连接是否成功建立，请将事件绑定到 OnConnectedCloseCode(Int), Reason(String)Result(Bool)尝试关闭连接，如果 websockethandler 发送了 close 命令，则返回 true，以了解连接是否已终止，将事件绑定到 OnCloseIsConnectedvoidResult(Bool)告知 Websockethandler 是否与对等方进行了打开的通信SendBytesData(Array(Byte)), IsBinary(Bool)Result(Bool)尝试通过通信发送字节SendTextData(String)Result(Bool)尝试通过通信发送字符串2.2：编写蓝图函数实现Json字符串转Json1）创建一个C++类AddamCar

新建一个AddamCar的C++Actor类，记得设立为公有函数

在AddamCar.h文件中添加几个属性和一个方法

// EditAnywhereUPROPERTY(Category = "AddamCar", BlueprintReadOnly)float lon = 114.0;UPROPERTY(Category = "AddamCar", BlueprintReadOnly)float lat = 30.0;UPROPERTY(Category = "AddamCar", BlueprintReadOnly)float azimuth = 100;UFUNCTION(Category = "AddamCar", BlueprintCallable)void String_json(FString addad);

在AddamCar.cpp中实现这个方法

先include几个必要的包，这里使用到的包是rapidjson

#include <string>#include "rapidjson/document.h"#include "rapidjson/writer.h"#include "rapidjson/stringbuffer.h"

然后实现上面定义的String_json函数

void AAddamCar::String_json(FString addad){std::string lll(TCHAR_TO_UTF8(*addad));const char* json = lll.data();rapidjson::Document d;d.Parse(json);// 2. 利用 DOM 作出修改。// Value& s = d["longitude"];// s.SetInt(s.GetInt() + 1);lon = d["data"]["vehicleInfo"]["longitude"].GetDouble();lat = d["data"]["vehicleInfo"]["latitude"].GetDouble();azimuth = d["data"]["vehicleInfo"]["azimuth"].GetDouble();}2）C++类生成汽车的FBX模型

接下来右键改C++文件，创建基于AddamCar的派生类

之后找到一份小车的模型拖入任务管理器新建好的文件夹内

双击刚才生成的蓝图打开完整的蓝图编辑器

把转好的小车模型拖入蓝图的视口中

2.3：关卡蓝图接收数据

车辆信息以cjson格式上报的websocket服务器，然后服务器转发给UE4客户端，整体格式如下：

{ type:数据类型标识 timestamp：时间 id:车辆唯一id data:{ vehicleInfo:车身基本信息 roadPoints:路径点集合 }}1）编写setPosition函数修改车辆位置

现在关卡蓝图中创建一个函数名叫setPosition，用于移动AddamCar模型

我们一起来解读一下这个蓝图函数

先把AddamCar刚才设置的全局变量Lat和Lon以及高度一起创建向量，并使用CesiumGeoreference的Inaccurate Transform Longitude Latitude Height to Unreal方法把这个Vector转化为Unreal坐标，并设置位置。

后面的设置旋转就直接设置z轴旋转就好，很简单就不说了。

2）关卡蓝图创建WebSocket连接并使用setPosition

还是先看蓝图

事件开始运行的时候创建连接，并在连接成功时打印WebSocket连接成功，在连接出错活失败时打印WebSocket连接失败。

当有数据过来时可以获取数据并作为参数调用AddamCar里面写的String Json函数，把Json解析把经纬度赋给全局变量，之后判断消息类型，固定消息调用调用setPosition函数。

-------第一阶段小总结----------------------------------------------------------------------

这一阶段实现了车辆在路上跑，就跟随实时数据进行实时仿真，但是会有很大的问题，UE4的浮点数实际能精确到的只是小数点后6位，只有单精度浮点数，经纬度的小数点后6位会带来最大10cm的误差，这导致显示效果在屏幕上会看着很卡。Inaccurate Transform Longitude Latitude Height to Unreal前面的Inccurate是不精确的，所以之后只能编写C++函数来进行数据的转化，就直接传入转好的坐标，Unreal坐标1是1cm，所以小数点后六位精度肯定是绰绰有余。

3：解决数据精度不够的问题3.1：修改Cesium源码添加函数

不想修改的可以直接下载我修改好的库文件源码

链接：https://pan.baidu.com/s/1-1VcOakrbiwXtn0gsrJAig 提取码：o6cf

UE4 的蓝图的精度现在只局限在float（16位），如果要来表示经纬度，它的精度是远远不够的。但是double（32位）来表示我们的经纬度却绰绰有余，我们如何能够保证在使用蓝图的时候，也能够用足够的精度来表示经纬度呢？

我们的都知道C++代码其实是可以用double双精度，于是就可以想到用C++来写两个我们蓝图可以调用的函数，以实现UE4与经纬度之间的转化，怎样实现呢？由于蓝图中不能出现double，那我们可以转变下思路，在蓝图中将经纬度用字符串的形式来表示。

我们需要写两个函数，一个将虚幻的坐标转化为经纬度的字符串，一个将经纬度的字符串转化为虚幻的坐标，这些函数都是在C++中实现的（因为只有在C++代码中才可以使用double），这两个函数的代码如下：

// 将ue坐标转化为经纬度字符串FString ACesiumGeoreference::AccurateTransformUnrealToLongitudeLatitudeHeightString( const FVector& ue) const{ glm::dvec3 llh = this->_geoTransforms.TransformUnrealToLongitudeLatitudeHeight( glm::dvec3(CesiumActors::getWorldOrigin4D(this)), VecMath::createVector3D(ue)); return FString::SanitizeFloat((double)llh.x)+","+ FString::SanitizeFloat((double)llh.y)+","+ FString::SanitizeFloat((double)llh.z); }// 将经纬度字符串转化为ue坐标FVector ACesiumGeoreference::AccurateTransformLongitudeLatitudeHeightFStringToUnreal(const FString& sLongitudeLatitudeHeight) const{ TArray<FString> stringArray; sLongitudeLatitudeHeight.ParseIntoArray(stringArray, TEXT(","), false); glm::dvec3 TargetLongitudeLatitudeHeight = glm::dvec3(FCString::Atod(*stringArray[0]), FCString::Atod(*stringArray[1]), FCString::Atod(*stringArray[2])); glm::dvec3 t = TransformLongitudeLatitudeHeightToUnreal(TargetLongitudeLatitudeHeight); return FVector(t.x,t.y,t.z);}

其中我们需要CesiumGeoreference中的两个函数，所以我直接将两个转化函数写到了CesiumGeoreference的源码里边的，大家如果不想该Cesium for Unreal的源码的话，可以写一个蓝图库函数，将reference作为参数传入，然后再调用了TransformLongitudeLatitudeHeightToUnreal之类的精确转化函数。Cesium插件也给我们提供了一个叫GetDefaultReference（），可以直接获取当前关卡的CesiumGeoreference。

由于我们需要直接在蓝图中对这两个函数进行调用，我们在.h文件中