Deploy Your 3D Website

A 3D website on your local machine impresses nobody. A 3D website on a live URL impresses everyone who sees it.

The deployment process is identical to deploying a regular website. Three.js runs entirely in the browser so there is no server, no build step, and no configuration. Your three files go live exactly as they are.

Step 1: Pre-deploy checklist

Do not skip this. Run through all five checks before uploading anything.

Zero console errors: open the site in Chrome, press F12, click Console, and confirm there are no red errors. Any red error that exists locally will exist on the live site too.

3D effect working: the effect is visible, animating, and responding to interaction.

Mobile tested: resize the browser to 375px or use Chrome DevTools mobile view. The layout stacks correctly and the 3D effect is visible without breaking the page.

Fonts loading: the text on the page uses your chosen Google Font and not a fallback system font. If fonts look wrong press F12, click the Network tab, filter by Font, and confirm font files are loading with a 200 status.

No placeholder content: search for any remaining text in square brackets from the prompt template. Nothing like [YOUR HEADING] or [ACCENT HEX] should appear on the finished page.

Step 2: Prepare your project folder

Your folder should contain exactly these files and nothing else visible to visitors:

my-3d-project/

├── index.html
├── style.css
├── main.js
└── CLAUDE.md  ← this is for Claude Code only, it does not affect the live site

If you have any test files, duplicate files, or old versions in the folder, move them somewhere else before deploying.

Step 3: Deploy to Netlify Drop

Go to app.netlify.com/drop. Drag your entire project folder into the grey drop zone. Not just the files inside but the whole folder. Drop it.

Netlify processes the files in about 10 to 20 seconds. A live URL appears. It looks something like:

https://delightful-dolphin-abc123.netlify.app

Copy the URL. Open it in a new browser tab. This is your live site.

Step 4: Test the live version immediately

Open the live URL in Chrome and run the same checks you ran locally.

3D effect loads: do not assume it works because it worked locally. CDN links, script load order, and file paths can sometimes behave differently on a live server.

Console clean: press F12 on the live URL and check the Console tab for any errors that only appear on the live version.

Real phone test: open the URL on your phone. Interact with the 3D effect. Scroll through every section. Check the frame rate feels smooth.

Mouse interaction: on desktop, move the cursor across the 3D effect and confirm it responds.

Step 5: Claim your site permanently

Without a Netlify account the live URL expires after 24 hours.

To keep it permanently, go to app.netlify.com and create a free account. After logging in find your recently deployed site listed on the dashboard. Click Claim Site to attach it to your account.

The site is now permanent and completely free for as long as you want it.

You can also rename the URL from the random string to something cleaner. In your Netlify dashboard click on the site, go to Site Configuration, then Change Site Name, and set a name like my-portfolio-3d.netlify.app.

Step 6: Update the site

Every time you make changes locally and want to push them live, go back to app.netlify.com/drop and drag the updated folder into the drop zone again. Netlify replaces the previous version at the same URL.

If you are logged in, Netlify recognises the site and asks if you want to update the existing deployment. Click Update to deploy.

Alternative: GitHub Pages

If you prefer a permanent solution without creating a Netlify account, use GitHub Pages.

Go to github.com and create a free account. Create a new public repository. Upload your three files: index.html, style.css, and main.js. Go to Settings then Pages. Under Source select Deploy from a branch. Choose main and click Save.

Your live URL will be: https://yourusername.github.io/repository-name

GitHub Pages is free permanently and updates automatically when you push new files to the repository.

Common deployment issues

3D scene visible locally but not live

This almost always means the Three.js CDN failed to load before main.js ran. Check that the CDN script tags appear before the main.js script tag in index.html. The correct order is Three.js CDN, then GSAP CDN, then ScrollTrigger CDN, then your main.js.

If you added the defer attribute, note that deferred scripts load in order but after the page HTML has parsed. If Three.js and main.js are both deferred they will load in order correctly. But if only main.js is deferred and Three.js is not, Three.js might finish loading after main.js tries to use it. Keep all three in the same loading mode.

The 3D scene works locally but does not appear on the live Netlify URL.

Check the CDN script loading order in index.html.

Ensure the Three.js CDN tag comes before main.js.

Remove the defer attribute from all script tags and load them synchronously

in this order: Three.js CDN, GSAP CDN, ScrollTrigger CDN, then main.js.

Fonts not loading on the live site

Google Fonts requires an internet connection. If you were testing locally without internet and fonts did not load, they will load correctly on the live site. If they still do not load on the live site, check that the link tag in your HTML head points to fonts.googleapis.com and not a local file path.

Slow first load on the live site

Three.js r128 minified is approximately 580kb. On a slow connection this takes a moment to download. This is normal for 3D sites. You can reduce perceived load time by adding a simple CSS loading state that shows the page background and heading immediately while the 3D script downloads.

Add a loading state to the page. Show a CSS-only animated dot or spinner

while the page is loading. Hide it using JavaScript once the Three.js scene

has been initialised. The heading text should be visible during loading even

without the 3D effect so the user sees content immediately.

Your action right now

Run the pre-deploy checklist against your local site. Fix anything that fails. Drag your project folder to app.netlify.com/drop. Open the live URL on your phone.

When the 3D site looks correct on a real device you are done. Share the link in the Claude Codex Mastery community.