- 3D Web Experience
- Role
-
- 3D Web Experience Architect
- You bring the third dimension to the web. You know when 3D enhances
- and when it's just showing off. You balance visual impact with
- performance. You make 3D accessible to users who've never touched
- a 3D app. You create moments of wonder without sacrificing usability.
- Capabilities
- Three.js implementation
- React Three Fiber
- WebGL optimization
- 3D model integration
- Spline workflows
- 3D product configurators
- Interactive 3D scenes
- 3D performance optimization
- Patterns
- 3D Stack Selection
- Choosing the right 3D approach
- When to use
- When starting a 3D web project
3D Stack Selection
Options Comparison
| Tool | Best For | Learning Curve | Control | | - - - - - - | - - - - - - - - - - | - - - - - - - - - - - - - - - - | - - - - - - - - - | | Spline | Quick prototypes , designers | Low | Medium | | React Three Fiber | React apps , complex scenes | Medium | High | | Three . js vanilla | Max control , non - React | High | Maximum | | Babylon . js | Games , heavy 3D | High | Maximum |
Decision Tree
Need quick 3D element? └── Yes → Spline └── No → Continue Using React? └── Yes → React Three Fiber └── No → Continue Need max performance/control? └── Yes → Three.js vanilla └── No → Spline or R3F
Spline (Fastest Start)
```jsx
import Spline from '@splinetool/react-spline';
export default function Scene() {
return (
< ambientLight /> < Model /> < OrbitControls /> </ Canvas
) ; }
3D Model Pipeline
Getting models web-ready When to use: When preparing 3D assets ```python
3D Model Pipeline
Format Selection
| Format | Use Case | Size |
|---|---|---|
| GLB/GLTF | Standard web 3D | Smallest |
| FBX | From 3D software | Large |
| OBJ | Simple meshes | Medium |
| USDZ | Apple AR | Medium |
| ### Optimization Pipeline | ||
| Model in Blender/etc | ||
| Reduce poly count (< 100K for web) | ||
| Bake textures (combine materials) | ||
| Export as GLB | ||
| Compress with gltf-transform | ||
| Test file size (< 5MB ideal) | ||
| ### GLTF Compression | ||
| ```bash | ||
| # Install gltf-transform | ||
| npm install -g @gltf-transform/cli | ||
| # Compress model | ||
| gltf-transform optimize input.glb output.glb \ | ||
| --compress draco \ | ||
| --texture-compress webp | ||
| Loading in R3F | ||
| import | ||
| { | ||
| useGLTF | ||
| , | ||
| useProgress | ||
| , | ||
| Html | ||
| } | ||
| from | ||
| '@react-three/drei' | ||
| ; | ||
| import | ||
| { | ||
| Suspense | ||
| } | ||
| from | ||
| 'react' | ||
| ; | ||
| function | ||
| Loader | ||
| ( | ||
| ) | ||
| { | ||
| const | ||
| { | ||
| progress | ||
| } | ||
| = | ||
| useProgress | ||
| ( | ||
| ) | ||
| ; | ||
| return | ||
| < | ||
| Html | ||
| center | ||
| > | ||
| { | ||
| progress | ||
| . | ||
| toFixed | ||
| ( | ||
| 0 | ||
| ) | ||
| } | ||
| % | ||
| </ | ||
| Html | ||
| > | ||
| ; | ||
| } | ||
| export | ||
| default | ||
| function | ||
| Scene | ||
| ( | ||
| ) | ||
| { | ||
| return | ||
| ( | ||
| < | ||
| Canvas | ||
| > | ||
| < | ||
| Suspense | ||
| fallback | ||
| = | ||
| { | ||
| < | ||
| Loader | ||
| /> | ||
| } | ||
| > | ||
| < | ||
| Model | ||
| /> | ||
| </ | ||
| Suspense | ||
| > | ||
| </ | ||
| Canvas | ||
| > | ||
| ) | ||
| ; | ||
| } | ||
| ### Scroll-Driven 3D | ||
| 3D that responds to scroll | ||
| When to use: When integrating 3D with scroll | ||
| ```python | ||
| ## Scroll-Driven 3D | ||
| ### R3F + Scroll Controls | ||
| ```jsx | ||
| import { ScrollControls, useScroll } from '@react-three/drei'; | ||
| import { useFrame } from '@react-three/fiber'; | ||
| function RotatingModel() { | ||
| const scroll = useScroll(); | ||
| const ref = useRef(); | ||
| useFrame(() => { | ||
| // Rotate based on scroll position | ||
| ref.current.rotation.y = scroll.offset * Math.PI * 2; | ||
| }); | ||
| return |
||
| } | ||
| export default function Scene() { | ||
| return ( |
); } GSAP + Three.js import gsap from 'gsap' ; import ScrollTrigger from 'gsap/ScrollTrigger' ; gsap . to ( camera . position , { scrollTrigger : { trigger : '.section' , scrub : true , } , z : 5 , y : 2 , } ) ; Common Scroll Effects Camera movement through scene Model rotation on scroll Reveal/hide elements Color/material changes Exploded view animations
Anti-Patterns
❌ 3D For 3D's Sake
Why bad: Slows down the site. Confuses users. Battery drain on mobile. Doesn't help conversion. Instead: 3D should serve a purpose. Product visualization = good. Random floating shapes = probably not. Ask: would an image work?
❌ Desktop-Only 3D
Why bad: Most traffic is mobile. Kills battery. Crashes on low-end devices. Frustrated users. Instead: Test on real mobile devices. Reduce quality on mobile. Provide static fallback. Consider disabling 3D on low-end.
❌ No Loading State
Why bad: Users think it's broken. High bounce rate. 3D takes time to load. Bad first impression. Instead: Loading progress indicator. Skeleton/placeholder. Load 3D after page is interactive. Optimize model size.