Visualizer

three js reactive music player

HTMLREACTTHREE JS

Interactive Three.js music player – An immersive experience where 3D objects animate in real-time to the rhythm of the sound, synchronizing visual and audio effects for a dynamic and fluid visualization. Thanks to Karl Justiano for this course at Gustave Eiffel University.

This project allowed me to discover Three.js and better understand the React API. Additionally, using the Zustand library, which allows creating custom stores, greatly facilitated the storage and management of sound-related data.

View project

Github

3D Objects

To begin with, it was necessary to set up the initial 3D objects like Line, Cover, and Board to animate them later. This required learning and using Geometry / Mesh / Material / Group as well as setting up several elements like Camera / Render / Light.

Audio Player

For the audio player, it was necessary to code the audio player system that allows playing audio files dropped in a specific area. Subsequently, it is necessary to synchronize and animate the 3D elements according to the music.

Deezer API

Finally, to expand the number of possible tracks to listen to, the integration of the Deezer API offers a 30-second preview for the referenced tracks.

Next projectview all

La Porte À Côté