THREEjs Video player
Awesome particle video player
HTML
<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/libs/stats.min.js"></script>
<video id="video" autoplay>
<source src="https://static.videezy.com/system/resources/previews/000/014/600/original/camera_visor_green.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
CSS
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
JavaScript
var AMOUNT = 100;
var container, stats;
var camera, scene, renderer;
var video, image, imageContext,
imageReflection, imageReflectionContext, imageReflectionGradient,
texture, textureReflection;
var mesh;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer';
container.appendChild( info );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
video = document.getElementById( 'video' );
//
image = document.createElement( 'canvas' );
image.width = 480;
image.height = 204;
imageContext = image.getContext( '2d' );
imageContext.fillStyle = '#000000';
imageContext.fillRect( 0, 0, 480, 204 );
texture = new THREE.Texture( image );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );
imageReflection =...