1. @threlte/core
  2. Layers

@threlte/core

Layers

Layers are one of many ways to manage the visibility of objects in three.js. The <Layers> component assigns all child components the layer memberships you pass to it. Any object that is a member of the same layers the camera is on, is visible.

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

<script>
  import { Layers, PerspectiveCamera, Mesh } from '@threlte/core'
</script>

<!-- Remember to also assign a layer to your camera -->
<Layers layers={1}>
  <PerspectiveCamera />
</Layers>

<!-- visible if camera is on any layer -->
<Layers layers={'all'}>
  <Mesh … />
</Layers>

<!-- visible if camera is on layer 1 -->
<Layers layers={1}>
  <Mesh … />
</Layers>

<!-- visible if camera is on layer 0 or 1 -->
<Layers layers={[0, 1]}>
  <Mesh … />
</Layers>

<!-- invisible -->
<Layers layers={'none'}>
  <Mesh … />
</Layers>

Properties

// required
layers: ThrelteLayers

Property layers can be:

  • any integer from 0 to 31
  • an array of any integer from 0 to 31
  • 'all'
  • 'none'
TIP

TypeScript users will benefit from strong types, JavaScript users should be aware that there is no runtime validation happening.