For this week, we are asked to create generative structure with lights and shadows in three.js. Through research online, I found this project below, which uses the shadow of the hanging objects to form a Chinese character “敢” (gan3, also means “dare” in English). There is also a game that I used to play called Shadowmatic, which consists of manipulating the objects and their shadows. So I used them as my inspirations and planned to generate several pieces and form them into a Chinese character as well.
For the objects, I used PlaneGeometry() to create a function “getPiece()” in order to generate pieces of the character in random sizes. I formed a Chinese character “真” (zhēn), also means “true” in English. However, as I didn’t find a better way to determine the coordination of each piece, I just used several “for” loops in setupTHREE() for the coordinations. For the pieces’ movement, I created a rotation movement for it and used noise() to constantly change the y position of all the pieces.
There are two light sources in this structure: one is a SpotLight defined in a class, another one is a HemisphereLight. I manipulated the movement of the SpotLight with sin() and cos() in the animate() function so that the light source can bounce around to create more dynamic visualization. In the GUI controller, I also added an online reference to control the color of the SpotLight in real time.
The final outcome looks like this:
Reference:
https://threejsfundamentals.org/threejs/lessons/threejs-lights.html