@threlte/extras
ContactShadows
This component is a port of
drei's <ContactShadows> component.
A contact shadow implementation, facing upwards (positive Y) by default. scale can be a positive number or a 2D array (x: number, y: number]).
<ContactShadows
opacity={1}
scale={10}
blur={1}
far={10}
resolution={256}
color="#000000"
/>
Since this is a rather expensive effect you can limit the amount of frames it renders when your objects are static. For instance making it render only once:
<ContactShadows frames={1} />
Use the binding refresh to manually refresh the shadows:
<script>
let refresh
const onSomeEvent = () => {
if (refresh) refresh()
}
</script>
<ContactShadows bind:refresh frames={0} />
Currently it has the same limitations of drei's version: It yields unexpected results if moved on the x or the z axis.
Example
<script lang="ts">
import { ContactShadows } from 'threlte/extras'
</script>
<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
Properties
// optional
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined
viewportAware: boolean = false
castShadow: boolean | undefined = undefined
receiveShadow: boolean | undefined = undefined
frustumCulled: boolean | undefined = undefined
renderOrder: number | undefined = undefined
visible: boolean | undefined = undefined
opacity: number = 1 // general shadow opacity
width: number = 1 // width of shadow area
height: number = 1 // height of shadow area
blur: number = 1 // amount of blur
far: number = 10 // far plane of the shadow camera
smooth: boolean = true // true for two blur iterations
resolution: number = 512
frames: number = Infinity
scale: number | [x: number, y: number] = 10 // scale of the shadow area
color: THREE.ColorRepresentation = '#000000'
depthWrite: boolean = false
Bindings
inViewport: boolean
refresh: () => void
Events
viewportenter: undefined
viewportleave: undefined