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.
* 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.
find your way to oz
http://www.findyourwaytooz.com/
Hello racer
http://helloracer.com/webgl/
Obsidian
http://threejs.org/
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>
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);
// Creamos la escena
var escena = new THREE.Scene;
// 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);
// 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);