CuboMultiInte

Este recurso de aprendizaje es una lección creada originalmente como material didáctico del proyecto de aprendizaje Tecnologías multimedia e interacción.

La finalidad de esta aplicación es familiarizarse con WebGL. La misma permite interactuar con un cubo tridimensional que muestra contenido multimedia en formato de vídeo. Se ha utilizado three.js que es una librería para generar y animar gráficos en 3D dentro del navegador utilizando WebGL^[1]. Ha sido probada en el navegador Firefox. Puede que haga falta recargar la página varias veces para que aparezca el cubo. Puede verse en Cubo multimedia interactivo..

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); // Definir 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>

Conclusión

HTML5 ofrece muchas novedades entre las que se encuentra WebGL. Ahora es posible crear contenido tridimensional interactivo y que puede verse en el navegador sin necesidad de software adicional. Es, por tanto, muy conveniente y por ello tiene muchas posibilidades de convertirse en el estándar de contenido tridimensional interactivo.

Lecciones relacionadas

Referencias

↑ Parisi, Tony (2012). WebGL.

Participantes

Javier Longo

[Parisi-1] Parisi, Tony (2012). WebGL.

[1]