@threlte/extras
<Mask>
Masks use the stencil buffer to cut out areas of the screen. This component is a port of drei’s <Mask>
component.
The Mask component requires Three.js to render with a stencil buffer. As of r163, stencil is set to
false
by default. To enable the stencil buffer, set it in your canvas’s renderer params: <Canvas rendererParameters={{ stencil: true }}>
. In prior versions the default is true
already. <script lang="ts">
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
</script>
<div>
<Canvas>
<Scene />
</Canvas>
</div>
<style>
div {
height: 100%;
}
</style>
First you need to define a mask, give it the shape that you want.
<Mask id={1}>
<T.PlaneGeometry />
<T.MeshBasicMaterial />
</Mask>
Now refer to it with the useMask
hook and the same id, your content will now be masked out by the geometry defined above.
<script lang="ts">
import { useMask } from '@threlte/extras'
const stencil = useMask(1)
</script>
<T.Mesh>
<T.TorusKnotGeometry />
<T.MeshStandardMaterial {...stencil} />
</T.Mesh>
You can build compound masks with multiple shapes by re-using an id. You can also use the mask as a normal mesh by providing colorWrite and depthWrite props.
<Mask
position={[-1, 0, 0]}
id={1}
>
<T.PlaneGeometry />
<T.MeshBasicMaterial />
</Mask>
<Mask
colorWrite
depthWrite
position={[1, 0, 0]}
id={1}
>
<T.CircleGeometry />
<T.MeshBasicMaterial />
</Mask>
Invert masks individually by providing a 2nd boolean argument to the useMask hook.
const stencil = useMask(1, true)