3D dentro del navegador: Seen.js crea animaciones y gráficos complejos para Canvas y SVG

HTML5 y JavaScript proporcionan todas las funciones necesarias para crear gráficos y animaciones complejos dentro del navegador. Para ese propósito, la biblioteca de JavaScript «seen.js» ofrece una amplia gama de opciones para construir mundos 3D complejos en el navegador. «Seen.js» es independiente de jQuery u otras bibliotecas y construye impresionantes escenarios y objetos 3D sobre la base de HTML5 Canvas y SVG. 3D dentro del navegador, sin complementos …

Convierta superficies simples en escenarios complejos con Seen.js

Empezar con «Seen.js» no es exactamente fácil, eso se debe a lo versátil que es la biblioteca. A cambio, las opciones son mucho más impresionantes. Comencemos por el principio: primero, la biblioteca JavaScript debe estar integrada. Aunque «seen.js» funciona sin ninguna otra dependencia, CoffeeScript también debe incorporarse. Eso es porque la documentación completa de «seen.js» y todos los ejemplos se basan en CoffeeScript. A continuación, crearemos un lienzo, es decir, un elemento “” o “

<canvas width="640" height"425" id="seenjs"></canvas>

<script type="text/coffeescript">
…
</script>

En el script anterior, configuramos un elemento de lienzo que se supone que debe usarse como área de dibujo para «seen.js.» La base de los objetos 3D son las llamadas «formas». Estas formas se pueden definir en cuanto a tamaño, color y forma. Aparte del desarrollo de formas personalizadas, «seen.js» también ofrece formas simples y predefinidas. De esta forma se pueden utilizar esferas, tetraedros, entre otras formas.

sphere = seen.Shapes.sphere(1).scale(100)

En el ejemplo, una esfera simple que consta de múltiples formas triangulares se define mediante «Shapes.sphere ()». El número dentro del método determina qué tan compleja quieres que sea la esfera. Cuanto mayor sea el número, mayor será el número de formas mostradas. El tamaño de la esfera se define mediante «scale ()». El valor «1» es el tamaño más pequeño posible.

Dos esferas con diferentes cantidades de formas.

En el siguiente paso, se define el color de la esfera.

for flaeche in kugel.flaechen
  flaeche.fill.color = seen.Colors.rgb(0, 145, 190, 255)
  flaeche.fill.metallic = true
  flaeche.fill.specularColor = flaeche.fill.color

Aquí, se usa un bucle for para asignar un color a cada área de la esfera. El atributo «color» determina el, lo adivinaste, el color. Aquí, tenemos varias formas de definir un color. “Colors.rgb ()” asigna un color a través de RGB que incluye un valor alfa. Alternativamente, el color también se puede ingresar a través de «Colors.hrs ()». Agregar el parámetro «metálico» hace que la superficie parezca metálica. En este caso, el color determinado mediante «specularColor» se utiliza como pintura de reflexión, en lugar de una simple reflexión de luz.

Dos esferas: una con efecto metálico y otra sin efecto metálico

En el siguiente paso, la esfera se agrega a un modelo a través de «Models.default (). Add ()».

objects = seen.Models.default().add(sphere)

Posteriormente se define el escenario en el que se sitúa el modelo, en este caso la esfera.

scene = new seen.Scene
  model : objects
  viewport : seen.Viewports.center(640, 425)

Arriba, la esfera se agrega a la escena usando la variable «objetos». “Viewports.center ()” define dónde se centra la esfera. En nuestro ejemplo, queremos centrar la esfera dentro del área de dibujo, por eso ingresamos las medidas del elemento “”.

En el paso final, la escena que incluye la esfera debe renderizarse y asignarse al elemento de lienzo.

seen.Context("seenjs", scene).render()

Esto se hace usando el método «Context ()». Se ingresa el ID del elemento de lienzo, así como la escena. Finalmente, todo se dibuja en HTML5 Canvas mediante «render ()».

Cómo crear varios objetos 3D con Seen.js

Podemos colocar tantos objetos 3D en una escena como queramos. Para eso, primero necesitamos crear un nuevo objeto de «forma».

pyramid = seen.Shapes.tetrahedron()
pyramid.scale(50)
seen.Colors.randomSurfaces2(pyramid)

En nuestro caso, usamos «Shapes.tetrahedon ()» para definir una pirámide de tres lados y llevarla a un tamaño apropiado con «scale ()». El color se elige al azar mediante «Colors.randomSurfaces2 ()». En el siguiente paso, asignamos la pirámide a la variable «objetos» usando «append ()» y «add ()». La esfera ya está ahí.

objekte.append().translate(-25, 25, 100).add(pyramid)

Luego, colocamos la pirámide en relación a la esfera con el método «translate ()». Sin «translate ()», la pirámide recibiría el mismo centro que la esfera.

Dos objetos en una escena

Los métodos “rotx ()”, “roty ()” y “rotz ()” le permiten rotar uno o todos los objetos en el espacio.

pyramid.rotx(30)
objects.roty(90)

En este ejemplo, la pirámide se gira 30 grados en el eje x. Al mismo tiempo, todos los objetos de la escena se giran 90 grados en el eje y.

Objetos rotados

Animaciones 3D con Seen.js

Los objetos definidos ahora se pueden animar dentro de la escena con poco esfuerzo. Para hacerlo, simplemente agregamos el método «animate ()» al método «render ()». Luego, se usa un evento para definir el curso de la animación.

seen.Context("seenjs", scene).render().animate()
  .onBefore((time, deltatime) -> objekte.rotx(deltatime * 1e-4).roty(0.5 * deltatime * 1e-4))
  .start()

Arriba, definimos un evento que se llama antes de cada cambio de fotograma a través de «onBefore ()». Se transfieren tanto el tiempo como el deltatime. En nuestra demostración, todos los objetos se mueven usando “rotx ()” y “roty ()”. Giran alrededor de su propio eje, y la rotación alrededor del eje y es más rápida.

Cómo crear objetos personalizados con Seen.js

En «seen.js», hay varias formas de crear objetos personalizados. Uno es el método «extrude ()». Aquí, las áreas que forman un objeto juntas se definen en un espacio tridimensional.

arrow = seen.Shapes.extrude([
  seen.P(0, 0, 0)
  seen.P(1, 1, 0)
  seen.P(1, 0.5, 0)
  seen.P(2, 0.5, 0)
  seen.P(2, -0.5, 0)
  seen.P(1, -0.5, 0)
  seen.P(1, -1, 0)
 ], seen.P(0, 0, 0))

Como se vio arriba, usamos «Shapes.extrude ()» para crear una flecha simple. Las coordenadas se definen con el método “P ()”. Contiene tres coordenadas cada una, para especificar un punto en cada uno de los ejes x, y y z del espacio. Para formas más complejas, «seen.js» admite el formato de frente de onda. Ese es un formato de archivo para guardar formas geométricas. Es utilizado por muchos programas de animación y es una buena opción por esa razón.

$.get "something.obj", {}, (content) ->
  something = seen.Shapes.obj(content, false)

En el JavaScript que se muestra arriba, usamos jQuery para cargar un archivo de objeto en el formato de frente de onda. El contenido del archivo se transfiere al método «Shapes.obj ()». Este método interpreta el formato y muestra un objeto 3D para «seen.js» basado en él.

Las muchas otras opciones de Seen.js

«Seen.js» proporciona muchas otras formas de crear objetos, cambiar su apariencia y hacer que se muevan. Por ejemplo, existe la opción de ver una escena desde diferentes puntos de vista. Además de eso, se pueden definir varias fuentes de luz. Debido a diferentes eventos, existe la opción de reaccionar a eventos como el movimiento del mouse y los clics.

Seen.js: gratis y bien documentado

«Seen.js» está disponible bajo la licencia de Apache. Eso significa que está disponible para cualquier persona de forma gratuita. En el sitio web «seen.js», hay muchos ejemplos que dan una buena impresión de las opciones que incluye «seen.js». Aunque la documentación es extensa, comenzar no es fácil. Principalmente considerando la tendencia actual de low-poly, vale la pena buscar en la biblioteca, ya que seguir esta tendencia permite la creación de algunos gráficos y animaciones muy impresionantes.

(dpe)