Skip to content

Precipitation

<Precipitation /> is a fully flexible component that renders an infinite particle flow, It comes with several props that allow you customize it to create different effects like precipitation, snow, waterfall, beams, etc.

Usage

You can use <Precipitation /> component without passing any props, this will achieve a snowy effect, like the before example.

vue
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

Rain

By setting the randomness to 0, increase the speed and reduce the count. You can easily achieve a more rainy effect.

vue
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation
      :randomness="0"
      :speed="1"
      :count="2500"
    />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

Storm

A storm effect? Easy just increase the randomness.

vue
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation
      :randomness="3"
      :speed="1"
      :count="2500"
    />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

Beam

What about an infinite beam? Just set the area, to the axis that you need constrain.

vue
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation
      :position="[0, 3, 7.5]"
      :randomness="0"
      :speed="0.5"
      :count="2000"
      :area="[1, 10, 1]"
    />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

You can create much more! ☔

WARNING

Be careful with the performance this components render infinite particles in movement

Props

PropDescriptionDefault
sizeThe size of the drops.0.1
areaThe size of the precipitation area.[10, 10, 20]
colorThe color of the drops.0xffffff
mapColor texture of the drops.null
alphaMapAlpha texture of the Drops.null
alphaTestEnables the WebGL to know when not to render the pixel.0.01
opacitySet the opacity of the drops.0.8
countNumber of drops.5000
speedDrops speed.0.1
randomnessAdd randomness to the drops.0.5
depthWriteWhether should write to the depth buffer or not. drops.true
transparentTransparency on the drops texturefalse
sizeAttenuationKeep the same size regardless distance. drops.true