r3f-xr-widgets / CylindricalBillboard

Variable: CylindricalBillboard

const CylindricalBillboard: ForwardRefExoticComponent<CylindricalBillboardProps & RefAttributes<Group<Object3DEventMap>>>

Defined in: src/components/CylindricalBillboard.tsx:96

A wrapper component that rotates children to face the camera on the Y-axis only.

Unlike a full Billboard which rotates on all axes, CylindricalBillboard only rotates around the Y-axis (yaw), keeping children upright. This is ideal for UI panels, windows, and signage that should face the user but maintain vertical orientation.

By default, rotates once on mount (initialRotation=true) and during drag operations (rotateOnDrag=true). Once placed, the billboard stays in its current orientation until moved again. Set autoRotate=true to continuously face the camera.

The billboard tracks the world position of its first child for rotation calculations, so if children are moved (e.g., via drag handles), the billboard will correctly rotate to face the camera from the new position.

Example

import { CylindricalBillboard } from 'r3f-xr-widgets'

function Scene() {
  return (
    <CylindricalBillboard>
      <mesh>
        <planeGeometry args={[1, 1]} />
        <meshBasicMaterial color="blue" />
      </mesh>
    </CylindricalBillboard>
  )
}