3D Web Experience
FreeCreate immersive 3D web experiences with ease.
Free · Opens the source repo
What 3D Web Experience does
The 3D Web Experience skill empowers developers to create rich, interactive 3D experiences for the web using popular frameworks such as Three.js, React Three Fiber, and Spline. This skill is designed for those who want to enhance their web applications with 3D graphics, whether for product configurators, portfolios, or immersive websites. By leveraging WebGL and GLSL shaders, users can build visually stunning scenes that engage users while maintaining performance and usability.
With this skill, you can integrate 3D models seamlessly into your web projects. It provides guidelines for selecting the right tools based on your needs, whether you require quick prototyping with Spline or more control with vanilla Three.js. The skill also covers essential practices for optimizing 3D assets, ensuring that your web applications load quickly and run smoothly across devices. Users can follow a structured pipeline for preparing 3D models, including format selection and optimization techniques, to ensure that their assets are web-ready.
Additionally, the skill includes practical examples of implementing scroll-driven 3D effects and performance optimization strategies. These features allow developers to create dynamic, responsive experiences that captivate users. The focus on performance ensures that even complex scenes can run efficiently on various devices, making 3D web experiences accessible to a wider audience.
This skill is ideal for web developers and designers looking to push the boundaries of traditional web design by incorporating 3D elements. Whether you're a seasoned developer or just starting with 3D graphics, the 3D Web Experience skill provides the resources needed to elevate your projects.
When to use it
Use this skill when you want to add 3D graphics to your web projects, whether for enhancing user engagement or showcasing products.
When not to use it
This skill may not be suitable for simple 2D applications or projects where 3D elements are unnecessary or could detract from user experience.
What you can build with it
Creating a 3D Portfolio
Use this skill to build an interactive 3D portfolio that showcases your work in a visually engaging manner.
Developing a Product Configurator
Implement a 3D product configurator for an e-commerce site, allowing users to customize products in real-time.
Building Immersive Websites
Enhance your website with scroll-driven 3D effects to create a more engaging user experience.
How to install 3D Web Experience
View source1. Install with the skills CLI
npx skills add sickn33/agentic-awesome-skills/3d-web-experience --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by sickn333D 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.
Frequently asked questions about 3D Web Experience
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.