<MeshDiscardMaterial>

<MeshDiscardMaterial> is a material that renders nothing. It does so by discarding everything in the fragment shader. The difference between <T.Mesh visible={false} /> and <MeshDiscardMaterial> is that shadows and children are still visible when using <MeshDiscardMaterial>.

Show Code

• App.svelte
• Scene.svelte

<script lang="ts">
  import Scene from './Scene.svelte'
  import { Canvas } from '@threlte/core'
</script>

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T } from '@threlte/core'
  import { BakeShadows, MeshDiscardMaterial, OrbitControls } from '@threlte/extras'
  import { MeshStandardMaterial, SphereGeometry } from 'three'

  const geometry = new SphereGeometry()
  const material = new MeshStandardMaterial({ color: 'orangered' })
</script>

<T.PerspectiveCamera
  makeDefault
  position={[5, 7, 5]}
>
  <OrbitControls />
</T.PerspectiveCamera>

<T.DirectionalLight
  position={[0, 5, 5]}
  castShadow
/>

<T.Mesh
  {geometry}
  {material}
  position.x={-2}
  castShadow
/>

<T.Mesh
  {geometry}
  {material}
  castShadow
  visible={false}
/>

<T.Mesh
  {geometry}
  position={2}
  castShadow
>
  <MeshDiscardMaterial />
</T.Mesh>

<T.Mesh
  receiveShadow
  rotation.x={-1 * 0.5 * Math.PI}
  position.y={-1 * 1.25}
>
  <T.MeshStandardMaterial />
  <T.CircleGeometry args={[5]} />
</T.Mesh>

<BakeShadows />

In the example above, the visible mesh does not use <MeshDiscardMaterial> nor sets visible={false}. The center mesh sets visible={false}. Notice how its shadow is missing. The final mesh uses <MeshDiscardMaterial> and its shadow is visible even though the mesh itself isn’t.

Component Signature

<MeshDiscardMaterial> extends < T . ShaderMaterial > and supports all its props, snippets, bindings and events.