Diferencia entre revisiones de «CuboMultiInte»

Contenido eliminado Contenido añadido
En renglón
Revisión del 23:44 28 may 2015

Código de la aplicación.

A continuación se presenta el código completo comentado para mayor claridad.
<!DOCTYPE html>
<!-- Autor: Javier Longo. -->
<html>
<head>
<title>Cubo multimedia interactivo.</title>

	<link href="/css/webglbook.css" rel="stylesheet" /> 
	<script src="/libs/three.js"></script>
	<script src="/libs/jquery-1.6.4.js"></script>
                
	<script>
	
	var renderer = null, 
        scene = null, 
	camera = null,
	cube = null,
	animating = false;       
	   
	
	function onLoad()
	{                    
            var container = document.getElementById("container");           
	    renderer = new THREE.WebGLRenderer( { antialias: true } );
	    renderer.setSize(container.offsetWidth, container.offsetHeight);           
	    
            container.appendChild( renderer.domElement );            
	    scene = new THREE.Scene();           
            camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
            camera.position.set( 0, 0, 3 );          
	    var light = new THREE.DirectionalLight( 0xffffff, 1.5);
	    light.position.set(0, 0, 1);
	    scene.add( light );  
            
            video = document.getElementById( 'video' ); // Asignamos a video el elemento dom que contiene el vídeo.
	    texture = new THREE.VideoTexture( video );
	    texture.minFilter = THREE.LinearFilter;
	    texture.magFilter = THREE.LinearFilter;
	    texture.format = THREE.RGBFormat;            
            
            var geometry = new THREE.CubeGeometry(1, 1, 1); // Crea un cubo 1 (altura) x 1 (anchura) x 1 (profundidad)
            var material    = new THREE.MeshLambertMaterial({
            map : texture
            });            
            
            cube = new THREE.Mesh(geometry, material); // Creamos un cubo con una textura de vídeo.           
            cube.rotation.x = Math.PI / 7; // Rotamos el cubo para que se vea. 
            cube.rotation.y = Math.PI / 7;            
            scene.add( cube );
            addMouseHandler();        
            run(); // Llama a la función que dibuja la escena continuamente.
            video.pause(); // El vídeo está en pausa hasta que el usuario pincha con el ratón en el cubo.
            
	}

	function run() // Dibuja la escena continuamente.
	{
            // Dibujar la escena.	
            renderer.render( scene, camera );           
	    if (animating)
            {
                cube.rotation.y -= 0.01; // Rotamos en el eje y al pusar el ratón en el cubo
                video.play();            // y se activa el vídeo.
            } 
            requestAnimationFrame(run);	
	}
        
   	function addMouseHandler()
	{
            var dom = renderer.domElement; 
	    dom.addEventListener( 'mouseup', onMouseUp, false);   // 'mouseup' es el evento. 
	}

	function onMouseUp(event)
	{
	    event.preventDefault(); // jQuery no permite la acción por defecto.
	    animating = !animating;
            video.pause();
	}	
        	
	</script>

</head>
<body onLoad="onLoad();" style="">
    <center><h1>Cubo multimedia interactivo.</h1></center>
    <div id="container" style="width:95%; height:80%; position:absolute;"></div>
    <div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">
    Por favor, pichar en el cubo.</div>
    <video id="video" autoplay loop style="display:none">
    <source src="/videos/Anniversary.ogv" type='video/ogg; codecs="theora, vorbis"'>
    </video>
</body>
</html>