Diferencia entre revisiones de «CuboMultiInte»

De Wikiversidad
Contenido eliminado Contenido añadido
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
<div class="messagebox cleanup">Este ''recurso de aprendizaje'' es una lección creada originalmente como material didáctico del ''proyecto de aprendizaje'' [[Tecnologías Multimedia e Interacción]].</div>
<div class="messagebox cleanup">Este ''recurso de aprendizaje'' es una lección creada originalmente como material didáctico del ''proyecto de aprendizaje'' [[Tecnologías Multimedia e Interacción]].</div>
El propósito de este proyecto era familiarizarse
El fin de este proyecto es familiarizarse
con WebGL. El mismo consiste en una aplicación que 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<ref name="Parisi">{{Cita libro
con WebGL. El mismo consiste en una aplicación que 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<ref name="Parisi">{{Cita libro
| apellidos = Parisi
| apellidos = Parisi

Revisión del 00:40 29 may 2015

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

El fin de este proyecto es familiarizarse con WebGL. El mismo consiste en una aplicación que 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 probabada 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); // 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>

Conclusión

HTML5 ofrece muchas novedades entre las que se encuentran 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

  1. Parisi, Tony (2012). WebGL. 

Participantes