What problem does it solve? Adding 3D to a website often leads to slow load times, broken mobile experiences, and unclear tooling choices. This Skill guides you through selecting the right 3D stack, optimizing models for the web, and building scroll-driven interactive scenes without sacrificing performance or usability. ## Core Features & Use Cases - 3D Stack Selection: Compare Spline, React Three Fiber, vanilla Three.js, and Babylon.js with a decision tree to pick the right tool for your project. - 3D Model Pipeline: Optimize models for the web with poly-count reduction, texture baking, GLB export, and gltf-transform Draco/WebP compression targeting under 5MB files. - Scroll-Driven 3D Scenes: Build camera movements, model rotations, and reveal effects tied to scroll position using @react-three/drei ScrollControls or GSAP ScrollTrigger. - Use Case: You are building a product landing page with a 3D product configurator. Use this Skill to compress the GLB model, load it in React Three Fiber with a progress indicator, and rotate the model as the user scrolls. ## Quick Start Ask the AI to build a scroll-driven 3D product viewer in React Three Fiber with an optimized GLB model and a loading progress indicator.
