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

前言

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

数据准备

  1. 前端初始化项目
  1. 初始化工程文件

一共4个文件

初始化项目

  1. 添加工程文件

打开我们的cloud,没有下载的可以先去下载一下,导入acp文件。

  1. 添加资源文件

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

  1. 启动cloud

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

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

  1. 对接到前端

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

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

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

  1. 实例化DigitalTwinPlayer实例

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

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

问题

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

相关推荐
蓉妹妹7 分钟前
React+Taro选择日期组件封装
前端·react.js·前端框架
风口上的吱吱鼠10 分钟前
记录 ubuntu 安装中文语言出现 software database is broken
linux·服务器·前端
whltaoin17 分钟前
前端弹性布局:用Flexbox构建现代网页的魔法指南
前端·弹性布局
GISer_Jing1 小时前
前端工程化和性能优化问题详解
前端·性能优化
学渣y2 小时前
React文档-State数据扁平化
前端·javascript·react.js
njsgcs2 小时前
画立方体软件开发笔记 js three 投影 参数建模 旋转相机 @tarikjabiri/dxf导出dxf
前端·javascript·笔记
一口一个橘子2 小时前
[ctfshow web入门] web71
前端·web安全·网络安全
逊嘘2 小时前
【Web前端开发】HTML基础
前端·html
未脱发程序员3 小时前
【前端】每日一道面试题3:如何实现一个基于CSS Grid的12列自适应布局?
前端·css
三天不学习3 小时前
Visual Studio Code 前端项目开发规范合集【推荐插件】
前端·ide·vscode