WP2WS – Midterm Project – Planet of the Island

For this project, I created a cube-like island planet with beach, sea, coconut trees, and so on. I got the inspiration from my hometown because my hometown is an island in the tropical area and there are a lot of coconut trees in my hometown. So I planned to create a planet of the island in three.js. A similar optimal visualization to my plan looks like this:

The Main Background and Scenes

There are several main objects in the visualization: sea, beach, volcano, cloud, banana boats, and balls popping out from the crater. At the first stage, I applied the obj models for the sea and the volcano. I also used the ConeGeometry to simulate the beach. I also set the same model for the sea as the surrounding walls so that this planet is in a cube shape instead of a ball shape. I used SphereGeometry and MeshNormalMaterial to generate balls for test. As for the coding part, I created multiple functions to work as “construct objects” to control different obj models.

Then, I started to apply coconut trees onto the island. To make the visual more vivid and natural, I set different sections for the trees’ position. I tended to turn the balls into the bananas and make the bananas popping out from the volcano. However, I didn’t find the right way to implement this idea, so I kept the balls and later turned the bananas into big banana boats floating on the sea. I also set the walls as transparent with opacity values so that the audience can see the inside view from the outside.

Finally, I added the cloud floating in the air. I also assigned random colors for the balls with a math function.

For the banana boats, I assigned different sized and angles to several banana boats to be floating on the sea. The final scene looks like this:

Movement of the Objects (Balls & Camera)

There are two main movements in this project, one is the movement of the balls, another one is the camera’s movement. Since the volcano and the beach has a slope, when the ball is bouncing, there would be different y positions for the turning point of the direction of the velocity. So I used “.distanceTo()” to calculate the distance in a 3D space, and then used the distance to set different limits for the bouncing effect. As I haven’t found the best way to calculate a perfect limit, I only managed to set four levels of bouncing movement due to the distance between the ball and its starting point.

As for the velocity of the balls, I used the randomness so that the balls get jump to different directions. When I pushed the class “Ball” in the updateTHREE, I assigned a random range of values for the velocity on x and z axis. Then, in the class constructor, I also set random numbers to have a positive/negative value for the velocity. As a result, the balls can jump to different directions.

In the project demo, you can see that the camera is automatically rotating around a center. This is because I applied sin() and cos() functions to set its rotating movement and used “.lookAt()” for its rotating center. I also added one more camera, so there are two perspectives for the camera, one is inside the planet, and another one is outside. And I assigned two different radius for these two cameras.

Reflection

Even though I didn’t complete all of the tasks that I mentioned in my proposal, I still reached my minimum viable plan, which is only a tropical island with automatically generated balls. I’ve learned how to manipulate multiple different obj models in three.js. There’s no doubt that I still have room for a lot of further improvement. With more time, I may be able to complete what I proposed in my proposal and even in my stretch goal. I’ll also refine the visualization and have more conceptual development.

Struggles & Further Improvement

What I Struggled With:

User Interaction: During the process of making this project, I failed to apply the interaction that I planned to make, the control of ball’s generation, into the project. I tried to create a parameter in the GUI controller, but somehow it didn’t work very well. I also considered other interactions, but due to time constraints, I wasn’t able to create more interesting interactions.
Applying textures onto the obj models: Since the obj models that I chose are sometimes quite complicated, it needs to be applied its own textures in order to have a better appearance. However, I haven’t figured out how to apply the texture onto the models. For now, I only used a single color on the model, but I’ll try to apply the texture if I have more time later.
Movement of the objects: The movement that I struggled with the most is the bouncing movement of the balls. Since the balls are jumping out of the crater of the volcano, the turning points of the balls’ velocity should follow the slope of the volcano and the beach. But I struggled with the math calculation for more accurate limits of the “bouncing” turning points.
Manipulating the movement of the obj models: I planned to use the balls to complete the movement part first and then turn them into fruit models, like I mentioned in my proposal. However, as I was adopting new models, somehow it cannot be generated constantly. So I remained to use only balls as the objects that jump out of the volcano.

What I Would Develop My Project Further:

Interactions!!!: I want to complete what I mentioned in my proposal, which is to control the generation of the fruits. So after I figure out how to manipulate the constant generation of models, I’ll apply several kinds of fruit models into the project. The audience may be able to control the generation speed, the kinds and sizes of fruits it generates, and the speed of the fruits’ movement. I also plan to create more interactions. For example, when the audience clicks the banana boat on the sea, the big banana boat will explode like a firework and become multiple small banana boats scattered on the sea.
Animation & Sound: For more dynamic effects, I want to create a floating movement for the objects rushing into the seam those banana boats that are already floating on the sea, and the cloud in the air. I will add the sound effect of fruit popping out of the crater.