This week, we learned how to develop sketches in 3D with three.js library. Since this is my first time developing a 3D sketch, I decided to build a simple one first in order to consolidate my skills. Basically, my idea is to generate a series of balls dropping from a platform and bouncing on several boxes with the influence of gravity.
The visuals contained three parts: the boxes, the platform, and the balls. I used OOP to develop three different classes to generate these objects. For the boxes, I used the arithmetic progression to determine the position of each box. Since the balls are also affected by the resistance of air, each time the touch point of the fall is a little closer than the previous one. After setting up the boxes, I started to control the movement of the balls. In the whole process of movement, the ball is subject to three forces: the wind force to the left, the downward gravitational force and the upward air resistance. The gravitational force was applied from the outside of the class. I also set a marginal value for the ball to reverse its movement on the z axis and bounce up. When the previous ball falls to a certain level, the next one will appear.
There was one time that I mistakenly generated too many balls in a sequence that it accidentally showed me the movement track of the ball. This actually helped me determine the position of each box.
The final outcome looks like this: