<Billboard>

This component is a port of drei’s <Billboard> component which rotates its contents to always face the camera or specified object.

Show Code

• App.svelte
• Scene.svelte

<script lang="ts">
  import Scene from './Scene.svelte'
  import { Canvas } from '@threlte/core'
  import { Pane, Checkbox } from 'svelte-tweakpane-ui'

  let follow = $state(true)
</script>

<Pane
  title="Billboard"
  position="fixed"
>
  <Checkbox
    label="follow"
    bind:value={follow}
  />
</Pane>

<Canvas>
  <Scene {follow} />
</Canvas>

<script lang="ts">
  import { OrbitControls, Grid, Billboard } from '@threlte/extras'
  import { T } from '@threlte/core'

  let { follow = true }: { follow?: boolean } = $props()
</script>

<Billboard
  {follow}
  position={[3, 1, 0]}
>
  <T.Mesh>
    <T.MeshBasicMaterial color="red" />
    <T.PlaneGeometry args={[2, 3]} />
  </T.Mesh>
</Billboard>

<Billboard
  {follow}
  position={[-4, 3, 0]}
>
  <T.Mesh>
    <T.MeshBasicMaterial color="green" />
    <T.PlaneGeometry args={[3, 2]} />
  </T.Mesh>
</Billboard>

<Billboard
  {follow}
  position={[-1, 5, 2]}
>
  <T.Mesh>
    <T.MeshBasicMaterial color="blue" />
    <T.PlaneGeometry args={[2, 2]} />
  </T.Mesh>
</Billboard>

<T.PerspectiveCamera
  makeDefault
  position.y={8}
  position.z={8}
  fov={90}
>
  <OrbitControls
    enableDamping
    enablePan={false}
    enableZoom={false}
  />
</T.PerspectiveCamera>

<Grid
  position.y={0}
  sectionThickness={1}
  infiniteGrid
  cellColor="#dddddd"
  sectionColor="#ffffff"
  sectionSize={10}
  cellSize={2}
/>

Examples

Basic Example

Billboard.svelte

<script lang="ts">
  import { T } from '@threlte/core'
  import { Billboard } from '@threlte/extras'
</script>

<Billboard>
  <T.Mesh>
    <T.MeshStandardMaterial />
    <T.PlaneGeometry args={[2, 2]} />
  </T.Mesh>
</Billboard>

To disable the billboard from rotating its contents to face the camera, you can optionally pass in a follow prop set to false.

Component Signature

<Billboard> extends < T . Group > and supports all its props, snippets, bindings and events.

Props

name

type

required

default

---

follow

boolean | THREE.Object3D

no

true