数字孪生-DTS-孪创城市-项目初始化

蘑菇头爱平底锅
794 阅读2分钟

前言

本篇文章我将介绍孪创城市这个项目在项目开发之前我们需要准备什么样的数据，以及怎么样将我们的云视频跑在我们的前端。特别声明，本系列文章适用于已经拥有vue基础的并且手头上还缺乏项目经验的同学，如果你对数字孪生也非常感兴趣，欢迎食用本系列教程，本系列主要讲解的是功能实现逻辑以及数字孪生场景交互部分内容的实操，本系列将不会讲解页面布局的书写以及echarts的书写。

数据准备

  1. 前端初始化项目

image-20250409171749812.png

2. 初始化工程文件 image-20250409172050832.png

一共4个文件

初始化项目

  1. 添加工程文件

打开我们的cloud，没有下载的可以先去下载一下，导入acp文件。 image-20250409173816084.png

  1. 添加资源文件

将我们acp可能会依赖的材质资源文件和前端可能会用到的一些静态资源放在文件资源中，一般是新建一个library文件夹用于存储。

image-20250409174439835.png

image-20250409174600080.png

  1. 启动cloud

image-20250409174945137.png

启动成功后即可在视频里测试中看见我们的视频流了

image-20250409175209974.png

image-20250409175224031.png

接下来每次打开我们的前端项目时，都必须先打开我们的cloud，在cloud中，提供了很多外链，比如api文档，样例集锦等大家可以点击看看。

  1. 对接到前端

打开我们的前端项目，运行npm i 下载依赖，如果不出意外应该时长这样，如果不是请检查报错，是不是node版本问题。

image-20250409175804112.png

可以发现视频流没有接入，那是因为缺少两个关键文件，需要在cloud中找到sdk导入到前端工程中。

image-20250409180042727.png

然后在index.html文件引入这两个文件，一个是打包优化后的sdk，一个配置文件，配置文件中的信息需要与cloud配置一致。

image-20250409181547811.png

  1. 实例化DigitalTwinPlayer实例

我们可以在cloud中找到了解二次开发，打开即可阅读开发文档。

image-20250409183045007.png

我们初始就封装了一个视频流组件，只需要在挂载前实例化DigitalTwinPlayer对象即可。

image-20250409182925763.png

问题

有的小伙伴可能会出现在前面打开了视频流测试，没有关闭这个客户端导致出不来，可以按照如下设置，允许多个客户端连接，由于这两个客户端连接到是同一个实例，所以当你在一个客户端控制时，另一个也会跟着变化。

image-20250409183803417.png

avatar
文章
阅读
粉丝