3d-web-experience
sickn33/agentic-awesome-skills
Build interactive 3D web experiences with Three.js, React Three Fiber, and Spline.
What is 3d-web-experience?
Expert skill for creating 3D scenes, product configurators, and immersive web experiences. Use when you need to add depth and interactivity to web projects with tools like Three.js, React Three Fiber, WebGL, and Spline.
- Three.js and React Three Fiber implementation for complex 3D scenes
- 3D model integration, optimization, and compression pipelines
- Scroll-driven 3D animations and camera controls
- Product configurators and interactive 3D elements
- Performance optimization for desktop and mobile devices
- WebGL fallback strategies and loading indicators
How to install 3d-web-experience
npx skills add https://github.com/sickn33/agentic-awesome-skills --skill 3d-web-experience- Node.js and npm installed
- Basic React knowledge for React Three Fiber approach
- 3D modeling software (Blender) for asset preparation, or use Spline for quick prototypes
How to use 3d-web-experience
- 1.Choose your 3D stack: Spline for quick prototypes, React Three Fiber for React apps, or Three.js vanilla for maximum control
- 2.Prepare 3D models by reducing polygon count, baking textures, and exporting as GLB format
- 3.Compress models using gltf-transform with Draco compression and WebP texture compression
- 4.Implement your chosen framework (Spline component, React Three Fiber Canvas, or Three.js scene)
- 5.Add interactivity with OrbitControls, scroll triggers, or GSAP animations
- 6.Optimize for mobile by setting appropriate DPR, triangle limits, and frame rate targets
- 7.Add loading indicators with Suspense or useProgress, and WebGL fallback images
Use cases
- Building 3D product configurators that let users customize colors and variants
- Creating scroll-triggered 3D animations for immersive landing pages
- Integrating optimized 3D models into React applications
- Developing interactive 3D portfolios with camera movement and model rotation
- Implementing mobile-friendly 3D experiences with performance targets
- Frontend developers building React applications with 3D
- Web designers creating immersive experiences
- Product teams building interactive product pages
- Portfolio creators wanting 3D visual impact
3d-web-experience FAQ
Use Spline for quick prototypes and designer-friendly workflows with low learning curve. Use React Three Fiber when building complex scenes in React apps where you need more control and integration with component state.
Aim for models under 5MB total. Keep polygon count under 100K for web, 50K for low-end devices. Use gltf-transform to compress with Draco and WebP textures.
Set Canvas dpr={isMobile ? 1 : 2} to reduce resolution, target 30-60fps instead of 60fps, limit triangles to 100K, and provide static image fallbacks for unsupported devices.
Use Suspense with a loading fallback component, or useProgress hook to show loading percentage. Always compress models first with gltf-transform.
Use React Three Fiber's ScrollControls with useScroll hook to rotate/move models based on scroll offset, or use GSAP ScrollTrigger for camera animations tied to scroll position.
Full instructions (SKILL.md)
Source of truth, from sickn33/agentic-awesome-skills.
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 depth to web experiences. risk: critical source: vibeship-spawner-skills (Apache 2.0) date_added: 2026-02-27
3D Web Experience
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.
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.
Expertise
- Three.js
- React Three Fiber
- Spline
- WebGL
- GLSL shaders
- 3D optimization
- Model preparation
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)
import Spline from '@splinetool/react-spline';
export default function Scene() {
return (
<Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
);
}
React Three Fiber
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
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
# 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
Scroll-Driven 3D
R3F + Scroll Controls
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
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
Performance Optimization
Keeping 3D fast
When to use: Always - 3D is expensive
3D Performance
Performance Targets
| Device | Target FPS | Max Triangles |
|---|---|---|
| Desktop | 60fps | 500K |
| Mobile | 30-60fps | 100K |
| Low-end | 30fps | 50K |
Quick Wins
// 1. Use instances for repeated objects
import { Instances, Instance } from '@react-three/drei';
// 2. Limit lights
<ambientLight intensity={0.5} />
<directionalLight /> // Just one
// 3. Use LOD (Level of Detail)
import { LOD } from 'three';
// 4. Lazy load models
const Model = lazy(() => import('./Model'));
Mobile Detection
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
<Canvas
dpr={isMobile ? 1 : 2} // Lower resolution on mobile
performance={{ min: 0.5 }} // Allow frame drops
>
Fallback Strategy
function Scene() {
const [webGLSupported, setWebGLSupported] = useState(true);
if (!webGLSupported) {
return <img src="/fallback.png" alt="3D preview" />;
}
return <Canvas onCreated={...} />;
}
Validation Checks
No 3D Loading Indicator
Severity: HIGH
Message: No loading indicator for 3D content.
Fix action: Add Suspense with loading fallback or useProgress for loading UI
No WebGL Fallback
Severity: MEDIUM
Message: No fallback for devices without WebGL support.
Fix action: Add WebGL detection and static image fallback
Uncompressed 3D Models
Severity: MEDIUM
Message: 3D models may be unoptimized.
Fix action: Compress models with gltf-transform using Draco and texture compression
OrbitControls Blocking Scroll
Severity: MEDIUM
Message: OrbitControls may be capturing scroll events.
Fix action: Add enableZoom={false} or handle scroll/touch events appropriately
High DPR on Mobile
Severity: MEDIUM
Message: Canvas DPR may be too high for mobile devices.
Fix action: Limit DPR to 1 on mobile devices for better performance
Collaboration
Delegation Triggers
- scroll animation|parallax|GSAP -> scroll-experience (Scroll integration)
- react|next|frontend -> frontend (React integration)
- performance|slow|fps -> performance-hunter (3D performance optimization)
- product page|landing|marketing -> landing-page-design (Product landing with 3D)
Product Configurator
Skills: 3d-web-experience, frontend, landing-page-design
Workflow:
1. Prepare 3D product model
2. Set up React Three Fiber scene
3. Add interactivity (colors, variants)
4. Integrate with product page
5. Optimize for mobile
6. Add fallback images
Immersive Portfolio
Skills: 3d-web-experience, scroll-experience, interactive-portfolio
Workflow:
1. Design 3D scene concept
2. Build scene in Spline or R3F
3. Add scroll-driven animations
4. Integrate with portfolio sections
5. Ensure mobile fallback
6. Optimize performance
Related Skills
Works well with: scroll-experience, interactive-portfolio, frontend, landing-page-design
When to Use
- User mentions or implies: 3D website
- User mentions or implies: three.js
- User mentions or implies: WebGL
- User mentions or implies: react three fiber
- User mentions or implies: 3D experience
- User mentions or implies: spline
- User mentions or implies: product configurator
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related skills
More from sickn33/agentic-awesome-skills and the wider catalog.
agent-memory-systems
Design and implement memory architectures for intelligent agents—short-term context, long-term retrieval, and cognitive organization.
ai-agents-architect
Design and build autonomous AI agents with tool use, memory systems, planning strategies, and multi-agent orchestration.
ai-engineer
Build production-ready LLM applications, RAG systems, and intelligent agents with vector search and enterprise AI integrations.
api-documentation-generator
Auto-generate comprehensive API documentation from your codebase with endpoints, examples, and best practices.
api-patterns
API design principles for choosing REST, GraphQL, or tRPC and defining response formats, versioning, and pagination.
api-security-best-practices
Implement secure API design patterns: authentication, authorization, input validation, rate limiting, and vulnerability protection.