@threlte/theatre

<SheetObject>

The <SheetObject> component allows you to pool the properties of a logical entity which can be a anything from a single material, multiple meshes or a complete scene. The component <SheetObject> and make them editable and animatable in the Theatre.js studio. It’s a great choice if you are making a reusable Threlte component which you want to make editable in the Theatre.js studio.

Theatre.js Docs

Overview

The <SheetObject> component offers several distinct ways to declare and syncronize props in the Theatre.js studio. Convenient auto prop APIs address common usecases and allow quick and easy prop declaration. Meanwhile, manual props APIs allow full customization of prop declaration. Many of these are offered through slot props.

Auto Props

The <Sync> component automatically infers and synchronizes props of its parent component. Meanwhile the <Transform> component creates position and rotation props for its child components, and adds transform controls to the them.

Manual Props

Sometimes we want to control prop declaration manually for better control when implementing custom domain specific props. We can achieve this using manual prop declaration. Provide the props property to the component <SheetObject> for a manual property declaration.

<SheetObject props={{ x: 0 }}>
  {#snippet children({ values })}
    <T.Mesh position.x={values.x} />
  {/snippet}
</SheetObject>

You can also use the <Declare> prop slot component to colocate your manual declaration with other code.

Selection

The <SheetObject> component offers a slot prop based API for controlling selection in the Theatre.js studio. Simply declare the select and deselect methods and the selected variables to use it. You then need to use these in the mesh of your choice; see the example above for a demonstration.