Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/theatre
  2. Studio

@threlte/theatre

Studio

The component <Studio> adds the interface of Theatre.js.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

In most cases, you want the interface while editing animations or laying out scenes. While other parts of Theatre.js are performant and built for production, @theatre/studio is currently not. You should not include that in your production bundle.

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

	// Using SvelteKit
	import { dev } from '$app/environment';
</script>

<Studio enabled={dev}>

<Canvas>
	<Scene />
</Canvas>