KSP Goes to Schools Season 18: SMA Kr. Anak Bangsa, 10 December 2024, 3D Animation Programs
In this edition of KSP (Knowledge Sharing Program), I, Yoga Pramana Syahputra Teguh, presented a material from the Informatics department, namely 3D Animation Programming. This program was held on December 10, 2024 at the hall of SMA Kr. Anak Bangsa at 13.00 to 14.15 WIB.
In this edition of the program, I was accompanied by Ma'am Jenny Ngo and Hansen from the KSP team, and Kevin from ISTTS Digital Marketing. The program opened with a promotional video of ISTTS fully made by AI. Then, Kevin explained to the children that the video they had just watched was a fully AI-generated video. After that, I began to explain the material that I brought, namely 3D Animation Programming.
In the material I brought, I taught how to create 3D Animation using JavaScript and one of its libraries, namely Three.js. First, I explained how to install Three.js and Vite using the Three.js documentation (https://threejs.org/docs/#manual/en/introduction/Installation). Then, I explained how to import Three into the JavaScript that is being used. After importing, I explained to the children that the first thing to do after importing Three is to create a scene. After creating the scene, we create a camera using PerspectifCamera. I also explained that what needs to be set when creating a camera is the Field of View, Aspect Ratio, Near Clipping Plane, and Far Clipping Plane. After setting up the camera, we start setting up the renderer so that what is animated can be displayed as far as desired. In this renderer, I use WebGLRenderer. After the renderer is successfully set up, I want to create a simple 3D box animation using BoxGeometry. After that, I gave the 3D box a color texture using MeshBasicMaterial. After it was successful, I combined the two components (Box and its color) into 1 and then inserted it into the scene. Because I wanted to use the keyboard to rotate the 3D box, I used window.AddEventListener keydown and keyup to take care of it. I also wanted to use WASD as the key used to rotate the 3D box, so I set the W key to rotate up, A to rotate left, S to rotate down, and D to rotate right. In addition, I also set up the animation to react to the changing window size by adjusting the camera aspect ratio and renderer size.
After the material is finished, I hold a quiz using quizizz about the material I have just taught. The winner of this quiz will be given a prize directly from KSP itself. At the end of the event, I and the quiz winners took a photo as a form of event documentation. I did not forget to display the Criticism and Suggestion QR for the children to give their criticism and suggestions. After that, the event was officially over.
