Diferencia entre revisiones de «CuboMultiInte»
Contenido eliminado Contenido añadido
Página reemplazada por «<nowiki>Introduzca texto sin formato aquí</nowiki>» |
Sin resumen de edición |
||
Línea 1:
<pre>
<!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>
</pre>
| |||