Mask

<Mask/> uses the stencil buffer to cut out areas of the screen.

WARNING

To use <Mask /> you must add :stencil="true" to your <TresCanvas />.

<Mask /> relies on the stencil buffer. In recent versions of THREE.js, by default, the stencil buffer is not created.

Usage

<script setup lang="ts">
import { NoToneMapping } from 'three'
import { Mask, OrbitControls, useMask } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresLeches />
  <TresCanvas :tone-mapping="NoToneMapping" :stencil="true" clear-color="#4f4f4f">
    <TresPerspectiveCamera />
    <OrbitControls />

    <TresGroup :scale="2">
      <TresMesh>
        <TresRingGeometry :args="[0.95, 1, 64]" />
        <TresMeshBasicMaterial color="white" />
      </TresMesh>
      <Mask>
        <TresCircleGeometry />
        <TresMeshBasicMaterial color="#fbb03b" />
      </Mask>
    </TresGroup>

    <TresMesh :position-z="-1">
      <TresBoxGeometry />
      <TresMeshNormalMaterial v-bind="useMask(1)" />
    </TresMesh>

    <TresMesh :position-z="-3">
      <TresBoxGeometry />
      <TresMeshNormalMaterial v-bind="useMask(1)" />
    </TresMesh>

    <TresMesh :position-z="-5">
      <TresBoxGeometry />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>

Props

Prop	Description	Default
id	Id of the stencil buffer to use. Each mask must have a number id. Multiple masks can refer to the same id.
colorWrite	Whether the colors of the mask's own material will leak through.	false
depthWrite	Whether the depth of the mask's own material will leak through.	false