ContactShadows

<ContactShadows /> is a "fake", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the THREE.js contact shadows example by @mrdoob.

Usage

<script setup lang="ts">
import { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="white">
    <Levioso :speed="2" :range="[0, 0.7]" :rotation-factor="9">
      <TorusKnot :scale="0.45">
        <TresMeshNormalMaterial />
      </TorusKnot>
    </Levioso>
    <ContactShadows :position-y="-1" color="#335" :scale="20" />
  </TresCanvas>
</template>

Props

Prop	Description	Default
opacity	The opacity of the shadows.	1
blur	The blur of the shadows.	1
color	The color of the shadows.	'#000000'
tint	If provided, the color of the "core" of the shadows. "Added" to color.	undefined
scale	The scale of the shadows/shadow plane. Can be a number or an array of two numbers [x, y].	10
width	The width of the shadow plane.	1
height	The height of the shadow plane.	1
far	The distance of the orthographic shadow camera extends above the shadow plane.	10
smooth	Whether the shadows should be smoothed to reduce artifacts.	true
resolution	The resolution of the shadow textures.	512
frames	For performance, optionally stop updating shadows after frames frames.	Math.POSITIVE_INFINITY
depthWrite	Whether the shadows should write to the depth buffer or not.	false