How do I render a video on sphere in THREEJS

Questions
1

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 'https://cdn.skypack.dev/three@0.136.0';
const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera( 
        75, 
        window.innerWidth / window.innerHeight,
        0.1,
        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.
        MeshBasicMaterial({
          map: new THREE.TextureLoader().load('./img/img1.jpg')
        })
        );
      scene.add( sphere );

      camera.position.z = 15;

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

      animate();

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?

2

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

3

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

Video

1 Like
4

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

5

@prisoner849
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."
6

@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

7

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 * discourse.threejs.hofk.de

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