3D Website Lab

What you'll make

An original product landing-page starter with a Three.js geometric object, a pause control and a static fallback. The sample sells no real product and includes no checkout integration.

What's inside the download?

• 14-page PDF field guide
• 10 editable prompts
• Original worked example and starter files
• Blank and filled worksheets
• Repository source register and usage notes

The PDF is paired with an editable Markdown guide, a prompt library, blank and filled CSV worksheets, source references and a starter README.

Look inside the actual edition

A workshop page from the guide, followed by an original example included in the practical files.

Six practical workshop steps

1. Design the page before the scene
2. Understand the small scene
3. Treat motion as optional
4. Make resizing predictable
5. Use the fallback as a real design
6. Prepare the handoff

Your first session

1. From starter/, run: python -m http.server 8011 --bind 127.0.0.1
2. Open http://127.0.0.1:8011/ in a browser.
3. The starter loads a pinned Three.js module from jsDelivr; allow that request to see WebGL.
4. Use Pause motion, then block the module or disable WebGL to inspect the CSS fallback.

Requirements and scope

An AI coding tool and a browser. Supply your own licensed models, images or video when the brief needs them.

The starter is a front-end demonstration. It needs a network connection for the pinned Three.js dependency unless you vendor it with its license. It does not supply a domain, payment processing, a custom model or a performance certification.

Public tools behind the workflow

These tools are available from their original authors. This independent guide adds instruction and original exercises; tool access, model weights and service accounts are separate.

• mrdoob/three.js ↗MIT · source revision fbd9bf606ca4License at reviewed revision
• microsoft/playwright ↗Apache-2.0 · source revision 57b41cc220feLicense at reviewed revision

Try an editable prompt

Replace the bracketed fields with your own project details. This sample is part of the included prompt library.

Inspect my current app before editing. Build a product landing page for [PRODUCT] aimed at [AUDIENCE]. Use [EXISTING STACK]. Start with a readable HTML hero and [PRIMARY CTA]. Add one optional 3D object from [LICENSED ASSET] only after the main content loads. Provide a static poster when WebGL fails, reduced motion is enabled or the device cannot sustain the scene. Keep text and navigation outside the canvas. Return the implementation plan, asset requirements and checks for keyboard access, small screens and loading performance.

Compare every product ↗