@threlte/extras
<Billboard>
This component is a port of drei’s <Billboard>
component which rotates its contents
to always face the camera or specified object.
<script lang="ts">
import { Pane, Checkbox } from 'svelte-tweakpane-ui'
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
let follow = true
</script>
<Pane
title="Billboard"
position="fixed"
>
<Checkbox
label="follow"
bind:value={follow}
/>
</Pane>
<div>
<Canvas>
<Scene {follow} />
</Canvas>
</div>
<style>
div {
height: 100%;
}
</style><script lang="ts">
import { T } from '@threlte/core'
import { OrbitControls, Grid, Billboard } from '@threlte/extras'
export let follow = true
</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.