Skip to content

Instantly share code, notes, and snippets.

@ErikPeterson
Last active October 5, 2022 06:53
Show Gist options
  • Save ErikPeterson/b1db23f83b9ca7904bbf to your computer and use it in GitHub Desktop.
Save ErikPeterson/b1db23f83b9ca7904bbf to your computer and use it in GitHub Desktop.
THREEJS Video Texture Demo
//Set up scene, camera, and renderer
var scene = new THREE.Scene;
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
var renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var video = document.createElement('video');
video.src = "URL for your video file goes here";
video.load();
video.play();
//make your video canvas
var videocanvas = document.createElement('canvas');
var videocanvasctx = videocanvas.getContext('2d');
//set its size
videocanvas.width = 640;
videocanvas.height = 480;
//draw a black rectangle so that your spheres don't start out transparent
videocanvasctx.fillStyle = "#000000";
videocanvasctx.fillRect(0,0,640,480);
//add canvas to new texture
var spheretexture = new THREE.Texture(videocanvas);
//add texture to material that will be wrapped around the sphere
var material = new THREE.MeshBasicMaterial( { map: spheretexture, overdraw: 0.5 } );
//Use whatever values you were using for the sizes of the spheres before
var sphere = new THREE.SphereGeometry(…)
//make a mesh from the material and the geometry (the sphere)
var sphereMesh = new THREE.Mesh(sphere, material);
//Run your render function, checking the video for data and writing it to the canvas if there is any (this assumes you already have your video on the page and its element saved to the variable 'video'
function render(){
//check for vid data
if(video.readyState === video.HAVE_ENOUGH_DATA){
//draw video to canvas starting from upper left corner
videocanvasctx.drawImage(video, 0, 0);
//tell texture object it needs to be updated
texture.needsUpdate = true;
}
renderer.render(scene, camera); //Same as how you always render a 3js scene
window.requestAnimationFrame(render); //When finished rendering, ask to render again on the next frame
}
window.requestAnimationFrame(render); //Start render loop
@TheMachinistIGN
Copy link

Awesome example — encountered one small bug in your render function though... texture.needsUpdate should be spheretexture.needsUpdate

@michaelcvoigt
Copy link

spheretexture.needsUpdate = true;

Is producing error:

DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted

@michaelcvoigt
Copy link

Can you please delete this repo. It doesn't work. I found another example that is simple and just works.

@bunkerFace
Copy link

@ michaelcvoigt, dude you gonna keep it to yourself or share the light with us? :) Link up your working example for us willya please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment