skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

aframe-webxr

Build browser-based VR and AR experiences using A-Frame's declarative HTML entity-component architecture.

Updated Jun 30, 2026
Search Tags:#three.js#webxr#entity-component-system#3d web#aframe#vr development#ar development
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill aframe-webxr-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aframe-webxr
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/aframe-webxr
Command: npx skills add https://github.com/ayofemiade/cleva --skill aframe-webxr-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building WebXR applications typically requires deep Three.js and WebGL expertise plus verbose imperative JavaScript. This Skill provides declarative HTML-first patterns, complete API references, and component generators for creating VR, AR, and 3D web experiences with minimal JavaScript. ## Core Features & Use Cases - Declarative 3D Scenes: Create scenes, cameras, lighting, materials, and animations using HTML primitives like <a-box> and <a-sphere> instead of raw WebGL code. - VR/AR Interaction Patterns: Implement controller grabbing, laser pointers, gaze cursors, AR hit-testing for surface placement, and 360-degree media viewers. - Component Code Generation: Use the component_builder.py script to scaffold custom components for interactivity, animation, physics, networking, and asset loading. - Use Case: Build a 360-degree photo gallery with clickable thumbnails and gaze interaction, or an AR app that places furniture models on detected real-world surfaces via hit testing. ## Quick Start Use the aframe-webxr skill to create a VR scene with a rotating box, sphere, and ground plane that works on desktop and headsets.

Frequently Asked Questions about aframe-webxr

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

FAQPage Schema
How do I create a VR scene with A-Frame?▼

Create an A-Frame VR scene by including the aframe.min.js script and wrapping entities in an `<a-scene>` element. Add primitives like `<a-box>`, `<a-sphere>`, and `<a-sky>` with position and color attributes; the scene automatically injects a camera with look and WASD controls.

How to add VR controller interactions in A-Frame?▼

Add VR controller interactions using hand-controls and laser-controls components attached to entities inside a camera rig. Listen to events like triggerdown, triggerup, gripdown, and gripup to implement grabbing and object manipulation.

Does A-Frame support AR hit testing on mobile?▼

A-Frame supports AR hit testing through the ar-hit-test component combined with the webxr scene configuration enabling hit-test and dom-overlay features. It fires ar-hit-test-start, ar-hit-test-achieved, and ar-hit-test-select events for surface detection and object placement.

A-Frame vs Three.js for WebXR development?▼

A-Frame is built on Three.js and provides a declarative HTML-first API ideal for rapid prototyping and minimal-JavaScript workflows. Use raw Three.js when you need fine-grained imperative control beyond A-Frame's entity-component abstraction; you can access Three.js objects via entity.object3D anytime.

Why are my A-Frame click events not firing?▼

Click events fail when no cursor or raycaster targets the entity. Add an `<a-cursor>` with raycaster="objects: .interactive" inside the camera and assign the interactive class to clickable entities.

How do I fix low FPS in A-Frame mobile VR?▼

Improve mobile VR performance by reducing renderer maxCanvasWidth and maxCanvasHeight, using low-poly geometry with fewer segments, limiting dynamic lights, and throttling tick() updates. Use the stats component on the scene to monitor frame rate.

Related Skills

Explore More Software Engineering Skills→
code-review-benchmarkcode-review-benchmark

forge-scene-model-loading

Load and render .fscene, .fmesh, and .fmat 3D models via ForgeScene.

Official
Intermediate
freshtechbrofreshtechbro
682

aframe-webxr

Create VR and AR web applications using A-Frame and the WebXR API.

Community
Intermediate
quodsolerquodsoler
304

ue-character-movement

Implement custom Unreal Engine character movement modes with UCharacterMovementComponent.

Community
Advanced
Arupbiswas09Arupbiswas09

r3f

Integrates Three.js and @react-three/fiber into React applications for declarative 3D graphics.

Community
Intermediate