how can i use a 360 video as background in three.js?

Question

i want to put a video like this: https://www.youtube.com/watch?v=qvOKJrij6ak

as the background for this site: http://dissevelt.herokuapp.com

Answer 1

Check out this:

https://threejs.org/docs/#api/textures/VideoTexture

and this:

https://threejs.org/examples/#webgl_materials_video

and this:

https://threejs.org/examples/webgl_video_panorama_equirectangular.html

and this:

Show Youtube video source into HTML5 video tag?

The default UV mapping of a THREE.SphereGeometry() works with a lot of 360 videos I've tried.. so make a THREE.Mesh(THREE.SphereGeometry(100,16,16),new THREE.MeshBasicMaterial({map:Your video texture},side:THREE.BackSide))

to make a video sphere of 100 units that only renders the inside of the sphere.