Hello everyone,
I am trying to build a gallery with three.js where images and videos will be displayed.
I have follow the instructions to add videos as textures in three, but it is not working.
I have tried to follow this example but I do not get what is wrong, any idea?
Here is where I used the method of VideoTexture:
const video = document.getElementById(‘video-1’)
video.play()
for (let i = 0; i < this.query.length; i++) {
const thumbWidth = this.query[i].thumbnail.width || 2200
const thumbHeight = this.query[i].thumbnail.height || 1500
const thumbTitle = this.query[i].titulo
const geometry = new THREE.PlaneGeometry(thumbWidth / 6, thumbHeight / 6)
const texture = this.query[i].thumbnail.ext === '.mp4' ? new THREE.VideoTexture(video) : new THREE.TextureLoader().load(this.query[i].thumbnail.url)
const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: texture, name: thumbTitle, color: '0x000088' })
const mesh = new THREE.Mesh(geometry, material)
...
}
Thank you very much in advance.