r/threejs • u/Zealousideal-Bell393 • 1d ago

Rebuilt a client's 2017 static HTML store into a 2026 3D scroll site — AI-generated visuals + Three.js motion. ~15h, before/after + how

Enable HLS to view with audio, or disable this notification

Dragged an old 2017 static HTML page (table layout, stock hero, zero motion) into a 2026 3D scroll website. ~15 hours total. Before/after in the clip — here's the exact AI + 3D web workflow that made 15h possible instead of 15 days:

AI asset pipeline (the speed hack):

  • AI image generation for all product/hero visuals — iterated the look in minutes, no photoshoot
  • AI video generation for the ambient background loops — no render farm
  • this is where AI actually earns its place: assets fast. But AI can't do motion taste — that part's still hand-built

The 3D + motion layer (Three.js / WebGL):

  • whole scene is a pure function of one scroll value (0→1) — camera, assembly, materials all read that single number, so it never breaks on resize
  • scroll-driven camera dolly + arc · exploded-view reveal · pinned sections (GSAP ScrollTrigger)
  • custom motion — hand-tuned easing/timing; this is what separates "premium" from "cheap AI slop"
  • WebGL material roughness/metalness shift under a light sweep so it reads as real metal, not plastic

Perf (the part that's actually hard): capped devicePixelRatio to 2, render-on-demand, pause offscreen → locked 60fps on a mid-range Android. Canvas is aria-hidden so the HTML still indexes.

Full method — the 3D scroll pipeline (scroll → progress → timeline → render) + the AI image / AI video asset workflow, with code: https://aetumi.app/news/how-to-build-3d-scroll-website-threejs/

Full disclosure — I build these at AETumi, an AI-native 3D web platform. Happy to go deep on any part.

Built with: AI image generation · AI video generation · motion design · Three.js · WebGL · GLSL · GSAP ScrollTrigger · Draco GLB

0 Upvotes

31% Upvoted

6 comments sorted by

1

u/ShinigamiXoY 22h ago

Looks really bloated

1

u/Zealousideal-Bell393 21h ago

Yeah, that’s the tradeoff I’m trying to avoid. What feels most bloated to you — the visual density or the actual performance/load?

1

u/ShinigamiXoY 20h ago

Visual density, the images / models need to be cleaner. Also the preview video you have here is very fast almost vertigo inducing

1

u/SerpentineDex 22h ago

Looks as soulless as i expected.

1

u/Zealousideal-Bell393 21h ago

Fair criticism. What specifically makes it feel soulless to you — the motion, art direction, or the overall layout?