aa71e76eb9
- Add date_added to all 950+ skills for complete tracking - Update version to 6.5.0 in package.json and README - Regenerate all indexes and catalog - Sync all generated files Features from merged PR #150: - Stars/Upvotes system for community-driven discovery - Auto-update mechanism via START_APP.bat - Interactive Prompt Builder - Date tracking badges - Smart auto-categorization All skills validated and indexed. Made-with: Cursor
260 lines
5.4 KiB
Markdown
260 lines
5.4 KiB
Markdown
---
|
|
name: 3d-web-experience
|
|
description: "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 ..."
|
|
risk: unknown
|
|
source: "vibeship-spawner-skills (Apache 2.0)"
|
|
date_added: "2026-02-27"
|
|
---
|
|
|
|
# 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
|
|
|
|
```python
|
|
## 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 (
|
|
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
|
|
);
|
|
}
|
|
```
|
|
|
|
### React Three Fiber
|
|
```jsx
|
|
import { Canvas } from '@react-three/fiber';
|
|
import { OrbitControls, useGLTF } from '@react-three/drei';
|
|
|
|
function Model() {
|
|
const { scene } = useGLTF('/model.glb');
|
|
return <primitive object={scene} />;
|
|
}
|
|
|
|
export default function Scene() {
|
|
return (
|
|
<Canvas>
|
|
<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
|
|
```
|
|
1. Model in Blender/etc
|
|
2. Reduce poly count (< 100K for web)
|
|
3. Bake textures (combine materials)
|
|
4. Export as GLB
|
|
5. Compress with gltf-transform
|
|
6. 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
|
|
```jsx
|
|
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 <mesh ref={ref}>...</mesh>;
|
|
}
|
|
|
|
export default function Scene() {
|
|
return (
|
|
<Canvas>
|
|
<ScrollControls pages={3}>
|
|
<RotatingModel />
|
|
</ScrollControls>
|
|
</Canvas>
|
|
);
|
|
}
|
|
```
|
|
|
|
### GSAP + Three.js
|
|
```javascript
|
|
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.
|
|
|
|
## Related Skills
|
|
|
|
Works well with: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design`
|
|
|
|
## When to Use
|
|
This skill is applicable to execute the workflow or actions described in the overview.
|