Three.js website examples you can rebuild with AI

The Three.js websites most worth rebuilding are Bruno Simon's drivable portfolio, abeto's Messenger and Igloo Inc, Henry Heffernan's desk with a working computer on it, Jesse Zhou's ramen shop, Lusion's Oryzo and Why Zero. Each one is a different technique, and each technique can be described to an AI model as a short list of values.

Rebuild the technique, never the work. The art, the models and the copy belong to the people who made them. What you can take is how the scene is put together, which is exactly the part a model needs spelled out.

The seven at a glance#

Each row is a technique you can name in a prompt. The stack column is what the makers or their award pages publish, nothing inferred.

Three.js now, in five facts#

Three.js is the JavaScript 3D library under all seven sites below: five by their makers' own account, two by their Awwwards tags. It moves fast enough that a two-year-old tutorial can mislead you. Five facts, checked on the project's own pages on 9 November 2026:

1. The current release is r187, published on GitHub on 30 October 2026 and on npm as three@0.187.0. It is MIT licensed.
2. WebGPURenderer is documented in core. The docs say it falls back to WebGL 2 where WebGPU is missing, and a forceWebGL option forces the fallback.
3. TSL, the Three Shading Language, lets you write shaders as JavaScript nodes that compile for either renderer. It has its own documentation page.
4. The examples page has more than six hundred demos, each with source, at threejs.org/examples.
5. React Three Fiber is at v9, the line that pairs with React 19, and a v10 alpha is being previewed with WebGPU support, according to the R3F docs. Its helper library, drei, supplies useGLTF, Environment, ScrollControls and Html.

Version numbers matter in a prompt. A model trained on older code may write renderer.outputEncoding, which newer releases replaced with renderer.outputColorSpace. Naming the release in the brief, as in three@0.187, removes that whole class of error, which is why some paid 3D prompt libraries pin their dependency versions.

Worlds you move through#

Two of the seven are games, and both are the case where real-time 3D is unavoidable: the visitor decides where the camera goes.

Bruno Simon's island#

Bruno Simon's portfolio puts you in a small car on an island with a day and night cycle, seasons, weather and a lap leaderboard. His Awwwards case study says it runs on WebGPU where supported, with TSL shaders and assets made in Blender, and the public folio-2025 repository lists three, the Rapier physics engine, howler for audio and GSAP. It was Awwwards' Site of the Month for January 2026.

To rebuild the technique, the brief needs the physics and the camera as numbers: a fixed physics step of 1/60, a raycast vehicle with four wheels, a chase camera that eases toward a point 6 units behind and 3 above the car with a lambda of about 4, and touch controls that map one drag to steering and throttle.

Kickflip, from the Thanor library, is the same category built the other way round: a room you walk, drawn by hand-written WebGL 1 with no library at all. Asking a model to port it to Three.js is a fair exercise; the camera, the palette and the deck behavior are already written as values.

Messenger's tiny planet#

Messenger, by abeto, is a roughly fifteen-minute game on a tiny planet where you make deliveries across seven areas, see up to ten other players and talk in 3D emojis. abeto's case study names Three.js, three-mesh-bvh and C++ compiled to WebAssembly. Awwwards named it Developer Site of the Year 2025.

The core of a tiny-planet game is one line of vector math: the character's up direction is position.clone().sub(center).normalize(), recomputed every frame, and gravity points the other way. three-mesh-bvh is the library that keeps ground raycasts against a detailed mesh cheap enough to run every frame.

Scenes you scroll through#

Scroll-driven Three.js keeps the camera on a rail you set and lets the reader control only the speed. It is also the pattern most worth questioning, since a fixed camera path is exactly what a film records; that trade is set out in the case for films over live scenes.

Igloo Inc's ice#

Igloo Inc turns each project into a uniquely shaped block of ice you scroll past, and ends in a particle simulation with sound. abeto built it with Bureaux, and their case study lists Three.js, three-mesh-bvh, Svelte, GSAP and Vite, with Houdini and Blender for the assets. It carries Awwwards' Site of the Year badge for 2024.

The material is the part to specify. Ice in Three.js is a MeshPhysicalMaterial with transmission: 1, a thickness around 1.2, an ior of 1.31, which is the refractive index of real ice, and a roughness near 0.15 so the edges frost slightly. The scroll is a GSAP timeline with scrub: 1 and ease: "none", as set out in the GSAP ScrollTrigger prompt guide.

Why Zero's story#

Why Zero, by Sindhur Dutta with Zero, is an interactive story about an AI-native university, tagged Three.js, GSAP and Blender on Awwwards, where it was Site of the Month for September 2026. A story site needs one more value than a product scroll: the length of each chapter, in viewport heights, so the brief reads like a storyboard. For example, 120vh per chapter, with the camera holding still for the last 20vh of each so the copy can be read.

Objects and rooms#

The last three are single places rather than journeys: a desk, a shop, a product. They are also the easiest of the seven to rebuild well, because the camera barely moves.

Henry Heffernan's desk#

Henry Heffernan's portfolio is a 3D computer setup whose monitor runs a separate 2D operating system site. His repository lists three, React, TypeScript and GSAP, and the live build places the OS site on the screen as an iframe through CSS3DObject.

The standard way to build this is two renderers stacked: a CSS3DRenderer underneath for the iframe, a WebGLRenderer with alpha: true on top, and the screen mesh drawn with opacity: 0 and blending: THREE.NoBlending so it punches a hole the iframe shows through. The iframe gets the screen's exact world transform, and the camera eases in when it is clicked. More portfolios built this way, and what each one does for the work it shows, are in 3D portfolio websites.

Jesse Zhou's ramen shop#

Jesse Zhou's portfolio opens on a loading screen for "Jesse's Ramen" and a start button. His Ramen-Shop repository lists three, GSAP, howler and postprocessing, and it received an Honorable Mention on Awwwards in 2022. The usual way to get a diorama to look this warm in real time is to bake the lighting in Blender into one texture, so the browser draws the shop without calculating a single light.

Oryzo's coaster#

Oryzo is Lusion's deadpan launch page for a cork coaster, tagged Three.js and GSAP on Awwwards and its Site of the Month for April 2026. Lusion documented the project in a seven-part behind-the-scenes series. A single-object hero lives or dies on its material and light, so the values to state are the ones in the Claude walkthrough.

When Three.js is the wrong tool#

Not every page that looks 3D should load a 3D library. If the visitor never chooses the angle, the same look can usually be shipped as CSS, stills or a film, with nothing to compile and nothing to fall back from.

Octavo gets real depth from perspective and transform-style: preserve-3d. Grumps is four renders swapped on a turntable, with the background color moving between them in OKLCH. And Palenque is a single transparent WebP that the scroll carries from section to section. Each would take a few hundred lines of Three.js to imitate and would look no better for it.

The test is short. If the camera path is the same for every visitor, if the object never has to be turned by hand, and if the scene would be identical as a recording, Three.js is overhead.

There is a middle path, too. If the object has to be modeled and lit by hand but you do not want to write the scene, an editor such as Spline exports a scene you can embed, at the cost of a runtime you do not control. Spline alternatives compares that route with Babylon.js, PlayCanvas and the rest, and is honest about when the editor wins.

What the prompt has to specify#

A Three.js brief that a model can execute in one pass names the stack, the scene and the limits, in that order. The scene values are covered in depth in what a 3D website AI prompt must contain; the stack and the limits are the lines people forget. Here is an illustrative fragment, written for this article:

Stack: three@0.187, WebGPURenderer with WebGL 2 fallback, no framework.
Loading: one GLB, Draco compressed, fetched after first paint; headline in HTML.
Renderer: pixel ratio min(devicePixelRatio, 2), ACES filmic, exposure 1.1.
Loop: renderer.setAnimationLoop; stop it when the canvas leaves the viewport.
Interaction: raycast with three-mesh-bvh; no OrbitControls.
Fallback: if no WebGL, show poster.webp and the same copy, fully readable.
Reduced motion: final camera position, no animation.

Two habits make the result better whatever the model. Build the scene alone in one file before asking for the page around it, so problems in the canvas are not tangled with problems in the layout. And when the site is React, say @react-three/fiber@9 and @react-three/drei explicitly, or the model may mix plain Three.js patterns into components. For the wider workflow, see how to build a website with Claude Code.

The model matters less than the brief. Every current frontier model writes working Three.js, and the frontend model comparison sets out where they differ. Whichever you use, ask for the scene first and the page second, and paste errors back verbatim rather than describing them.

Mistakes when rebuilding a famous site#

Rebuilding from an example goes wrong in predictable ways, and each one has a fix you can put straight into the brief.

• Copying the version. Henry Heffernan's repository pins three at 0.137, from early 2022. Rebuild on the current release and let the model translate the patterns, not the imports.
• Asking for the look in one sentence. "Like Bruno Simon's site" gives the model nothing it can set. Name the physics step, the camera offset and the controls.
• Reusing assets. Check the license first. Bruno Simon publishes the folio-2025 code under MIT; most studio sites publish no source at all, and their models are not yours to lift.
• Shipping the desktop scene to phones. Halve the shadow map, cap the pixel ratio at 2 and drop post-processing below 768px.
• Leaving the page empty while it loads. The headline and the copy are HTML. The canvas can arrive second.
• Animating against the clock. Adding a fixed amount per frame runs twice as fast on a 120Hz phone. Use the frame delta, and ease with THREE.MathUtils.damp(current, target, 4, delta).
• OrbitControls by default. Models add them unless told not to, and they turn a directed hero into a model viewer. Write no OrbitControls in the brief.

Open Kickflip and port it#

The best Three.js exercise is a scene whose every value is already decided, because then the only variable is the code.

Open Kickflip and read how a real-time shop is specified, from the camera's S-curve to the deck that turns under the pointer. Of the designs on this page it is the one drawn live on a canvas, which makes it the right starting point for anyone learning Three.js by porting. Its prompt comes with any paid plan; paste it into Claude or Cursor as it is, or add "use three@0.187" to get the library version. If you work in Cursor or Claude, the Thanor MCP can pull it by name, and the library holds the rest of the designs.