Build 3D experiences for the web with Three.js, React Three Fiber, Spline, WebGL, and GLSL — product configurators, immersive sites, interactive scenes. USE WHEN adding 3D, a configurator, or WebGL depth to a web UI.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Build 3D experiences for the web with Three.js, React Three Fiber, Spline, WebGL, and GLSL — product configurators, immersive sites, interactive scenes. USE WHEN adding 3D, a configurator, or WebGL depth to a web UI.
cluster
frontend-web
version
1.0.0
origin
antigravity-awesome-skills (MIT)
source
vibeship-spawner-skills (Apache 2.0)
3D Web Experience
Upstream source: vibeship-spawner-skills (Apache 2.0) · packaged via antigravity-awesome-skills (MIT)
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
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
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.
