Browsers are becoming more capable. The web is more powerful than ever. And serverless is the fastest-growing cloud service model. There must be a way to take advantage of these technologies for rendering 3D content for cheap at scale.
To keep things simple we'll be using React Three Fiber and Drei, a collection of helpers and abstractions around React Three Fiber.
Now, we'll need to load a 3D model. We'll be loading a glTF asset, a transmission format that's evolving into the "JPG of 3D assets". More on that in future posts!
Let's add the GLB (binary version of glTF) to the /public directory. You could also pass a GLB hosted elsewhere to the useGLTF hook.
⚠️ Note that we're creating a new api directory and not using the existing pages/api. This is to avoid functions sharing resources and exceeding the serverless function size limit on Vercel (where we'll be deploying the app to). More info here and here.
⚠️ Also, in order for serverless functions to be picked up from the root directory you'll need to run vercel dev locally to test the API route (as opposed to npm run dev).