Project structure for animated music visualizer

Discussion
1

Hi, I’m creating a three.js visualizer for a hip hop group. We’re creating various scenes with objects that have movement/animations linked to audio data and have to transition between scenes. Each scene has some different objects and variations of colors/materials on the same objects. What’s the best way to structure this? We’re also using tween.js to animate transitions between scenes.

Right now this is kind of what i’m thinking for the class structure (not complete)
Class Renderer
init()
render()
animate()

Class Scene
var CommonObject1
var CommonObject2
Scene Child Class Scene1
- Class Scene1Object1
Scene Child Class Scene2

2

That seems like a pretty reasonable way. It doesn’t look that much different from all the three.js examples?

3

This article might make a good starting point.

That said, there’s no “best way”, code structure is a complex topic with many possible solutions. But three.js projects tend to be similar to simple game engines, if you need more info you could try researching those.

1 Like