THREE JS

Es una biblioteca liviana escrita en javascript para crear y

mostrar gráficos animados por ordenador en 3D

en un navegador Web y puede ser utilizada

en conjunción con el elemento CANVAS

de HTML5, SVG ó WebGL.

Posibilidades en diseño

* Equilibrio perfecto entre diseño y programación.

* Importación de archivos 3D a partir de Blender o Maya, pudiendo generar terrenos u objetos totalmente complejos

y de gran calidad.

* También permite el manejo de luces,

cámaras, animar objetos, perspectivas y

control de las mismas.

Referentes

find your way to oz

http://www.findyourwaytooz.com/

Hello racer

http://helloracer.com/webgl/

Obsidian

Elementos básicos

Una escena
Una procesador
Una cámara
Uno o dos objetos con materiales

Descarga de la librería

http://threejs.org/

Propiedades disponibles

Cámaras
luces
Texturas
Materiales
Core
loaders
Animation
Objetos

html

lo primero es tener listo el html para insertar la ventana donde se visualizará todo el 3D.

<!DOCTYPE html>
<html>
<head>
	<script src="lib/three.min.js"></script>
	<style>
		canvas {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
	<script src="script/mi_ejemplo.js"></script>
</body>
</html>

Elemento THREE

Para interactuar con three js lo haremos a través del objeto THREE, que nos brinda todos los elementos necesarios.

// Lienzo u objeto encargado del renderizado
var lienzo = new THREE.WebGLRenderer();
  
// Establecemos las dimensiones del lienzo
lienzo.setSize(
	WIDTH,
	HEIGHT
);
  
// Añadimos el lienzo a la página
document.body.appendChild(lienzo.domElement);

Creando la escena

// Creamos la escena
var escena = new THREE.Scene;

Creando el objeto

// Creamos un prisma
var geometriaCubo = new THREE.CubeGeometry(
	100, // Dimensiones en eje X
	140, // Dimensiones en eje Y
	100 // Dimensiones en eje Z
);
  
// Creamos una apariencia (color)
var aparienciaLila = new THREE.MeshLambertMaterial({
	color: 0x9999FF // Color hexadecimal
});
  
// Generamos el prisma y le aplicamos la apariencia
var cubo = new THREE.Mesh(geometriaCubo, aparienciaLila);

// Añadimos el cubo a la escena
escena.add(cubo);

Creando la cámara

// Generamos la cámara
var camara = new THREE.PerspectiveCamera(
	45, // Campo de visión
	(WIDTH / HEIGHT), // Proporcion
	0.1,
	10000 // Campo de visión
);
  
// Situamos la cámara
camara.position.y = 160; // Elevamos la cámara
camara.position.z = 400; // Alejamos la cámara

// Centramos la vista en el cubo
camara.lookAt(cubo.position);
  
// Añadimos la cámara a la escena
escena.add(camara);

// Renderizamos la escena
lienzo.render(escena, camara);

deck

By Diego Galeano