aframe-webxr

Include the A-Frame script tag, then wrap primitives like a-box, a-sphere, and a-sky inside an a-scene element. The scene automatically injects a default camera with look controls and WASD movement, so no JavaScript is required for a basic scene.

Attach hand-controls and laser-controls components to entities inside a camera rig, one per hand. Listen for triggerdown, triggerup, gripdown, and gripup events on interactive entities to implement grabbing and manipulation.

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 is built on Three.js and provides a declarative HTML-first API suited for rapid WebXR prototyping, while Three.js offers lower-level imperative control. You can access underlying Three.js objects via entity.object3D when you need direct manipulation.

Click events require a cursor or raycaster to detect intersections. Add an a-cursor element inside the camera with a raycaster targeting a CSS class, then assign that class to your interactive entities.

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 Three.js InstancedMesh for repeated objects.