aframe-webxr
Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal JavaScript. Triggers on tasks
By freshtechbro · 1,849 installs
npx skills add freshtechbro/claudedesignskills --skill aframe-webxr
Source repository · Upstream listing
A Frame WebXR Skill
When to Use This Skill
Build VR/AR experiences with minimal JavaScript
Create cross platform WebXR applications (desktop, mobile, headset)
Prototype 3D scenes quickly with HTML primitives
Implement VR controller interactions
Add 3D content to web pages declaratively
Build 360° image/video experiences
Develop AR experiences with hit testing
Core Concepts
1. Entity Component System (ECS)
A Frame uses an entity component system architecture where:
Entities are containers (like <div in HTML)
Components add functionality/appearance to entities
Systems provide global functionality
Primitives are shortcuts for common entity + component combinations:
2. Scene Setup
Every A Frame app starts with <a scene :
The scene automatically injects:
Default camera (position: 0 1.6 0 )
Look controls (mouse drag)
WASD controls (keyboard movement)
3. Camera Systems
Default Camera (auto injected if none specified):
Custom Camera :
Camera Rig (for independent movement and rotation):
VR Camera Rig with Controllers :
4. Lighting
Ambient Light (global illumination):
Directional Light (like sunlight):
Point Light (radiates in all directions):
Spot Light (cone shaped beam):
5. Materials and Textures
Standard Material :
Textured Material :
Flat Shading (no lighting):
6. Animations
Property Animation :
Multiple Animations (use animation naming):
Event Based Animation :
7. Assets Management
Preload assets for better performance:
8. Custom Components
Register custom components to encapsulate logic:
Common Patterns
Pattern 1: VR Controller Interactions
Problem : Enable object grabbing and manipulation in VR
Solution : Use hand controls and custom grab component
Pattern 2: 360° Image Gallery
Problem : Create an interactive 360° photo viewer
Solution : Use sky primitive and clickable thumbnails
Pattern 3: AR Hit Testing (Place Objects in Real World)
Problem : Place virtual objects on detected real world surfaces
Solution : Use ar hit test component
Pattern 4: Mouse/Gaze Interactions
Problem : Enable click interactions with desktop mouse or VR gaze
Solution : Use cursor component and raycaster
Pattern 5: Dynamic Scene Generation
Problem : Programmatically create and manipulate entities
Solution : Use JavaScript DOM manipulation
Pattern 6: Environment and Skybox
Problem : Create immersive environments quickly
Solution : Use community components and 360 images
Pattern 7: GLTF Model Loading
Problem : Load and display 3D models
Solution : Use gltf model component with asset management
Integration Patterns
With Three.js
Access underlying Three.js objects:
With GSAP (Animation)
Animate A Frame entities with GSAP:
With React
Integrate A Frame in React components:
Performance Best Practices
1. Use Asset Management
Preload assets to avoid blocking:
2. Pool Entities
Reuse entities instead of creating/destroying:
3. Optimize Geometry
Use low poly models and LOD:
4. Limit Draw Calls
Use instancing for repeated objects:
5. Throttle tick() Functions
Don't update every frame if unnecessary:
6. Use Stats Component for Monitoring
Common Pitfalls and Solutions
Pitfall 1: Entities Not Appearing
Problem : Entity added but not visible
Causes :
Entity positioned behind camera
Scale is 0 or very small
Material opacity is 0
Entity outside camera frustum
Solution :
Pitfall 2: Events Not Firing
Problem : Click/mouseenter events don't trigger
Cause : Missing raycaster or cursor
Solution :
Pitfall 3: Performance Degradation
Problem : Low FPS with many entities
Causes :
Too many draw calls
Complex geometries
Unoptimized textures
Too many tick() updates
Solutions :
Pitfall 4: Z Fighting (Overlapping Surfaces)
Problem : Flickering when surfaces overlap
Cause : Two surfaces at same position
Solution :
Pitfall 5: Mobile VR Performance
Problem : Low performance on mobile VR
Solutions :
Pitfall 6: Asset Loading Issues
Problem : Assets not loading or CORS errors
Solutions :
Resources
[A Frame Documentation](https://aframe.io/docs/)
[A Frame GitHub](https://github.com/aframevr/aframe)
[A Frame School](https://aframe.io/school/)
[A Frame Community Components](https://github.com/c frame)
[WebXR Device API](https://www.w3.org/TR/webxr/)
[Three.js Documentation](https://threejs.org/docs/) (A Frame built on Three.js)
Related Skills
threejs webgl : For advanced Three.js control beyond A Frame's declarative API
babylonjs engine : Alternative 3D engine with different architecture
gsap scrolltrigger : For animating A Frame entities with GSAP
react three fiber : React approach to Three.js (compare with A Frame's HTML approach)