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

简介: 带你读《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(); 


最终效果:


image.png


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


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


image.png

全景视频的控制


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



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

相关文章
|
11月前
|
存储 缓存 NoSQL
常见的 NoSQL 数据库有哪些?
常见的 NoSQL 数据库有哪些?
669 59
|
10月前
|
存储 缓存 网络协议
第五问:一个程序从点击到启动发生了什么?
一个可执行程序从用户点击启动到运行,经历了8个主要阶段:用户触发启动、操作系统查找文件、进程创建、可执行文件加载到内存、初始化程序上下文、执行程序入口点、程序运行和程序退出。涉及硬盘、内存、缓存等硬件交互。
217 0
|
云计算
金秋云创季 | 优惠拉满,11月1日零点开启
域名 / 商标 / 备案 / 建站 / 资质等企业应用商品优惠已拉满,往下滑,亮点提前知晓
555 0
16Linux - 文件管理(删除目录:rmdir)
16Linux - 文件管理(删除目录:rmdir)
74 0
|
算法
60天力扣打卡(第2天)
60天力扣打卡(第2天)
|
监控 网络协议 关系型数据库
函数计算访问 PostgreSQL 数据库
函数计算访问 PostgreSQL 数据库自制脑图
150 0
函数计算访问 PostgreSQL 数据库
|
消息中间件 存储 druid
【Druid】(二)Apache Druid 原理与架构剖析2
【Druid】(二)Apache Druid 原理与架构剖析2
360 0
【Druid】(二)Apache Druid 原理与架构剖析2