带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13) https://developer.aliyun.com/article/1243466?groupCode=taobaotech
ERP 全景视频渲染
ERP 全景视频的渲染与 EAC 全景图片的渲染主要差别在于：
1. ERP 使用的是球形投影
2. 全景视频使用的是视频纹理贴图
3. 视频的渲染需要媒体流输出
根据这几点不同，只要将上面的代码稍作改造，就可以实现 ERP 全景视频的渲染。
我们要渲染的全景视频如下：
改造步骤：
1. 使用球形替换立方体
- const geometry = new THREE.BoxGeometry( 1, 1, 1 ); + const geometry = new THREE.SphereGeometry(1, 32, 16);
2. 使用视频纹理替换图片纹理
- const textures = [ - 'https://img.alicdn.com/imgextra/i3/O1CN01LsO1Bk20QbKpFTUQr_!!6000000006844-0-tps-1500-1500.jpg', - 'https://img.alicdn.com/imgextra/i3/O1CN01uTWCLc1XOCOuA92H0_!!6000000002913-0-tps-1500-1500.jpg', - 'https://img.alicdn.com/imgextra/i4/O1CN016lU3YJ1JdrJuFTcWt_!!6000000001052-0-tps-1500-1500.jpg', - 'https://img.alicdn.com/imgextra/i2/O1CN01nYe2Mn1ohkmBVyKpp_!!6000000005257-0-tps-1500-1500.jpg', - 'https://img.alicdn.com/imgextra/i4/O1CN014TNffn1nlaTfA98Fg_!!6000000005130-0-tps-1500-1500.jpg', - 'https://img.alicdn.com/imgextra/i1/O1CN01sS5m781ya6JgLSaVk_!!6000000006594-0-tps-1500-1500.jpg', - ]; + const video = document.createElement('video'); + video.muted = true; + video.src = 'https://example.com/panorama.mp4'; + const texture = new THREE.VideoTexture(video); - const materials = []; - for (let i = 0; i < textures.length; i ++ ) { - const textureLoader = new THREE.TextureLoader(); - materials.push( new THREE.MeshBasicMaterial({ map: textureLoader.load(textures[i]) })); - } + const material = new THREE.MeshBasicMaterial( { map: texture } );
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(15) https://developer.aliyun.com/article/1243464?groupCode=taobaotech
