Music Visualizer
Description
This project is a modification of a music visualizer with Three.js made by tgcnzn which can be found here. The original was made with vanilla JS and I wanted to make it work with React and add some new features.
Features (Changes)
- Rebuilt to work with React, TailwindCSS, and Shadcn
- Orbit controls to change viewpoint of visualizer
- Added more customization options in the GUI
- Added 2 new meshes (sphere and torus)
- Color changing mode with auto mix
Technologies Used
The main technologies used here are React, TypeScript, and Three.js.
Development Process & Motivation
I have tried making music visualizer before but they always turn out harder than I expect and end up going nowhere with it. I found this cool music visualizer using Three.js and wanted to try working on it to try and understand it a bit more.
Challenges & Solutions
Updating the code to work with React was much harder than I thought it would be, specifically the lifecycle with Three.js. Only until after getting it working I learned of React Three Fiber which might have saved me much trouble.
Future Plans & Improvements
Music visualizers are a fun project to work on so there are many improvements that can be made, but some obvious ones would be allowing user to upload their own music. I think adding more settings to customize the visuals would be cool, as well as adding more meshes. Also upgrading to React Three Fiber would make future additions much easier.
Live Demo
Contact Me
Let’s make your idea a reality
Thank you for taking the time to visit my website! If you're looking for a skilled and innovative developer to work with, don't hesitate to reach out. Whether you have a job opportunity or a freelance project in mind, let's connect and see how we can work together.
You can send me a message below or email me at stevenmendoza.dev@gmail.com