Song explorer presents INSIDE THE MUSIC, an 3D three-js code multimedia experiment.

The work of freelance design artist and photographer Viktor Hertz from Uppsala, Sweden.
May 7, 2019
Interactive Content Marketing: A Glimpse Into the Future of Content Marketing.
May 9, 2019
Show all

In this multimedia experiment developed with the extension of Java script code Three.js the user, with a simple browser, will be able to interact with the music in a virtual environment and interact with the music tracks in order to experience how it was produced.

To interact with the project, click here!

Three.js is a cross-browser JavaScript library and Application Programming Interface (API) used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL. The source code is hosted in a repository on GitHub.

Three.js allows the creation of Graphical Processing Unit (GPU)-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins. This is possible thanks to the advent of WebGL.

High-level libraries such as Three.js or GLGE, SceneJS, PhiloGL or a number of other libraries make it possible to author complex 3D computer animations that display in the browser without the effort required for a traditional standalone application or a plugin.

Three.js was first released by Ricardo Cabello to GitHub in April 2010. The origins of the library can be traced back to his involvement with the demoscene in the early 2000s. The code was first developed in ActionScript, then in 2009 ported to JavaScript. In Cabello’s mind, the two strong points for the transfer to JavaScript were not having to compile the code before each run and platform independence. With the advent of WebGL, Paul Brunt was able to add the renderer for this quite easily as Three.js was designed with the rendering code as a module rather than in the core itself. Cabello’s contributions include API design, CanvasRenderer, SVGRenderer and being responsible for merging the commits by the various contributors into the project.

The second contributor in terms of commits, Branislav Ulicny started with Three.js in 2010 after having posted a number of WebGL demos on his own site. He wanted WebGL renderer capabilities in Three.js to exceed those of CanvasRenderer or SVGRenderer. His major contributions generally involve materials, shaders and post-processing.

Soon after the introduction of WebGL 1.0 on Firefox 4 in March 2011, Joshua Koo came on board. He built his first Three.js demo for 3D text in September 2011. His contributions frequently relate to geometry generation.

There are over 900 contributors in total.

Three.js includes the following features:

  • Effects: Anaglyph, cross-eyed and parallax barrier.
  • Scenes: add and remove objects at run-time; fog
  • Cameras: perspective and orthographic; controllers: trackball, FPS, path and more
  • Animation: armatures, forward kinematics, inverse kinematics, morph and keyframe
  • Lights: ambient, direction, point and spot lights; shadows: cast and receive
  • Materials: Lambert, Phong, smooth shading, textures and more
  • Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass and extensive post-processing library
  • Objects: meshes, particles, sprites, lines, ribbons, bones and more – all with Level of detail
  • Geometry: plane, cube, sphere, torus, 3D text and more; modifiers: lathe, extrude and tube
  • Data loaders: binary, image, JSON and scene
  • Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs and more
  • Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and OBJ
  • Support: API documentation is under construction, public forum and wiki in full operation
  • Examples: Over 150 files of coding examples plus fonts, models, textures, sounds and other support files
  • Debugging: Stats.js, WebGL Inspector, Three.js Inspector
  • Virtual reality: accessing WebVR

Three.js runs in all browsers supported by WebGL 1.0.

Three.js is made available under the MIT license.

Positive SSL