Song explorer presenta INSIDE THE MUSIC, un experimento multimedia en 3D desarrollado en three-js .

El trabajo del diseñador freelance y fotógrafo Viktor Hertz de Uppsala, Suecia.
mayo 7, 2019
Coca-Cola Contour, campaña digital – Caso de estudio.
mayo 9, 2019
Show all

En este experimento multimedia desarrollado con la extensión del código de script de Java Three.js, el usuario, con un simple navegador, podrá interactuar con la música en un entorno virtual manipular las pistas de música para experimentar cómo se produjo.

Para interactuar con el proyecto, click aquí!

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 o WebGL. El código fuente está alojado en un repositorio en GitHub.

Se ha popularizado como una de las más importantes para la creación de las animaciones en WebGL.

Bibliotecas de alto nivel tales como Three.js o GlgE, SceneJS, PhiloGL u otras, permiten al autor, crear complejas animaciones en 3D, listas para ser mostradas en el navegador. Sin el esfuerzo que se requeriría, para el caso de una aplicación independiente o tradicional, con el uso de plugins.

Esta biblioteca fue creada y liberada en GitHub por el español Ricardo Cabello en abril de 2010, conocido por su seudónimo de Mr.doob. El código habría sido primeramente desarrollado en ActionScript y luego traducido al javaScript. Los dos puntos decisivos para la transferencia a JavaScript fueron no tener que compilar el código antes de cada carga y la independencia de plataforma. Las contribuciones de Cabello incluyen el diseño de la API, CanvasRenderer, SVGRenderer y ser responsable de la fusión del trabajo de los diversos colaboradores en el proyecto.

Con el advenimiento de WebGL, Paul Brunt añade el renderizador como un módulo en lugar de en el propio núcleo.

Branislav Ulicny se une en 2010, después de haber publicado una serie de demos WebGL en su propio sitio, con la intención de que las capacidades del renderizador WebGL en Three.js excedieran los CanvasRenderer y SVGRenderer. Sus principales contribuciones generalmente involucran materiales, shaders y post-procesamiento.

Poco después de la introducción de WebGL en Firefox 4 en marzo de 2011 Joshua Koo se une construyendo su primer demo de texto en 3D en septiembre de 2011. Sus contribuciones con frecuencia se refieren a la generación de la geometría.

Actualmente cuenta con la contribución de alrededor de 90 codificadores, entre ellos incluyendo “gero3”, “WestLangley”, Jerome Etienne, Erik Kitson y “AddictArts” y una comunidad creciente de programadores.

Three.js así como el propio estándar de WebGL están todavía prácticamente en sus días de nacimiento por lo que aún es realmente prematuro hablar de una verdadera historia que el tiempo irá construyendo paso a paso.

Características del Three.js.

  • Renderizadores: Canvas, SVG y WebGL.
  • Efectos: anaglifo, bizco y la barrera de paralaje.
  • Escenas: añadir y eliminar objetos en tiempo de ejecución; niebla.
  • Cámaras: perspectiva y ortográfica; controladores: trackball, FPS, trayectoria y otras.
  • Animación: armaduras, cinemática directa, cinemática inversa, morphing y fotogramas clave.
  • Luces: ambiente, dirección, luz de puntos y espacios, sombras: emite y recibe.
  • Materiales: Lambert, Phong, sombreado suave, texturas y otras.
  • Shaders: el acceso a las capacidades del OpenGL Shading Language (GLSL): reflejos en la lente, pase profundo y una extensa biblioteca de post-procesamiento
  • Objetos: mallas, partículas, sprites, líneas, cintas, huesos y otros.
  • Geometría: plano, cubo, esfera, toroide, texto en 3D y otras; modificadores: torno, extrusión y tubo.
  • Cargadores de datos: binario, imagen, JSON y escena.
  • Utilidades: conjunto completo de funciones matemáticas en 3D, incluyendo tronco, matriz Quaternian, UVs y otras.
  • Exportación e importación: utilidades para crear archivos compatibles con JSON Three.js desde: Blender, openCTM, FBX, Max, y OBJ.
  • Soporte: La documentación de la API se encuentra en construcción, foro público y wiki en pleno funcionamiento.
  • Ejemplos: Más de 150 archivos de códigos de ejemplo más las fuentes, modelos, texturas, sonidos y otros archivos soportados.
  • Depuración: Stats.js, WebGL Inspector, Three.js Inspector.

Three.js funciona en todos los navegadores compatibles con WebGL. Consulte Implementación WebGL.

Three.js está disponible bajo la licencia MIT.

Facebook
Twitter
Linkedin0
Google+0
GMail0
SMS0
Whatsapp0
Positive SSL