Recently, I discovered a cool 3D model from a developer and found their code repository, so I implemented a simple version. Below, I'll demonstrate step by step how to use a .glb 3D model in your project in the simplest way possible.

First, we need a 3D file. Here I'm directly using the 3D file from the developer's project. Let's get it working first, then we can research where to find .glb files.

Let's assume we have a 3D file named , and we place it in the directory.

Since I'm using a TypeScript project, we need to install the following dependencies:

Create a new file :

Use this 3D model in your page component:

At this point, when you run the project, you should be able to see the 3D model on the page! The next step is to ask GPT what each parameter means, then adjust the parameters to achieve the desired effect.

It's actually quite simple, right?

Using 3D models might seem like a complex thing before you start, but by breaking down the big, vague problem into a minimal working example first, then gradually building it up piece by piece, we can eventually master this technology.

Of course, if you want to dive deep into Three.js, it can be quite complex. I've heard it involves knowledge of computer graphics and such. If you want to create your own models, you'd also need to learn Unity. But my requirement for this aspect is simple: if I have a .glb file provided to me, I can display it on the page, then fine-tune the details little by little - that's enough for me.