Show sidebar

3D Tunes

I’m digging deeper into the Three.js library. This time I wanted to load an external 3d model, and then be able to interact with it. And what would be better for this than some kind of instrument? Probably a lot, but since it’s also a hobby of mine, I decided to create myself a little piano.

It’s possible to put on 10 different drum loops, and to make things even more interesting I’ve also pre recorded two songs. I hope you recognize them, it’s two real classics: the soundtrack from the game Wizards & Warriors, and the theme song from Game of Thrones. I had to recompose them slightly to squeeze them into the small number of keys available.

It’s pretty simple: use the left mouse button to play (or the middle row of the keyboard) and the right mouse button to rotate the view (or keys 1-7 on your keyboard). Enough talk alright, go ahead and play some tunes:
› Open project

The original 3D model was created by Andreas Wannerstedt, and the drum loops where provided by free-loops.com
I recommend you to use Chrome, to make the experience as smooth as possible.

3D Tunes 1
3D Tunes 2
3D Tunes 3
3D Tunes 4
3D Tunes 5

› Open project