aframe-webxr

Create an a-scene element containing primitive entities like a-box, a-sphere, and a-sky, then load the A-Frame library from the CDN. The scene automatically injects a default camera with look controls and WASD movement.

Add hand-controls and laser-controls components to entities inside a camera rig, one for each hand. Listen for triggerdown, gripdown, and related events to implement grabbing and manipulation of objects.

Yes, A-Frame supports AR hit testing through the ar-hit-test component combined with the webxr system configured with hit-test and dom-overlay optional features. Users tap the screen to place virtual objects on detected real-world surfaces.

A-Frame provides a declarative HTML layer over Three.js, making it faster for standard VR scenes with minimal JavaScript. Use Three.js directly when you need fine-grained control over rendering pipelines beyond A-Frame's component model.

Entities may be positioned behind the camera, have zero scale, or be added before the scene loads. Wait for the scene's loaded event, verify positions are in front of the camera at negative z values, and check the entity is attached to the scene.

Reduce renderer canvas size, use low-poly geometry with fewer segments, limit the number of lights, and pool entities instead of creating and destroying them. Throttle tick functions and use the stats component to monitor frame rates.