Course Summary: 3D Websites

You just built and deployed a 3D website that most web developers cannot build.

Here is everything you learned and how it fits together.

What you learned

What makes a website 3D. Most websites exist in two dimensions. A 3D website adds depth using WebGL, a graphics API that gives browsers direct access to the device GPU, and Three.js, a JavaScript library that makes WebGL usable without graphics programming. You describe what you want to see and Claude writes the code.

The canvas layer. The Three.js scene lives inside a canvas element placed behind your HTML content at z-index minus 1. Your text, buttons, and navigation sit above it at a higher layer. The 3D scene is the environment. The HTML is the content.

Effects you can build. Particle backgrounds with mouse interaction, rotating 3D geometric objects, scroll-driven animation using GSAP ScrollTrigger, interactive parallax using mouse tracking, 3D card tilt, and cursor spotlight effects. Medium complexity and below is achievable in a single Claude Code session.

How 3D works in a browser. Every scene needs three things: a scene which is the container, a camera which is the viewpoint, and a renderer which draws the output 60 times per second. Objects are made from geometry which is the shape and material which is the surface. Lights behave like real lights. JavaScript converts your mouse position into 3D coordinates for interaction.

Building a particle background. 800 particles on desktop and 400 to 500 on mobile, each with a unique drift velocity, mouse repel interaction within a radius, a slowly rotating particle system, and a fixed full-screen canvas behind the page content.

Building a rotating 3D object. A geometric shape with chosen material finish that rotates continuously and tilts subtly in response to the cursor using GSAP quickTo for smooth interpolation. Canvas placed in a specific section with transparent background.

Scroll animations. GSAP ScrollTrigger converts scroll position into animation progress with scrub: 1 for smoothing. Three CDN links in exact load order: Three.js, then GSAP, then ScrollTrigger. gsap.registerPlugin(ScrollTrigger) called at the top of main.js before any usage.

Interactive 3D effects. Mouse parallax using CSS transforms with no Three.js needed, 3D card tilt with a sheen highlight using CSS perspective and JavaScript mouse offset calculations, and cursor spotlight using CSS radial-gradient updated with CSS custom properties.

The master 3D build prompt. A single comprehensive prompt covering files, CDN order, page structure, design tokens, the complete 3D effect specification, lighting, mobile breakpoints, page load animations, and a self-check. More specificity in the prompt produces more accurate results on the first build.

Debugging 3D sites. Always check the console first using F12. Most problems are a black canvas from missing alpha settings, invisible geometry from a mispositioned camera, broken mouse interaction from missing coordinate conversion, or GSAP errors from wrong CDN load order. Describe what you see and paste the console error. Never try to read the JavaScript yourself.

Performance. Limit pixel ratio with renderer.setPixelRatio(Math.min(devicePixelRatio, 2)). Reduce particle count on mobile to 400 or fewer. Keep geometry and material creation outside the animation loop. Pause rendering when the canvas is off-screen using IntersectionObserver. Target 60fps on desktop and 45fps or above on mobile.

Deployment. Three files deploy to Netlify Drop exactly like any other website. No build step and no server required. Test the live URL on a real phone immediately after deployment. Create a free Netlify account to keep the site permanently.

The repeatable system

For every 3D website you build from here, follow this order.

Choose one effect from the effects catalogue. Decide your visual direction including colours, fonts, and effect-specific choices. Write your real content including headings, subheadings, and CTA text. Fill in and send the master 3D build prompt. Test locally covering the 3D effect, console, mouse interaction, and mobile. Debug any issues using the error-first approach. Apply the performance optimisation pass. Deploy to Netlify Drop. Test on a real phone and fix anything that fails. Share the live URL.

What you have now

A complete deployed 3D website. A system for planning and prompting any 3D effect. Working prompts for particles, rotating objects, scroll animation, and interactive effects. A debugging methodology that fixes Three.js problems without reading code. A performance checklist that keeps 3D sites smooth on mobile.

What is coming next

Track 7 is AI Agents.

Everything built so far has been triggered by you. You write a prompt, Claude responds. You click a button, the app does something.

AI agents are different. They are given a goal and they work toward it autonomously, taking multiple steps, using tools, making decisions, and producing a result without you having to direct every action.

Track 7 teaches you how to build, run, and deploy AI agents using Claude Code. This is where the work stops being impressive and starts being genuinely autonomous.

Do the homework before moving on. The homework is in the next lesson.