threlte logo
@threlte/theatre

<Theatre>

The component <Theatre> is a convenience shortcut and provides a default <Project> and <Sheet> to get you set up as fast as possible. It also includes a <Studio> which can be disabled with the property studio: <Theatre studio={false} />

Example

The component <Theatre> is a good choice if you want to test the waters or to quickly spin up an experiment.

<script lang="ts">
  import { Canvas, T } from '@threlte/core'
  import { SheetObject, Theatre } from '@threlte/theatre'
</script>

<Canvas>
  <Theatre>
    <SheetObject
      key="Camera"
      let:Transform
    >
      <Transform>
        <T.PerspectiveCamera
          makeDefault
          position={[5, 10, 3]}
        />
      </Transform>
    </SheetObject>

    <SheetObject
      key="Cube"
      let:Transform
    >
      <Transform>
        <T.Mesh position.y={0.5}>
          <T.BoxGeometry />
          <T.MeshBasicMaterial color="hotpink" />
        </T.Mesh>
      </Transform>
    </SheetObject>

    <T.GridHelper />
  </Theatre>
</Canvas>

Component Signature

Props

name
type
required
default

config
IProjectConfig
no

studio
{ enabled?: boolean, hide?: boolean }
no
{}