threex.videotexture
Version:
three.js helper to display video texture
122 lines (107 loc) • 4.5 kB
HTML
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src='vendor/three.js/build/three.min.js'></script>
<script src='vendor/three.js/examples/js/libs/stats.min.js'></script>
<script src='../threex.videotexture.js'></script>
<div style='position: absolute; top: 0px; width: 100%;font-family:arial; font-weight: bolder; padding-top: 5px;'>
<a href='https://github.com/jeromeetienne/threex.videotexture' target="_blank">threex.videotexture</a>
for <a href="http://threejs.org" target="_blank">three.js</a>
- works on desktop and mobile
<br/>
on IOS, start the video manually
<button onclick='onVideoPlayButtonClick()'>play</button>
<button onclick='onVideoPauseButtonClick()'>pause</button>
</div><body style='margin: 0px; overflow: hidden; text-align:center;'><script>
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
});
renderer.setClearColor(new THREE.Color('lightgrey'), 1)
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var updateFcts = [];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.z = 3;
//////////////////////////////////////////////////////////////////////////////////
// add an object and make it move //
//////////////////////////////////////////////////////////////////////////////////
// find out which file formats i can read
var canPlayMp4 = document.createElement('video').canPlayType('video/mp4') !== '' ? true : false
var canPlayOgg = document.createElement('video').canPlayType('video/ogg') !== '' ? true : false
if( canPlayMp4 ){
var url = 'videos/sintel.mp4'
}else if( canPlayOgg ){
var url = 'videos/sintel.ogv'
}else alert('cant play mp4 or ogv')
// create the videoTexture
var videoTexture= new THREEx.VideoTexture(url)
var video = videoTexture.video
updateFcts.push(function(delta, now){
videoTexture.update(delta, now)
})
// use the texture in a THREE.Mesh
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({
map : videoTexture.texture
});
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
updateFcts.push(function(delta, now){
mesh.rotation.x += 1 * delta;
mesh.rotation.y += 2 * delta;
})
function onVideoPlayButtonClick(){
video.play()
}
function onVideoPauseButtonClick(){
video.pause()
}
//////////////////////////////////////////////////////////////////////////////////
// Camera Controls //
//////////////////////////////////////////////////////////////////////////////////
// var mouse = {x : 0, y : 0}
// document.addEventListener('mousemove', function(event){
// mouse.x = (event.clientX / window.innerWidth ) - 0.5
// mouse.y = (event.clientY / window.innerHeight) - 0.5
// }, false)
// updateFcts.push(function(delta, now){
// camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
// camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
// camera.lookAt( scene.position )
// })
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
// init Stats
var stats = new Stats();
document.body.appendChild( stats.domElement );
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.bottom = '0px';
updateFcts.push(function(){
stats.update()
})
updateFcts.push(function(){
renderer.render( scene, camera );
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner //
//////////////////////////////////////////////////////////////////////////////////
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
updateFcts.forEach(function(updateFn){
updateFn(deltaMsec/1000, nowMsec/1000)
})
})
</script></body>