HomeFrameworksThree.js 3D Web Framework
ProFeaturedNewv1.4L5 Semantic FrameworkUpdated July 2026

Three.js 3D Web Framework

Build immersive 3D web experiences with AI-generated scenes

4.9(142 reviews)1.8K installs44 prompts6 stages3D / Web3D
GPT-4ClaudeCursor

Three.js 3D Web Framework is the first AI system purpose-built for the emerging 3D web. It encodes expert Three.js architecture patterns, GLSL shader logic, and performance optimization strategies into prompt sequences that generate production-ready 3D scenes. The 3D web is the new UI — this framework is your entry point.

Full Access Unlocked

All 44 prompts · All 5 modules

30-day money-back guarantee
Secure checkout via Stripe
Lifetime updates (currently v1.4)
Instant delivery after purchase

"The shader generator alone is worth 10x the price. I used to spend days on GLSL — now I have a worki..."

Dmitri V. · Creative Developer

Need expert implementation?

Hire an Orchestrator

Connect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.

How to use this framework

No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.

1

Purchase & download the framework

Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.

2

Open your project — new or existing

This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.

3

Paste the Orchestrator Prompt into your builder's chat

Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.

4

Add your API keys as secrets

Critical — Novice Users

In your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.

Don't have a MySQL server?

You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.

How to set up cPanel MySQL & connect to your AI website →

Need help with Stripe?

Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.

Stripe API keys — setup & testing guide →

Need help with Anthropic?

Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.

Anthropic API key — setup & model guide →

Prompting Airo after setup — always name the file

When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."

See safe prompting examples →
5

Run the framework prompts inside your live app

Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.

6

Test end-to-end, then publish or hand off to your client

Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.

Who is this for?

Frontend developers building immersive product showcases
Creative agencies delivering 3D brand experiences
Game developers porting to the web
Startups building spatial UI / metaverse-adjacent products

Everything you get

44 production-ready prompts across 6 workflow stages
Scene architecture system (renderer, camera, lights, objects)
GLSL shader generation prompts (vertex + fragment)
Physics integration with Cannon.js / Rapier
Camera rig templates (orbit, fly, cinematic)
Asset pipeline prompts (GLTF, Draco compression)
Performance optimization stack (LOD, instancing, frustum culling)
Lifetime updates — currently on v1.4

What's Inside

5 modules · 44 prompts · 6 workflow stages

Modules(5 total)

Scene Architecture System

Generate a complete Three.js scene setup: renderer config, camera, lighting rig, and scene graph from a creative brief.

8 prompts

GLSL Shader Generator

Prompt sequences for generating vertex and fragment shaders — noise fields, displacement maps, holographic effects, and custom materials.

10 prompts

Physics & Interaction Layer

Cannon.js and Rapier integration prompts. Rigid bodies, constraints, raycasting, and pointer interaction systems.

8 prompts

Camera & Animation System

Camera rig templates for orbit controls, cinematic fly-throughs, and scroll-driven animations using GSAP + Three.js.

9 prompts

Performance Optimization Stack

LOD systems, geometry instancing, texture atlasing, frustum culling, and draw call reduction prompts.

9 prompts
Sample Prompts(44 total)
Scene Bootstrap·Claude

Generate a complete Three.js scene setup in TypeScript for [PROJECT DESCRIPTION]. Include: WebGLRenderer with antialias and tone mapping, PerspectiveCamera with sensible FOV and near/far planes, OrbitControls with damping, a 3-point lighting rig (key, fill, rim) using DirectionalLight and AmbientLight, a resize handler that updates camera aspect and renderer size, and a requestAnimationFrame render loop. Add comments explaining each configuration choice.

Custom GLSL Shader·GPT-4

Write a Three.js ShaderMaterial for [EFFECT: holographic / lava / water / neon grid / particle field]. Include the full vertexShader and fragmentShader GLSL code, the uniforms object with time and any required textures, and the Three.js material instantiation. The shader must be performant on mobile (avoid expensive operations in fragment shader). Add inline comments explaining the math.

Scroll-Driven Camera·Claude

Generate a scroll-driven camera animation system using Three.js and GSAP ScrollTrigger. The camera should follow a CatmullRomCurve3 path defined by [N] control points. Include: curve definition, camera position lerping along the curve based on scroll progress, lookAt target that also follows the curve offset by [DISTANCE], and smooth easing. The scene is [DESCRIBE SCENE].

Workflow Architecture(6 stages)

system

17 prompts

Stage 1

prompts

10 prompts

Stage 2

workflow

8 prompts

Stage 3

architecture

9 prompts

Stage 4

Everything included

Scene architecture prompts
Lighting & shadow system
GLSL shader generation
Camera rig templates
Physics integration (Cannon.js)
Asset pipeline prompts
Performance optimization stack
Full Access Unlocked

What builders say

"The shader generator alone is worth 10x the price. I used to spend days on GLSL — now I have a working shader in 20 minutes and I actually understand it."

DV

Dmitri V.

Creative Developer

You have full access

All 44 prompts across 5 modules are unlocked for your account.

$199$299

Lifetime access