Inicio > Tech - Application Development > Animaciones 3D con Three JS y Oracle JET

Animaciones 3D con Three JS y Oracle JET

En el día de hoy me gustaría enseñaros la librería JavaScript ThreeJS.

¿Qué es ThreeJS?

Three.js permite la creación de animaciones 3D aceleradas por GPU utilizando el lenguaje JavaScript, como parte de un sitio web, sin depender de herramientas adicionales. Esto es posible gracias a la llegada de WebGL.

Las bibliotecas de alto nivel como Three.js o GLGE, SceneJS, PhiloGL (o una serie de otras bibliotecas) hacen posible la creación, y posterior muestra en el navegador, de complejas animaciones en 3D sin el esfuerzo de tener que realizar una aplicación independiente o un plugin.

Véase: https://en.wikipedia.org/wiki/Three.js

El objetivo

El objetivo de este post es desarrollar una aplicación capaz de generar una matriz, y que además, la aplicación pueda moverse por ella después de haber utilizado el giroscopio del dispositivo.

El desarrollo

Antes de empezar debemos identificar o crear el contenedor donde se creará el canvas en el que se visualizará nuestra animación 3D. En este caso utilizaremos el div “pageContent”, este div lo hemos creado en el index.html donde se visualizarán los distintos módulos de la aplicación; por defecto viene creado en el template “navdrawer”.

var container = document.getElementById( ‘pageContent’ );

El siguiente paso será crear la cámara. Este objeto pretende imitar la forma en que el ojo humano ve. Es el modo de proyección más común utilizado para la representación de una escena 3D.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

Para la representación de la cámara necesitamos 4 parámetros:

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

  • El primer parámetro (75) define el campo visual vertical de la cámara en grados (desde abajo hacia arriba). Se trata de la extensión del mundo observable que se ve en la pantalla en un momento determinado. El campo visual horizontal se calcula con el vertical.
  • El segundo parámetro (window.innerWidth / window.innerHeight) define la relación de aspecto de la cámara. Por lo general, te resultará conveniente usar el ancho del elemento de ventanilla dividido por su altura. De otro modo, la imagen se verá deformada.
  • El tercer parámetro (0.1) define el plano cercano del frustum de la cámara (busca “cercano” (Near) en la figura). En este caso, el plano cercano del frustum casi coincide con el plano xy (o sea, la pantalla).
  • El último parámetro (1000) define el plano lejano del frustum de la cámara (busca “lejano” (Far) en la figura). En este caso, cuando un objeto sobrepasa las ±1.000 unidades, se lo considera fuera del mundo visible de Three.js y queda recortado de la vista.

Otro punto importante es la escena. La escena permite configurar qué y dónde se va a dibujar por three.js. La escena es donde se colocan objetos, luces y cámaras.

var scene = new THREE.Scene();

Uno de los objetos que podemos introducir dentro de una escena sería un “polygon mesh”.

Polygon mesh representa objetos basados en una malla poligonal triangular. También sirve como base para otras clases, tales como as BoxGeometry and MeshBasicMaterial.

var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
var material = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.BackSide, wireframe: true } );
var mesh = new THREE.Mesh( geometry, material );

Además, para este ejemplo hemos utilizado la librería “DeviceOrientationControls” de Three.js. Ésta librería nos ayuda a controlar la cámara, con ella logramos hacer que la cámara de Three.js se mueva con el giroscopio del móvil.

Con el ejemplo descrito, junto al de “realidad aumentada” publicado anteriormente, podríamos conseguir colocar objetos en el espacio.

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: