3D website, build to deploy

How to Build and Deploy a 3D Website With Windsurf, GLB and Netlify

By Shreyas Raj. Written from my YouTube video, about 17 minutes long.

Video: This $5,000 3D AI Website Took Me 17 Minutes to Build on the AI with Shreyas Raj YouTube channel.

Short answer: Find design inspiration, generate or download a GLB 3D model, preview it in Babylon.js, host the file on GitHub, and give its URL plus a one-shot prompt to Windsurf. Push the result to GitHub, deploy on Netlify, and prompt the agent to fix mobile layout.

What you will learn

How to find inspiration and choose a simple 3D object
Why GLB is the format to use and how to preview it
How to host the model file on GitHub for your agent
How to build with a one-shot prompt in Windsurf
How to deploy from GitHub to Netlify
How to fix bugs and mobile layout with a screenshot and a prompt

Find inspiration, then the model

I get inspiration from Pinterest. For this build I searched for a basketball website, found a design from a design agency I liked, and recreated something similar. The most important asset is the 3D model, and you have two routes.

You can generate one in Meshy by typing a prompt, or you can download a free model from a 3D library such as TurboSquid. In my experience, AI 3D is not at its peak and can mess up details, so a human-made public model is sometimes cleaner. Simple, rigid objects like a ball are much easier than anything that needs rigging in Blender.

The same idea transfers to any business. If you are building for a dentist, for example, you could put a denture on the page, and the principle remains the same. The goal of the video is to help you recreate the workflow so you can use your own imagination for the object.

Keep your scope small for your first attempt. A single rigid object, a clean scroll animation and one section of copy are enough to learn the whole pipeline.

Texture and download as GLB

In Meshy I generated a classic basketball, then used the texture option to add texture. The first result was not shiny enough, so I waited for the second output and picked the smoother one. Download it as a GLB. I say any other format makes the 3D model laggy on a website.

It is also worth generating a few variants if your tool allows it. In my case I waited for the second output because the first looked dull, and the second was much closer to what I wanted.

Preview it in Babylon.js

Before building anything, drag the GLB file into the Babylon.js viewer to check it. If the shape or texture is off, go back and find another model instead of discovering the problem inside the website.

Use this viewer as a quick pass or fail test. You are looking for broken geometry, missing texture and odd scale. If it passes here, it will almost always behave on your page.

Host the GLB on GitHub

Create a repository for the file, upload it, and copy the file URL. Then tell your agent that this URL is the 3D object. The point is to give the agent easy access to the model. You can also place the file in a public folder in the project instead.

One problem I ran into is that GLB files are often 100 to 200 MB, and GitHub will not accept that. In the video I say to compress the file to below roughly 20 to 25 MB first.

The point of this step is to give the agent access to the 3D model, and there are two ways to do that. Either host it on GitHub and give the link, or create a public folder in the project and drop the file inside. I used GitHub because it keeps things organized.

Name the repository clearly so you can find it later. In the demo I called it the 3D basketball file and uploaded through the website's upload option, then committed the change.

Build with the one-shot prompt in Windsurf

Windsurf has a 14-day free trial, which is how I use it. Create a new folder, open it in the editor, paste the model URL and the one-shot prompt, and ask it to build the complete website and run it locally.

If you see a connection error, it may be that a premium model is not available on your plan. In the video I say to switch to a Sonnet model, which worked fine. The prompt itself took me hours to refine, which is why it is shared as a pack.

Once the build finished, the site was running locally. I thought the original design looked better, partly because the model in the original is a professional public asset, but the result was still good. As you scroll, the ball moves around, and a product of the day section appears.

While it builds, you can set up your hosting. Netlify is a free hosting platform that also handles DNS, so the same account can later point a custom domain at the site.

Push to GitHub and deploy on Netlify

Create another repository for the website code, give its URL to the agent and ask it to push when the build is done. If it asks for an SSH key, tell it to use the HTTP method, or create a personal access token, or use the GitHub MCP.

Then in Netlify, import the repository and deploy. If the page loads blank, take a screenshot and give it to the agent with a request to fix and push again. Netlify will pick up the new code automatically. A custom domain is optional and needs DNS changes.

It is normal for the first deploy to show nothing. A missing file path or a build setting is usually the cause, and a screenshot gives the agent enough context to track it down.

Optimize for mobile

The first version may not look right on phones. Prompt the agent to optimize the whole website for mobile and make sure there is no floating text, then push again. Check the result in a phone preview, and if you find a bug, send a screenshot back to the agent.

In the demo I switched the preview to a phone size and confirmed the layout worked there. If something is off, a screenshot plus one sentence describing the problem is usually enough.

Treat each prompt as a small, specific request. One change per prompt keeps the result predictable and makes it easy to see what the agent did.

Watch the full video to see the model generation, GitHub upload, Windsurf build and Netlify deploy in order.

Watch the full video See EducateXAI

Results vary and depend on your effort. Read the results disclaimer.

Questions people ask

Which 3D format should I use for a website?

In the video I say to use GLB. Other formats can make the model laggy, and GLB files can also be previewed quickly in the Babylon.js viewer before you build. That is what I found works in practice.

Why host the model on GitHub?

It gives your AI agent an easy URL to access the file. You can also place the file in the project's public folder. I say GitHub rejects very large files, so compress below roughly 20 to 25 MB.

What if the deployed site shows a blank page?

Take a screenshot and give it to your AI agent with a request to fix and push the code again. Netlify picks up the new commit and redeploys automatically. That is what I found works in practice.

Can I get the model for free?

Yes. You can generate one in Meshy or download an open model from a 3D library. In the video I note human-made public models are sometimes cleaner than AI-generated ones. That is what I found works in practice.

More from the channel

Prefer short reads? Start with the EducateXAI guides.