@threlte/extras

<BakeShadows>

<BakeShadows> instantly freezes all shadow maps upon mounting and unfreezes them upon unmounting. This improves performance by making all shadows static. Use <BakeShadows if you have a complex but static scene as the shadows will only be calculated once.

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

  let bake = $state(false)
</script>

<Pane
  title="BakeShadows"
  position="fixed"
>
  <Checkbox
    bind:value={bake}
    label="bake shadows"
  />
</Pane>

<div>
  <Canvas>
    <Scene {bake} />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

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

  type Props = {
    bake: boolean
  }

  let { bake }: Props = $props()

  let rotation = $state(0)
  useTask((delta) => {
    rotation += delta
  })
</script>

<T.PerspectiveCamera
  makeDefault
  position={[10, 10, 10]}
  oncreate={(ref) => {
    ref.lookAt(0, 1, 0)
  }}
/>

<T.DirectionalLight
  position={[0, 10, 10]}
  castShadow
/>

<T.Mesh
  castShadow
  position.y={1}
  rotation.y={rotation}
>
  <T.BoxGeometry args={[1, 2, 1]} />
  <T.MeshStandardMaterial color="hotpink" />
</T.Mesh>

<T.Mesh
  receiveShadow
  rotation.x={-1 * 0.5 * Math.PI}
>
  <T.CircleGeometry args={[4, 40]} />
  <T.MeshStandardMaterial color="white" />
</T.Mesh>

{#if bake}
  <BakeShadows />
{/if}

When <BakeShadows> is used within a <Suspense>, shadows will be frozen after the boundary is no longer in a suspended state. It will unfreeze if the boundary is re-suspended.

<script lang="ts">
  import Scene from './Scene.svelte'
  import { Canvas } from '@threlte/core'

  let bake = $state(false)
</script>

<div>
  <Canvas>
    <Scene {bake} />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import Spaceship from './Spaceship.svelte'
  import type { SpaceshipProps } from './Spaceship.svelte'
  import { BakeShadows, OrbitControls, Portal, Suspense } from '@threlte/extras'
  import { Color } from 'three'
  import { T, useThrelte } from '@threlte/core'

  const { size, scene } = useThrelte()
  scene.background = new Color('black')

  let zoom = $derived($size.width / 50)

  type Ship = Required<Pick<SpaceshipProps, 'name' | 'position'>>

  const ships: Ship[] = [
    { name: 'Bob', position: [-12, 0, 3] },
    { name: 'Challenger', position: [10, 5, 6] },
    { name: 'Dispatcher', position: [8, 3, -23] },
    { name: 'Executioner', position: [12, -4, 6] },
    { name: 'Imperial', position: [-1, 0, -21] },
    { name: 'Insurgent', position: [-13, 1, -21] },
    { name: 'Omen', position: [-9, -5, 13] },
    { name: 'Pancake', position: [-9, -3, -9] },
    { name: 'Spitfire', position: [1, 0, 1] },
    { name: 'Striker', position: [8, -1, -10] },
    { name: 'Zenith', position: [-1, 0, 13] }
  ]
</script>

<T.OrthographicCamera
  position={[-40, 25, 40]}
  makeDefault
  {zoom}
  oncreate={(ref) => {
    ref.lookAt(0, 0, -8)
  }}
>
  <OrbitControls />
</T.OrthographicCamera>

<T.SpotLight
  position={[0, 25, 0]}
  castShadow
  intensity={1000}
  angle={Math.PI / 3}
/>

<Suspense final>
  {#each ships as { name, position }}
    <Spaceship
      {name}
      {position}
    />
  {/each}
  <BakeShadows />
</Suspense>

<T.Mesh
  receiveShadow
  position.y={-10}
  rotation.x={-1 * 0.5 * Math.PI}
>
  <T.CircleGeometry args={[100]} />
  <T.MeshStandardMaterial color="white" />
</T.Mesh>

<script lang="ts">
  import type { SpaceshipProps } from './Spaceship.svelte'
  import { T } from '@threlte/core'
  import { useGltf, useSuspense } from '@threlte/extras'

  let { name, ...props }: SpaceshipProps = $props()

  const suspend = useSuspense()

  let gltf = $derived(suspend(useGltf(`/models/spaceships/${name}.gltf`)))
</script>

{#await gltf then { scene }}
  <T.Group {...props}>
    <T
      is={scene}
      oncreate={(ref) => {
        for (const child of ref.children) {
          child.castShadow = true
          child.receiveShadow = true
        }
      }}
    />
  </T.Group>
{/await}

import type { Props } from '@threlte/core'
import type { SvelteComponent } from 'svelte'
import type { Group } from 'three'

export type SpaceshipProps = Props<Group> & {
  name:
    | 'Bob'
    | 'Challenger'
    | 'Dispatcher'
    | 'Executioner'
    | 'Imperial'
    | 'Insurgent'
    | 'Omen'
    | 'Pancake'
    | 'Spitfire'
    | 'Striker'
    | 'Zenith'
}

export default class Spaceship extends SvelteComponent<SpaceshipProps> {}

The example above is an ideal scene for <BakeShadows> because all objects are stationary and the shadows will never change.

Previous Page <Detailed>

Next Page meshBounds