小小组件解决三维场景视频投影大大烦恼！

飞渡科技DTS数字孪生引擎下载地址：www.freedo3d.com/download

新用户可以领取一个月的免费试用~~

在三维场景项目开发过程中，我们会遇到将监控视频等投射到三维场景的需求。可是在我们开发过程中，会面临一个挑战：如何将监控视频精准地投射到实景三维环境中，以达到更加真实和直观的监控效果。 要想精准的投射在三维场景中，是比较麻烦的，因为视频的投射效果受到高度、旋转、宽高比等多个要素的影响。所以，我这里写了一个组件，帮助大家在项目中更加高效地完成视频在三维场景中的投影效果，从而提升开发效率和最终呈现效果。

视频投影详解

在DTS中使用VideoProjection类实现代码添加视频投影。

属性

视频投影投射在三维场景中由这些属性共同影响最终效果。

1. 基础属性
   用于表示视频投影的相关信息。

   

   id用于表示视频投影的唯一标识；
   groupId用于分组管理视频投影；
   videoURL需要传入视频投影对应的路径，支持本地文件和网络文件，其中支持rtsp、rtmp、http协议的实时流媒体地址。

2. 影响投射效果属性
   这些属性用于设置观察点进行投射视频的成像效果。

   

   location指的是视频投影对应的投射的位置（观察点），可以通过在三维场景点击进行拾取坐标；
   rotation由[Pitch,Yaw,Roll]共同来决定。
   Pitch-俯仰：上下旋转角度，欧拉角向量的X轴，取值范围：(-90 ~ +90)。正值表示向上仰视，负值向下俯视；
   Yaw-航向：左右旋转角度，欧拉角向量的Y轴，取值范围：(-180 ~ +180) ；
   Roll-翻滚：翻滚角度，欧拉角向量的Z轴。Roll目前全局禁用，参数无效。
   以下面的飞机为例，Pitch指与水平方向的夹角，绕X轴旋转；Yaw指水平方向的机头航向，绕Y轴旋转；Roll指飞机的翻滚，绕Z轴旋转。

fov指的垂直夹角，也叫做视场角。fov越大，视野就越大；

aspectRatio宽高比，用于设置投影画面的宽度与高度之比，数值越大，高度越小；
distance 投影距离，也是远裁距离，用于决定观察点能够看到视频投影最远的距离； minDistance近裁距离，用于决定观察点能够看到视频投影最近的距离。

3. 其他属性

depthCulling背面剔除：用于设置是否启用剔除不可见面(遮挡面)。如果开启，投影只显示物体的前面，不显示后面，会剔除物体后面； frustumVisible是否显示投影线框：用于设置投影线框是否显示。

组件应用

我开发了一个小组件，大家可以通过调整小组件的参数来快速调整视频投影的投射效果。 ps：该视频并非该路段的监控视频，所以没有达到完全一比一贴合效果，仅用于展示该组件的使用。

这个小组件是个html，按照下面的使用步骤操作就可以轻松使用啦~~

该专题资源链接： pan.baidu.com/s/1KRjPkUcB…

使用步骤

1. 将组件/lib/aircity文件下的替换成本地Cloud的SDK的ac.min.js；

• 本地Cloud的SDK的ac.min.js获取方式：将SDK文件夹中的ac.min.js进行复制
• 将组件/lib/aircity的ac.min.js替换成复制的ac.min.js

2. 将‘视频投影.html’在浏览器中进行打开；
3. 将视频放入Cloud文件资源，并进行复制；
   
4. 点击‘获取位置’按钮进行激活拾取位置，点击对应的投射位置；
5. 将复制的视频投影路径进行粘贴至组件的视频投影路径；
6. 点击‘添加视频投影’按钮，进行添加视频投影；
7. 通过调节参数达到最终的效果；
8. 点击‘获取视频参数’按钮，会显示当前设置的参数详情。
9. 点击‘复制参数’按钮，则可直接复制相关参数，设置到代码中。

总结

这个视频投影组件非常友好且易于使用。可以轻松地调整各种参数值，如高度、旋转和宽高比等，直到达到想要的位置。只需调试复制代码，就可以在项目中轻松实现视频与三维场景融合效果啦！可以使用起来~~