Home
ContactAbout
Showing an album cover highlighted among other album covers in 3D space.

33D Wrapped

JavaScriptTypeScriptThree.jsGSAP

Context

My very first steps with Three.js. As a follow-up to my project MiniWrapped about containerization and CI/CD pipelines, I had in mind that it would be interesting to visualize such content in 3D space.

The goal was to achieve a 3D visualization with 2D elements. Since album records are 'somewhat' 2D and content easily acquirable via the Spotify API, they are suitable as objects at the verge of abstract and realism. The app recreates the feel of going through a physical collection of records. By picking an album, more information are displayed as the record is unboxed.

Features

As a learn-project, the focus was on experimenting with the base capabilities of Three.js. This includes the setup of scene and camera, creation of scene objects, loading of textures, handling animations, and displaying text. Its specific features are:

  • Mouse position as input for rotating the camera / album slightly
  • Scrolling through the collection with scroll event
  • Selecting items with timeline animations
  • Animating everything that happens on screen (GSAP)
  • Transitioning from blurred skybox to screen filling background images
  • Overlaying HTML UI
  • Displaying instructions if required

The code of this project can be found on GitHub: really soon!

Potential next steps

Originally, this experiment should serve as entry point for trying out different iteration and picking animations. As I early settled on the now used behaviors, the focus shifted to fleshing out the app with content. For the next or alternative iterations, it could be interesting to revisit the animation types. For example, letting the items fall over and lean onto each other, or pulling out records sideways.

Another step could be the exploration of materials. At first, the record that is pulled out of the album was planned to have exaggerated grooves with normal maps that light and shadow play with. Similarly, the album could have a plastic cover that reflects light.

Going towards the idea of building an actual app, the next step would be to switch between different stacks of items. In the case of a Spotify-visualization-app, this could be different playlists to look through or change between favorite tracks and favorite artists.

Also, actually playing a song after pulling out the record would be a nice addition. It could be very interesting if the visualization was not setup to explore tracks but more of a background visualization of the current playback of the user. Thereby, showing transition-animations between tracks and the changes from what the user puts on. Project that onto a wall in your favorite café!

Big image hovering in 3D space.
Album covers lined up in perspective. One Album is elevated and scaled.
Album and a record are in the foreground. In the background the image of the artist is displayed. Under the album the name of the track and the artist names are displayed.
Album and a record are in the foreground. In the background the image of the artist is displayed. Under the album the name of the track and the artist names are displayed.
Images of album covers are iterated through, they are highlighted one after another.
Image of album is clicked on, it then goes up while the camera follows. A record is animated out of the item and the background fades to another image.