<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]).

1
<ContactShadows
2
  opacity={1}
3
  scale={10}
4
  blur={1}
5
  far={10}
6
  resolution={256}
7
  color="#000000"
8
/>

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:

1
<ContactShadows frames={1} />

Use the binding refresh to manually refresh the shadows:

1
<script>
2
  let refresh
3

4
  const onSomeEvent = () => {
5
    if (refresh) refresh()
6
  }
7
</script>
8

9
<ContactShadows
10
  bind:refresh
11
  frames={0}
12
/>

Currently it has the same limitations of drei’s version: It yields unexpected results if moved on the x or the z axis.

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

6
<div>
7
  <Canvas>
8
    <Scene />
9
  </Canvas>
10
</div>
11

12
<style>
13
  div {
14
    height: 100%;
15
    background-color: rgb(255 255 255 / 0.9);
16
  }
17
</style>

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { ContactShadows, Environment, Float, OrbitControls } from '@threlte/extras'
4
  import {
5
    BoxGeometry,
6
    Color,
7
    IcosahedronGeometry,
8
    MeshStandardMaterial,
9
    TorusKnotGeometry
10
  } from 'three'
11
</script>
12

13
<Environment url="/textures/equirectangular/hdr/shanghai_riverside_1k.hdr" />
14

15
<T.PerspectiveCamera
16
  makeDefault
17
  position={[-10, 10, 10]}
18
  fov={25}
19
>
20
  <OrbitControls
21
    enabled={false}
22
    autoRotate
23
    autoRotateSpeed={0.5}
24
    target.y={1}
25
  />
26
</T.PerspectiveCamera>
27

28
<T.DirectionalLight
29
  intensity={0.8}
30
  position.x={5}
31
  position.y={10}
32
/>
33
<T.AmbientLight intensity={0.2} />
34

35
<T.GridHelper
36
  args={[10, 10]}
37
  position.y={-0.001}
38
/>
39

40
<ContactShadows
41
  frames={200}
42
  scale={10}
43
  blur={2}
44
  far={2.5}
45
  opacity={0.5}
46
/>
47

48
<Float
49
  floatIntensity={1}
50
  floatingRange={[0, 1]}
51
>
52
  <T.Mesh
53
    position.y={1.2}
54
    position.z={-0.75}
55
    geometry={new BoxGeometry(1, 1, 1)}
56
    material={new MeshStandardMaterial({
57
      color: new Color('#0059BA')
58
    })}
59
  />
60
</Float>
61

62
<Float
63
  floatIntensity={1}
64
  floatingRange={[0, 1]}
65
>
66
  <T.Mesh
67
    position={[1.2, 1.5, 0.75]}
68
    rotation.x={5}
69
    rotation.y={71}
70
    geometry={new TorusKnotGeometry(0.5, 0.15, 100, 12, 2, 3)}
71
    material={new MeshStandardMaterial({
72
      color: new Color('#F85122')
73
    })}
74
  />
75
</Float>
76

77
<Float
78
  floatIntensity={1}
79
  floatingRange={[0, 1]}
80
>
81
  <T.Mesh
82
    position={[-1.4, 1.5, 0.75]}
83
    rotation={[-5, 128, 10]}
84
    geometry={new IcosahedronGeometry(1, 0)}
85
    material={new MeshStandardMaterial({
86
      color: new Color('#F8EBCE')
87
    })}
88
  />
89
</Float>

Example

1
<script lang="ts">
2
  import { ContactShadows } from 'threlte/extras'
3
</script>
4

5
<ContactShadows
6
  scale={10}
7
  blur={2}
8
  far={2.5}
9
  opacity={0.5}
10
/>

Component Signature

<ContactShadows> extends < T . Group > and supports all its props, snippets, bindings and events.

Props

name

type

required

blur

number

color

THREE.ColorRepresentation

depthWrite

boolean

far

number

frames

number

height

number

opacity

number

resolution

number

scale

number | [x: number, y: number]

smooth

boolean

width

number

Exports

name

type

refresh

() => void