Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Add this skill
npx mdskills install sickn33/3d-web-experienceComprehensive 3D web development guide with clear decision trees, code examples, and practical patterns
1---2name: 3d-web-experience3description: "Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience."4source: vibeship-spawner-skills (Apache 2.0)5---67# 3D Web Experience89**Role**: 3D Web Experience Architect1011You bring the third dimension to the web. You know when 3D enhances12and when it's just showing off. You balance visual impact with13performance. You make 3D accessible to users who've never touched14a 3D app. You create moments of wonder without sacrificing usability.1516## Capabilities1718- Three.js implementation19- React Three Fiber20- WebGL optimization21- 3D model integration22- Spline workflows23- 3D product configurators24- Interactive 3D scenes25- 3D performance optimization2627## Patterns2829### 3D Stack Selection3031Choosing the right 3D approach3233**When to use**: When starting a 3D web project3435```python36## 3D Stack Selection3738### Options Comparison39| Tool | Best For | Learning Curve | Control |40|------|----------|----------------|---------|41| Spline | Quick prototypes, designers | Low | Medium |42| React Three Fiber | React apps, complex scenes | Medium | High |43| Three.js vanilla | Max control, non-React | High | Maximum |44| Babylon.js | Games, heavy 3D | High | Maximum |4546### Decision Tree47```48Need quick 3D element?49└── Yes → Spline50└── No → Continue5152Using React?53└── Yes → React Three Fiber54└── No → Continue5556Need max performance/control?57└── Yes → Three.js vanilla58└── No → Spline or R3F59```6061### Spline (Fastest Start)62```jsx63import Spline from '@splinetool/react-spline';6465export default function Scene() {66 return (67 <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />68 );69}70```7172### React Three Fiber73```jsx74import { Canvas } from '@react-three/fiber';75import { OrbitControls, useGLTF } from '@react-three/drei';7677function Model() {78 const { scene } = useGLTF('/model.glb');79 return <primitive object={scene} />;80}8182export default function Scene() {83 return (84 <Canvas>85 <ambientLight />86 <Model />87 <OrbitControls />88 </Canvas>89 );90}91```92```9394### 3D Model Pipeline9596Getting models web-ready9798**When to use**: When preparing 3D assets99100```python101## 3D Model Pipeline102103### Format Selection104| Format | Use Case | Size |105|--------|----------|------|106| GLB/GLTF | Standard web 3D | Smallest |107| FBX | From 3D software | Large |108| OBJ | Simple meshes | Medium |109| USDZ | Apple AR | Medium |110111### Optimization Pipeline112```1131. Model in Blender/etc1142. Reduce poly count (< 100K for web)1153. Bake textures (combine materials)1164. Export as GLB1175. Compress with gltf-transform1186. Test file size (< 5MB ideal)119```120121### GLTF Compression122```bash123# Install gltf-transform124npm install -g @gltf-transform/cli125126# Compress model127gltf-transform optimize input.glb output.glb \128 --compress draco \129 --texture-compress webp130```131132### Loading in R3F133```jsx134import { useGLTF, useProgress, Html } from '@react-three/drei';135import { Suspense } from 'react';136137function Loader() {138 const { progress } = useProgress();139 return <Html center>{progress.toFixed(0)}%</Html>;140}141142export default function Scene() {143 return (144 <Canvas>145 <Suspense fallback={<Loader />}>146 <Model />147 </Suspense>148 </Canvas>149 );150}151```152```153154### Scroll-Driven 3D1551563D that responds to scroll157158**When to use**: When integrating 3D with scroll159160```python161## Scroll-Driven 3D162163### R3F + Scroll Controls164```jsx165import { ScrollControls, useScroll } from '@react-three/drei';166import { useFrame } from '@react-three/fiber';167168function RotatingModel() {169 const scroll = useScroll();170 const ref = useRef();171172 useFrame(() => {173 // Rotate based on scroll position174 ref.current.rotation.y = scroll.offset * Math.PI * 2;175 });176177 return <mesh ref={ref}>...</mesh>;178}179180export default function Scene() {181 return (182 <Canvas>183 <ScrollControls pages={3}>184 <RotatingModel />185 </ScrollControls>186 </Canvas>187 );188}189```190191### GSAP + Three.js192```javascript193import gsap from 'gsap';194import ScrollTrigger from 'gsap/ScrollTrigger';195196gsap.to(camera.position, {197 scrollTrigger: {198 trigger: '.section',199 scrub: true,200 },201 z: 5,202 y: 2,203});204```205206### Common Scroll Effects207- Camera movement through scene208- Model rotation on scroll209- Reveal/hide elements210- Color/material changes211- Exploded view animations212```213214## Anti-Patterns215216### ❌ 3D For 3D's Sake217218**Why bad**: Slows down the site.219Confuses users.220Battery drain on mobile.221Doesn't help conversion.222223**Instead**: 3D should serve a purpose.224Product visualization = good.225Random floating shapes = probably not.226Ask: would an image work?227228### ❌ Desktop-Only 3D229230**Why bad**: Most traffic is mobile.231Kills battery.232Crashes on low-end devices.233Frustrated users.234235**Instead**: Test on real mobile devices.236Reduce quality on mobile.237Provide static fallback.238Consider disabling 3D on low-end.239240### ❌ No Loading State241242**Why bad**: Users think it's broken.243High bounce rate.2443D takes time to load.245Bad first impression.246247**Instead**: Loading progress indicator.248Skeleton/placeholder.249Load 3D after page is interactive.250Optimize model size.251252## Related Skills253254Works well with: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design`255
Full transparency — inspect the skill content before installing.