How do I render a video on sphere in THREEJS

We can render an image on a sphere as seen in the code below

Example: Create a glob out of world map

import * as THREE from '';
const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera( 
        window.innerWidth / window.innerHeight,
        1000 );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      const sphere = new THREE.Mesh(new THREE.
        SphereGeometry(5,50,50),new THREE.
          map: new THREE.TextureLoader().load('./img/img1.jpg')
      scene.add( sphere );

      camera.position.z = 15;

      function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );


I need to a video tag in html page to play a video in threejs VideoTexture

How do I do the same but with a video?

Have a look at this example and its source code: three.js examples

From the Collection of examples from a very simple example for a box.


1 Like

Turns out, I’ve got an example with video on a sphere, written some time ago :sweat_smile:: Edit fiddle - JSFiddle - Code Playground

I get this error on the sphere video link you have posted

<a class='gotoLine' href='#"THREE.WebGLRenderer: Error creating WebGL context."'>"THREE.WebGLRenderer: Error creating WebGL context."</a>
"<a class='gotoLine' href='#15066:17'>15066:17</a> Uncaught Error: Error creating WebGL context."

@hofk I can see only white screen with audio playing.
threejs example as more like collection of what can be done but no access to code for creating them

It runs on Windows and Android, but I can’t test Apple and Linux.
I have only included the following video formats to save disk space on my server.

   src="sintel.ogv" type='video/ogg; codecs="theora, vorbis"'
   src="sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

Search the web, e.g.:

Please, read also the documents below on *

related Don't know how to access ParametricGeometry in Three.js - #5 by hofk