The Dancing Dog
A project made with Threejs
Role
Designer, Programmer
Team
Jamie Dinh
Daiyi Peng
Links
- Live: https://ngocbdinh.github.io/the-dancing-dog/
- Source code: https://github.com/ngocbdinh/the-dancing-dog
Language used
Threejs
Javascript
HTML/CSS
Timeline
Nov – Dec 2022
About
This is my first project working with Javascript and Threejs. We wanted to start doing something in 3D and we love music, so we made a project where there is a 3D dog model that reacts differently to different music tracks.
This project came out from one of my Master’s program courses in UMD – Introduction to Programming. It was an absolute joy to make and challenged me both technically and creatively.
I used Threejs to create the 3D dog model and render the scene. The music is hosted locally, and the track information (titles and artists) is stored in a .json file to fetch later. Finally, the dog’s animation and the background is made using a combination of Threejs and Javascript.
Take-aways
Learn how to learn
Threejs is a relatively not widely used programming language, so there were not many learning resources available. At first, we attempted to read the whole documentation. It did not work out as the documentation is massive and daunting, and there was a time limitation of only 1 month for the project. We learnt to start breaking down the features, researching each small step then going back to learn from the documentation.
First-hand sense of 3D development & design
Working with 3D space includes setting up light, scene, camera, material and thinking in a 3D world (with one more axis). I also learnt technical knowledge to develop in 3D, such as WebGL, Javascript, Threejs, and how to integrate 2D HTML elements with 3D objects.