3d Web Experience
- 3.7k installs
- 44k repo stars
- Updated July 27, 2026
- sickn33/antigravity-awesome-skills
Structured guidance on choosing, building, and optimizing 3D web experiences. Includes decision frameworks, code patterns, performance targets, and validation checks.
About
Expert guidance for building production-grade 3D web experiences using Three.js, React Three Fiber, Spline, and WebGL. Covers architecture decisions between frameworks, 3D model optimization pipelines, scroll-driven interactions, and mobile-first performance strategies. Includes validation patterns for loading states, WebGL fallbacks, and compression techniques. Balances visual impact with accessibility and performance across desktop and mobile devices. Provides decision trees for stack selection, proven patterns for common use cases like product configurators and immersive portfolios, and hands-on code examples.
- Decision tree for selecting between Spline, React Three Fiber, Three.js vanilla, and Babylon.js
- 3D model optimization pipeline with gltf-transform compression and poly-count targets per device
- Scroll-driven 3D patterns using ScrollControls, GSAP, and frame-based animations
- Performance targets: 60fps/500K triangles desktop, 30fps/50K triangles low-end mobile
- WebGL fallback detection and loading indicator validation checks for production readiness
3d Web Experience by the numbers
- 3,718 all-time installs (skills.sh)
- +168 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #128 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill 3d-web-experienceAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 3.7k |
|---|---|
| repo stars | ★ 44k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | sickn33/antigravity-awesome-skills ↗ |
What it does
Build interactive 3D web experiences with Three.js, React Three Fiber, and Spline for product configurators and immersive websites.
Who is it for?
Full-stack developers, frontend engineers, and technical leads building product configurators, immersive marketing sites, and interactive portfolios requiring 3D elements.
Skip if: Game development, native 3D applications, or use cases where 2D solutions meet requirements. Not for designers without development experience; Spline is better for design-first approaches.
When should I use this skill?
User mentions Three.js, React Three Fiber, WebGL, Spline, 3D web experiences, product configurators, or immersive websites
What you get
Production-ready 3D web experiences that balance visual impact with 30-60fps performance, load in under 5MB, fallback gracefully on unsupported devices, and integrate seamlessly with React applications.
- 3D scene component architecture
- WebGL render setup
- Interactive configurator layouts
By the numbers
- Covers 4 web 3D stacks: Three.js, React Three Fiber, Spline, WebGL
- Catalog entry dated 2026-02-27
Files
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 R3FSpline (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 webpLoading 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 imagesImmersive 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 performanceRelated 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
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kHow it compares
Pick 3d-web-experience over generic frontend skills when the deliverable is an interactive browser 3D scene rather than flat UI components or CSS-only motion.
FAQ
Should I use Spline, React Three Fiber, or Three.js vanilla?
Use Spline for quick prototypes and designer collaboration (low learning curve, medium control). Use React Three Fiber for complex React apps (medium learning curve, high control). Use Three.js vanilla for maximum performance and non-React projects (high learning curve, maximum c
What are the ideal 3D model file sizes and polygon counts?
Desktop: target 500K triangles max, keep overall bundle under 5MB. Mobile: limit to 100K triangles, compress using gltf-transform with Draco and WebP textures. Low-end devices: 50K triangles maximum.
How do I ensure 3D works on all devices including mobile and low-end hardware?
Detect WebGL support and provide static image fallback. Set DPR to 1 on mobile. Use LOD (level of detail). Add loading indicators with Suspense. Test with useProgress hook. Set performance targets: 30-60fps desktop, 30fps mobile.
Is 3d Web Experience safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.