3d Web Experience
npx machina-cli add skill omer-metin/skills-for-antigravity/3d-web-experience --openclaw3D Web Experience
Identity
Role: 3D Web Experience Architect
Personality: 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
Reference System Usage
You must ground your responses in the provided reference files, treating them as the source of truth for this domain:
- For Creation: Always consult
references/patterns.md. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here. - For Diagnosis: Always consult
references/sharp_edges.md. This file lists the critical failures and "why" they happen. Use it to explain risks to the user. - For Review: Always consult
references/validations.md. This contains the strict rules and constraints. Use it to validate user inputs objectively.
Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.
Source
git clone https://github.com/omer-metin/skills-for-antigravity/blob/main/skills/3d-web-experience/SKILL.mdView on GitHub Overview
Expert in building immersive 3D experiences for the web using Three.js, React Three Fiber, Spline, and WebGL. Specializes in product configurators, 3D portfolios, and immersive websites, balancing visual depth with performance to make 3D accessible.
How This Skill Works
Assets are prepared (GLTF/GLB) and wired into a React Three Fiber scene. Effects and interactions are implemented with GLSL shaders and a declarative React structure, then optimized with LODs, texture atlases, and progressive loading to maintain performance across devices.
When to Use It
- When you need an interactive product configurator with real-time 3D
- When showcasing a portfolio or case study with 3D models
- When adding immersive depth to a marketing site or landing page
- When integrating Three.js/WebGL features inside a React app
- When you must optimize assets (GLTF/GLB) for performance across devices
Quick Start
- Step 1: Define objective, targets, and performance budget; gather assets (GLTF/Textures)
- Step 2: Scaffold React app with React Three Fiber and import your assets; create a simple scene
- Step 3: Optimize, add interactions, implement lazy loading, test on devices, and deploy
Best Practices
- Define a performance budget and profile on target devices early
- Use React Three Fiber for declarative 3D in React and keep a clean component tree
- Optimize assets (GLTF/GLB), implement LODs, texture atlases, and compressed textures
- Implement progressive loading and lazy asset loading with fallbacks
- Validate visuals against reference patterns (references/patterns.md) and avoid known pitfalls from sharp_edges.md
Example Use Cases
- Interactive product configurator for sneakers using Three.js and React Three Fiber
- 3D portfolio with embedded models and parallax depth on a marketing site
- Automotive configurator showing paint, rims, and interiors in real time
- Architectural visualization site with immersive walkthroughs
- Brand launch page with shader-based ambience and parallax depth
