aframe-webxr

Create an HTML file that loads the A-Frame script and wraps content in an a-scene element containing primitives like a-box, a-sphere, and a-sky. The scene automatically injects a default camera with look-controls and WASD movement, and entering VR requires no extra code.

Attach hand-controls and laser-controls components to entities inside a camera rig, one per hand. Add a raycaster targeting an interactive class, then listen for triggerdown, gripdown, and click events on the target entities.

Yes, A-Frame supports AR hit testing through the ar-hit-test component combined with the webxr scene configuration requesting the hit-test optional feature. It emits ar-hit-test-start, ar-hit-test-achieved, and ar-hit-test-select events for surface detection and object placement.

A-Frame is built on Three.js and provides a declarative HTML layer for faster scene composition with less JavaScript. Use Three.js directly when you need fine-grained control over rendering pipelines beyond A-Frame's component abstraction.

Click events require a cursor or raycaster component targeting the entity, typically an a-cursor inside the camera with raycaster set to a matching selector class. Without a raycaster, mouseenter, mouseleave, and click events never reach the entity.

Reduce geometry segment counts, limit the number of lights, restrict renderer canvas size with maxCanvasWidth and maxCanvasHeight, and preload assets through a-assets. Pool and reuse entities instead of creating and destroying them, and throttle expensive tick updates.