带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(15)

带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(14) https://developer.aliyun.com/article/1243465?groupCode=taobaotech

3. 使用球形和视频纹理的材质初始化网格并添加入场景

- const box = new THREE.Mesh(geometry, materials);
+ const sphere = new THREE.Mesh(geometry, material);
- scene.add(box);
+ scene.add(sphere);

4. 启动视频播放，Three.js 将捕获视频的媒体流并渲染：

+ video.play(); 

最终效果：

基于前端技术的视频封面生成

接下来我们还需要实现「根据参数驱动视野变更」（模拟上面的点击拖动效果）和「将画面生成为新的视频」并上传到后台。

全景视频的控制

前面讲到，我们的封面视频，需要安装一定的规则来改变视野画面。该规则可以由小二在后台来配置，也允许商家进行调整。回顾一下我们的默认规则：视频画面定位到视频中间的位置，视频播放过程中，视角向左移动 20 度（2 秒），回到中间（2 秒），向右移动 20 度（2 秒），回到中间（2 秒）。总共生成时长为 8 秒的封面视频。

带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16) https://developer.aliyun.com/article/1243463?groupCode=taobaotech