Original Summary

I'm a product designer, not a developer. I brought the 3D models, the brand deck and the brief. Claude Code did the engineering (opus 5 then 5.5 after the release). The approach that worked: get a working structure first, then iterate in short 3 to 5 minute passes, with a checkpoint after each one so nothing broke silently. Stack Vite + vanilla three.js, no framework GSAP ScrollTrigger + Lenis for the scroll-driven camera One custom post-processing pass: depth of field + SSAO in a single shader, 4× MSAA Lighting from a sky-generated environment map + soft shadows Assets Node pipeline: meshoptimizer, gltf-transform, Draco Angkor Wat photogrammetry scan, decimated for the web Triplanar wood shader, so no UV unwrapping needed Claude generated placeholder textures early on. I swapped in the real ones later with zero code changes Interaction Click a product and the camera travels to it. Click the scene and it pulls back Glass UI cards projected from 3D anchors, so they follow the camera Butterflies run on a small state machine: raycast landing spots, they flee the cursor, tap to scatter on mobile Deploy Git push, Cloudflare Workers builds and serves the static assets. No server. Around 145 fps on desktop. Happy to answer questions on the pipeline or the shader pass. Also curious how it runs on your devices, especially mid-range phones.   submitted by   /u/AlexisDC [link]   [comments]

  • 情报分类：技术学习与提效
  • 分类依据：内容涉及技术、AI、软件工具或工程实践
  • 信息来源：Reddit · SideProject
  • 发布时间：2026/9/24 17:05:26