3-Ways Ghost Display Confirm Button

Description

I used lots of "3"s this time! 😅

I tried to render a 3D image using ThreeJS.

At first, I was intimidated by ThreeJS, because it is a 3D rendering engine! I mean, at first, I thought 3D was too complicated that it's impossible for me to understand the underlying concept about it.

Although it was actually complicated to understand (Yes, because I understood the concept of 3D in different way. I mostly created 3D rendering by using HTML and CSS), it is actaully really fun to learn! It makes me wonder of what others object I could create using modelling tool like Blender, or just use the default geometry provided by ThreeJS, and just add a texture on it.

I thought of using GSAP in animaton, because why not? I mean I already know the main concept in how to use this animation tool.

There are lots of commented-out codes here. I will not clear these comments for me to use those as my reference in the future.

Other descriptions

When you hover on the "confirm" button, there are minion of ghosts will appear, and march anywhre randomly. I created these animations using GSAP.

When you try to click the "cancel" button, a blocking ghost will get in your way. I created the model using just HTML and CSS.

Next Steps

My next goal I think is to create an animated GLTF file, then use ThreeJS to animate this.

Also maybe, I could be more ambitious, to actually create a 3D game.

I will also try to improve my skills in creating a 3D model using Blender.

And I'm also thinking to create an object using these primitive geometries provided by ThreeJS, also the textures.

Resources

• Blender - I used this as my 3D modelling tool to create the model of the large ghost.
• ThreeJS - I used this to render my 3D model into the webpage.
• GSAP - I used this to create an animation of the Ghoost, and also its minions.

I created the model of this ghost by referencing that famous donut tutorial on the popular video streaming site.