Created
November 1, 2019 21:24
-
-
Save haehn/095258a24f9544504ba70411aa9ace0a to your computer and use it in GitHub Desktop.
Three.JS Video Texture Experiment
This file contains hidden or 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
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <style> | |
| html, body { | |
| background-color:#fff; | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| overflow: hidden !important; | |
| } | |
| </style> | |
| <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script> | |
| <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script> | |
| <script> | |
| var scene, camera, renderer, ambientLight, light; | |
| var controls; | |
| window.onload = function() { | |
| var startButton = document.getElementById( 'startButton' ); | |
| startButton.onclick = function( ) { | |
| setupscene(); | |
| }; | |
| } | |
| function setupscene() { | |
| scene = new THREE.Scene(); | |
| var fov = 60; | |
| var ratio = window.innerWidth / window.innerHeight; | |
| var zNear = 1; | |
| var zFar = 10000; | |
| camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar); | |
| camera.position.set( 0, 0, 100); | |
| renderer = new THREE.WebGLRenderer({ alpha: true }); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild( renderer.domElement ); | |
| ambientLight = new THREE.AmbientLight(); | |
| scene.add( ambientLight ); | |
| light = new THREE.DirectionalLight( 0xffffff, 5.0 ); | |
| light.position.set( 10, 100, 10 ); | |
| scene.add( light ); | |
| video = document.getElementById( 'video' ); | |
| video.play(); | |
| texture = new THREE.VideoTexture( video ); | |
| texture.wrapS = THREE.ClampToEdgeWrapping; | |
| texture.wrapT = THREE.ClampToEdgeWrapping; | |
| // now we add the cube | |
| var geometry = new THREE.BoxBufferGeometry( 40, 20, 20); | |
| var material = new THREE.MeshStandardMaterial({ color: 0xffffff, map:texture }); | |
| cube = new THREE.Mesh( geometry, material); | |
| scene.add(cube); | |
| controls = new THREE.TrackballControls( camera, renderer.domElement ); | |
| animate(); | |
| }; | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| controls.update(); | |
| renderer.render( scene, camera ); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none"> | |
| <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> | |
| </video> | |
| <div> | |
| <button id="startButton">Click to Play</button> | |
| <p>Video playback with audio requires user interaction.</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment