如何解决THREE.JS VideoTexture Safari框架加载
我目前正在研究一个项目,其中我将5个视频用于多个网格(大约20个)。我将每个视频附加到多个网格。之后,我将所有内容都设置在play()上。
this.frames.forEach((frame,i) => {
const geometry = new THREE.PlaneBufferGeometry(this.ratio * frame.scale,frame.scale,32)
const name = i
const x = this.setFramesPosition(frames,frame,i)
frame.src.currentTime = 0.1
frame.src.load()
for (let i = frame.clips - 1; i >= 0; i--) {
const texture = this.createTexture(frame)
const material = this.createMaterial(frame,texture)
const plane = this.createPlane(geometry,material,name,x,i)
canvas.scene.add(plane)
}
frame.src.play()
})
createTexture(frame) {
const texture = new THREE.VideoTexture(frame.src)
texture.minFilter = THREE.LinearFilter
texture.magFilter = THREE.LinearFilter
texture.format = THREE.RGBFormat
return texture
}
在Chrome和Firefox上,一切正常,如您在此视频的左侧所见(https://vimeo.com/450794717)。但是在Safari(在右侧)上,您可以看到它仅播放该行的前5个视频。视频的其余部分都是闪烁的越野车。
有人知道如何在Safari上修复此错误吗?
解决方法
我通过为每个帧而不是每个剪辑创建纹理来解决问题。
this.frames.forEach((frame,i) => {
const geometry = new THREE.PlaneBufferGeometry(this.ratio * frame.scale,frame.scale,32)
const texture = this.createTexture(frame)
const name = i
const x = this.setFramesPosition(frames,frame,i)
for (let i = frame.clips - 1; i >= 0; i--) {
const material = this.createMaterial(frame,texture)
const plane = this.createPlane(geometry,material,name,x,i)
canvas.scene.add(plane)
}
frame.src.play()
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。