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>


Esta proyecto consiste en una aplicación que permite interactuar con un cubo tridimensional. Se ha utilizado Three.js que es una librería para generar y animar gráficos en 3D dentro del navegador utilizando WebGL.
Esta proyecto 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.
== Código de la aplicación. ==
== Código de la aplicación. ==
A continuación se presenta el código completo comentado para mayor claridad.
A continuación se presenta el código completo comentado para mayor claridad.

Revisión del 23:52 28 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.

Esta proyecto 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.

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>

Lecciones relacionadas

Participantes