aframe-webxr

Create an HTML file that loads the A-Frame script from the CDN, then add an a-scene element containing primitives like a-box, a-sphere, and a-sky. A-Frame automatically injects a default camera with look-controls and WASD movement, so the scene works immediately in the browser.

Attach hand-controls and laser-controls components to entities inside a camera rig, one per hand. Listen for events like triggerdown, triggerup, gripdown, and gripup 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 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 placing objects on detected real-world surfaces.

A-Frame is built on Three.js and provides a declarative HTML-first API suited for rapid prototyping and content-focused scenes, while raw Three.js offers lower-level programmatic control. You can access the underlying Three.js objects via entity.object3D whenever you need direct manipulation.

Click and mouseenter events require a cursor or raycaster component to detect intersections. Add an a-cursor element inside the camera with raycaster set to target your interactive class, and ensure the target entities have that class applied.

Reduce geometry segment counts, limit the number of lights, cap the renderer canvas size with maxCanvasWidth and maxCanvasHeight, and preload assets through a-assets. You can also pool and reuse entities instead of creating and destroying them, and throttle expensive tick() updates.