3d-web-experience
sickn33/antigravity-awesome-skills
Build interactive 3D web experiences with Three.js, React Three Fiber, and Spline.
What is 3d-web-experience?
Expert in creating 3D scenes for the web using Three.js, React Three Fiber, Spline, and WebGL. Use this skill when building product configurators, 3D portfolios, immersive websites, or scroll-driven 3D interactions that require balancing visual impact with performance.
- Three.js and React Three Fiber implementation for complex 3D scenes
- Spline integration for rapid 3D prototyping and designer workflows
- 3D model optimization, compression, and web-ready asset preparation
- Scroll-driven 3D animations and camera controls
- 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/antigravity-awesome-skills --skill 3d-web-experience- Node.js and npm for package management
- Basic React knowledge (for React Three Fiber approach)
- 3D modeling software (Blender) for asset preparation, or Spline account for no-code 3D
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.Set up Canvas with appropriate DPR settings (1 for mobile, 2 for desktop) and performance targets
- 5.Add loading indicators using Suspense and useProgress, plus WebGL fallback images for unsupported devices
- 6.Implement scroll controls using ScrollControls or GSAP ScrollTrigger for scroll-driven interactions
Use cases
- Building interactive product configurators with color and variant selection
- Creating scroll-triggered 3D animations for portfolio or marketing sites
- Integrating pre-built Spline scenes into React applications
- Optimizing and loading large 3D models with progress indicators
- Implementing 3D scenes with mobile performance targets and graceful degradation
- Frontend developers building React applications with 3D
- Web designers creating immersive website experiences
- Product teams building interactive product showcases
- Developers optimizing 3D performance for mobile and low-end devices
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 programmatic flexibility.
Aim for models under 5MB total. Keep polygon counts under 100K for web, 50K for mobile. Use gltf-transform to compress with Draco and WebP texture compression.
Detect WebGL support at runtime and provide a static image fallback. Test with navigator.userAgent or use a WebGL detection library.
Target 30-60fps on mobile with max 100K triangles. Use lower DPR (1 instead of 2), limit lights, use LOD (Level of Detail), and enable frame rate drops with performance settings.
Use React Suspense with a fallback component, or use useProgress from @react-three/drei to display a percentage-based loader while models load.
Full instructions (SKILL.md)
Source of truth, from sickn33/antigravity-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: unknown 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/antigravity-awesome-skills and the wider catalog.
ab-test-setup
Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.
address-github-comments
Use when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI.
agent-evaluation
Testing and benchmarking LLM agents including behavioral testing,
agent-manager-skill
Manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.
agent-memory-mcp
A hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).
agent-memory-systems
Persistent memory architecture for intelligent agents using semantic, episodic, and procedural memory types.