# Precipitation

> Flexible infinite particle flow for rain, snow, waterfall, and beam effects.

<scene-controls-wrapper>
<staging-precipitation>



</staging-precipitation>
</scene-controls-wrapper>

`<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 { TresCanvas } from '@tresjs/core'
import { Precipitation } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 3, 5]" />
    <Precipitation />
    <TresAmbientLight />
  </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 { TresCanvas } from '@tresjs/core'
import { Precipitation } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 3, 5]" />
    <Precipitation
      :count="2000"
      :speed="0.3"
      :randomness="0"
    />
    <TresAmbientLight />
  </TresCanvas>
</template>
```

### Storm

A storm effect? Easy just increase the randomness.

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

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 3, 5]" />
    <Precipitation
      :count="3000"
      :speed="0.5"
      :randomness="1.5"
    />
    <TresAmbientLight />
  </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 { TresCanvas } from '@tresjs/core'
import { Precipitation } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 3, 5]" />
    <Precipitation
      :area="[0.5, 0.5, 20]"
      :count="1000"
      :speed="0.2"
      :size="0.3"
      color="#00ff00"
    />
    <TresAmbientLight />
  </TresCanvas>
</template>
```

You can create much more! ☔

<prose-warning>

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

</prose-warning>

## Props

<table>
<thead>
  <tr>
    <th align="left">
      Prop
    </th>
    
    <th align="left">
      Description
    </th>
    
    <th>
      Default
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td align="left">
      <strong>
        size
      </strong>
    </td>
    
    <td align="left">
      The size of the drops.
    </td>
    
    <td>
      0.1
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        area
      </strong>
    </td>
    
    <td align="left">
      The size of the precipitation area.
    </td>
    
    <td>
      <span>
        10, 10, 20
      </span>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        color
      </strong>
    </td>
    
    <td align="left">
      The color of the drops.
    </td>
    
    <td>
      0xffffff
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        map
      </strong>
    </td>
    
    <td align="left">
      Color texture of the drops.
    </td>
    
    <td>
      null
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        alphaMap
      </strong>
    </td>
    
    <td align="left">
      Alpha texture of the Drops.
    </td>
    
    <td>
      null
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        alphaTest
      </strong>
    </td>
    
    <td align="left">
      Enables the WebGL to know when not to render the pixel.
    </td>
    
    <td>
      0.01
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        opacity
      </strong>
    </td>
    
    <td align="left">
      Set the opacity of the drops.
    </td>
    
    <td>
      0.8
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        count
      </strong>
    </td>
    
    <td align="left">
      Number of drops.
    </td>
    
    <td>
      5000
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        speed
      </strong>
    </td>
    
    <td align="left">
      Drops speed.
    </td>
    
    <td>
      0.1
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        randomness
      </strong>
    </td>
    
    <td align="left">
      Add randomness to the drops.
    </td>
    
    <td>
      0.5
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        depthWrite
      </strong>
    </td>
    
    <td align="left">
      Whether should write to the depth buffer or not. drops.
    </td>
    
    <td>
      true
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        transparent
      </strong>
    </td>
    
    <td align="left">
      Transparency on the drops texture
    </td>
    
    <td>
      false
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        sizeAttenuation
      </strong>
    </td>
    
    <td align="left">
      Keep the same size regardless distance. drops.
    </td>
    
    <td>
      true
    </td>
  </tr>
</tbody>
</table>