skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

3d-web-experience

Build interactive 3D web experiences using Three.js, React Three Fiber, Spline, and WebGL.

Updated Jul 28, 2026
Search Tags:#webgl#three.js#gltf#spline#react three fiber#3d web#product configurator
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill 3d-web-experience-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 3d-web-experience
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/3d-web-experience
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill 3d-web-experience-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding 3D content to websites involves hard choices about tooling, model optimization, scroll integration, and performance budgets, and mistakes lead to slow pages or broken mobile experiences. ## Core Features & Use Cases - 3D Stack Selection: Decision trees comparing Spline, React Three Fiber, vanilla Three.js, and Babylon.js so you pick the right tool for your project. - Model Pipeline & Optimization: Guidance on GLB/GLTF formats, gltf-transform compression with Draco, and performance targets per device class. - Scroll-Driven 3D & Fallbacks: Patterns for ScrollControls, GSAP camera animation, WebGL detection, and static image fallbacks. - Use Case: Build a product configurator where users rotate a 3D model, swap colors and variants, and the scene stays at 60fps on desktop and degrades gracefully on mobile. ## Quick Start Ask the AI to set up a React Three Fiber scene that loads a compressed GLB product model with orbit controls, a loading indicator, and a mobile fallback image.

Frequently Asked Questions about 3d-web-experience

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a 3D model to a React website?▼

Use React Three Fiber with the useGLTF hook from drei to load a GLB model inside a Canvas component. Wrap the model in Suspense with a loading fallback, and add OrbitControls for user interaction.

Should I use Spline or React Three Fiber for web 3D?▼

Spline is best for quick prototypes and designer-led scenes with low learning curve, while React Three Fiber suits React apps needing complex scenes and high control. Vanilla Three.js fits non-React projects requiring maximum control.

How do I optimize 3D models for web performance?▼

Export models as GLB, keep poly counts under 100K for web, and compress with gltf-transform using Draco and WebP texture compression. Aim for under 5MB file size and target 100K triangles on mobile.

Does Three.js work on mobile devices?▼

Yes, but you should limit Canvas DPR to 1 on mobile, reduce triangle counts to under 100K, and allow frame drops via performance settings. Always provide a static image fallback for devices without WebGL support.

Why does OrbitControls block page scrolling?▼

OrbitControls captures touch and wheel events on the canvas, preventing normal page scroll. Set enableZoom to false or handle scroll events appropriately, and consider ScrollControls from drei for scroll-driven 3D instead.

Related Skills

Explore More Software Engineering Skills→
TumeloRamaphosaTumeloRamaphosa

blender-web-pipeline

Export Blender assets to optimized glTF/GLB files for web renderers.

Community
Advanced
belokonmbelokonm
8

threejs-pro

Render interactive 3D graphics with Three.js, React Three Fiber, and WebGL shaders.

Community
Advanced
karenrebecagkarenrebecag

gsap-scrolltrigger

Implement GSAP ScrollTrigger for scroll-driven animations in web development.

Community
Intermediate
28981170122898117012

remotion

Create programmatic videos with React components and frame-based animations.

Community
Advanced