Scroll-driven 3D product experiences using Three.js, GSAP ScrollTrigger, and WebGL shaders
Three.js Interactive Product Showcase is the definitive AI prompt framework for developers building immersive, scroll-driven 3D product experiences on the web. Every prompt is engineered around the real architecture of production Three.js applications — not toy demos. The framework covers the complete technical stack: scene graph construction, GLTF model loading with Draco compression, GSAP ScrollTrigger timeline orchestration, custom GLSL shaders for material effects, HDRI environment lighting, raycasting for interactive hotspots, and the performance optimization pipeline that keeps 60fps on mobile. Built for agencies, product teams, and developers who want to ship Apple-quality 3D web experiences.
Full Access Unlocked
All 48 prompts · All 6 modules
"The ScrollTrigger camera path prompt alone saved us 3 days of R&D. The CatmullRomCurve3 + lookAt int..."
Creative Director · Digital agency, Fortune 500 clients
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
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.
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.
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.
Add your API keys as secrets
Critical — Novice UsersIn 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.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
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."
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.
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.
6 modules · 48 prompts · 6 workflow stages
Scene Architecture
WebGLRenderer setup with tone mapping and color space, PerspectiveCamera rig, scene graph hierarchy, fog, and background environment
8 promptsModel Loading & Assets
GLTFLoader with Draco compression, progressive loading with placeholder geometry, texture optimization, and asset management pipeline
8 promptsScroll Animation System
GSAP ScrollTrigger timeline setup, camera path animation along CatmullRomCurve3, object rotation/scale/position keyframes, and scrub-based animation
10 promptsCustom GLSL Shaders
ShaderMaterial and RawShaderMaterial setup, vertex displacement shaders, fragment color effects (holographic, iridescent, dissolve, fresnel), and uniform animation
10 promptsLighting & Materials
HDRI environment map loading with RGBELoader, PBR material configuration, area lights, and dynamic shadow casting
6 promptsInteraction & Performance
Raycaster hotspot system, pointer events, LOD setup, instanced mesh optimization, frustum culling, and mobile performance profiling
6 promptsWrite a production-ready Three.js scene setup in TypeScript. Requirements: (1) WebGLRenderer: antialias true, outputColorSpace THREE.SRGBColorSpace, toneMapping THREE.ACESFilmicToneMapping, toneMappingExposure 1.2, shadow map type THREE.PCFSoftShadowMap, pixel ratio capped at Math.min(window.devicePixelRatio, 2). (2) PerspectiveCamera: FOV 45, near 0.1, far 100, initial position [0, 1.5, 5]. (3) Scene: add a subtle exponential fog. (4) Resize handler: update camera aspect and renderer size on window resize, debounced 100ms. (5) Animation loop: use requestAnimationFrame, delta-time via THREE.Clock, call a user-supplied update(delta) callback each frame. (6) Cleanup: export a dispose() function that cancels the animation frame, disposes renderer, and removes event listeners. Structure as a class ThreeScene with constructor(canvas: HTMLCanvasElement), update(delta: number), and dispose(). Include all necessary Three.js imports. Add JSDoc comments on each method. Do NOT use any deprecated Three.js APIs — target Three.js r165+.
Write a GSAP ScrollTrigger animation that moves a Three.js PerspectiveCamera along a CatmullRomCurve3 path as the user scrolls. Requirements: (1) Define a CatmullRomCurve3 with 6 control points that orbit around a central product model — start front-facing, arc to a 45° side view, continue to rear, then return to front elevated. (2) Use GSAP ScrollTrigger with scrub: 1.5 and a trigger element that spans 400vh. (3) Animate a progress value 0→1 along the curve; on each GSAP tick, call curve.getPointAt(progress) for camera position and curve.getTangentAt(progress) to compute a lookAt target offset. (4) Smoothly interpolate camera.lookAt toward the product center using THREE.Vector3.lerp with a 0.05 factor inside the render loop. (5) Pin the canvas container during the scroll sequence. (6) Add a GSAP timeline label at progress 0.5 where a product detail panel fades in using a separate CSS opacity tween. Include full TypeScript types. Explain each ScrollTrigger option used.
system
18 prompts
workflow
14 prompts
templates
10 prompts
prompts
6 prompts
"The ScrollTrigger camera path prompt alone saved us 3 days of R&D. The CatmullRomCurve3 + lookAt interpolation pattern is exactly how Apple-style scroll experiences are built — and having it as a prompt we can adapt per project is a game changer."
Creative Director
Digital agency, Fortune 500 clients
"The GLSL shader prompts are the most technically precise AI-generated shader code I've seen. The fresnel and iridescent effects work on the first try — no hallucinated uniforms or broken syntax."
Senior Frontend Engineer
Consumer hardware brand
All 48 prompts across 6 modules are unlocked for your account.
Lifetime access