-
-
Save blurymind/382daff5b96ca8dc7d5a0a65977930f4 to your computer and use it in GitHub Desktop.
THREEJS Video Texture Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment