layers

layers is a plugin that provides inheritance for the property layers on <T> components. Typically when assigning a value to layers on a <T> component, it will only be applied to that component. This plugin allows you to assign a value to layers on a parent component and have it be inherited by all child components.

This plugin injects and relies on a context. It’s affecting all <T> components that are descendants of the component that uses it. Check out the guide on structuring your app to learn more about contexts.

Usage

Scene.svelte

<script>
  import { layers } from '@threlte/extras'
  layers()
</script>

<!--
The camera needs to be on the same layer
as an object for the object to be visible
-->
<T.PerspectiveCamera layers={[4, 5]} />

<!--
Everything inside this group that isn't
assigned another layer is on layer 4 and
is therefore visible to the camera
-->
<T.Group layers={4}>
  <T.Mesh>
    <T.BoxGeometry />
    <T.MeshStandardMaterial />
  </T.Mesh>

  <!-- This Mesh is on all layers -->
  <T.Mesh layers={'all'}>
    <T.BoxGeometry />
    <T.MeshStandardMaterial />
  </T.Mesh>
</T.Group>