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.

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

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

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

<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

Prop	Description	Default
size	The size of the drops.	0.1
area	The size of the precipitation area.	[10, 10, 20]
color	The color of the drops.	0xffffff
map	Color texture of the drops.	null
alphaMap	Alpha texture of the Drops.	null
alphaTest	Enables the WebGL to know when not to render the pixel.	0.01
opacity	Set the opacity of the drops.	0.8
count	Number of drops.	5000
speed	Drops speed.	0.1
randomness	Add randomness to the drops.	0.5
depthWrite	Whether should write to the depth buffer or not. drops.	true
transparent	Transparency on the drops texture	false
sizeAttenuation	Keep the same size regardless distance. drops.	true