laser-controls

Note: This documentation is for the old 1.0.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The laser-controls component provides tracked controls with a laser or ray cursor shooting out to be used for input and interactions. DoF stands for degrees of freedom. Because they only require rotation and some form of input, laser-based interactions scale well across 0 DoF (gaze-based, Cardboard), 3 DoF (Daydream, GearVR with controllers), and 6 DoF (Vive, Oculus Touch). If desired, we can get a consistent form of interaction that works across all VR platforms with a single line of HTML.

laser-controls is a higher-order component, meaning the component wraps and configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

• vive-controls
• oculus-touch-controls
• daydream-controls
• gearvr-controls
• windows-motion-controls

These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the raycaster component to draw the laser.

When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

Example

<a-entity laser-controls="hand: left"></a-entity>

Properties

Customizing the Raycaster

Configure the raycaster properties.

For example:

<a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>

Customizing the Line

See Raycaster: Customizing the Line.

For example:

<a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>