Skip to content

controller-attach

The controller-attach component attaches entities to VR controllers, allowing you to create controller-mounted UI panels, tools, or visual elements that follow the controller's movements and orientation in 3D space.

Example

Below is an example of attaching UI panel to the right controller:

Props

PropertyTypeDefaultDescription
handstring"right"Which controller to attach to ("left" or "right")
offsetvec3"0 0 0"Position offset from the controller in meters
rotationvec3"0 0 0"Rotation offset in degrees (x, y, z Euler angles)
faceCamerabooleanfalseMakes the attached object always face the camera

Usage Tips

Ensured visibility

For UI elements that need to be readable from any angle, combine with the billboard component to make the attached UI always face the user:

html
<a-entity
  geometry="primitive: plane; width: 0.25; height: 0.15"
  material="color: #2196F3; opacity: 0.8"
  controller-attach="hand: right; offset: 0.15 0.05 -0.1;"
  billboard
>
  <a-text value="Always Visible" align="center" position="0 0 0.001" scale="0.1 0.1 0.1"></a-text>
</a-entity>