# Smoke

> Beautiful smoke, cloud, and fog effect using textures and transparency.

<scene-wrapper>
<staging-smoke>



</staging-smoke>
</scene-wrapper>

`<Smoke />` is a component that renders a smoke in your scene. It is an abstraction that use a combination of textures, transparency and some calculation, to create a beautiful  smoke - cloud - fog effect

## Usage

<prose-warning>

Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component

</prose-warning>

You can use `<Smoke />` component without passing any props, but still if you want you can tweak the props to find the best setup for you

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

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 3, 5]" />
    <Suspense>
      <Smoke />
    </Suspense>
    <TresAmbientLight />
  </TresCanvas>
</template>
```

## Props

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

<tbody>
  <tr>
    <td align="left">
      <strong>
        color
      </strong>
    </td>
    
    <td align="left">
      <code>
        TresColor
      </code>
    </td>
    
    <td align="left">
      The color of the smoke.
    </td>
    
    <td align="left">
      <code>
        '#ffffff'
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        opacity
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      The strength of the opacity.
    </td>
    
    <td align="left">
      <code>
        0.5
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        speed
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      The rotation speed of the smoke.
    </td>
    
    <td align="left">
      <code>
        0.4
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        depth
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      The base depth.
    </td>
    
    <td align="left">
      <code>
        0.3
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        segments
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      The number of smoke to render.
    </td>
    
    <td align="left">
      <code>
        10
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        texture
      </strong>
    </td>
    
    <td align="left">
      <code>
        string
      </code>
    </td>
    
    <td align="left">
      The texture of the smoke.
    </td>
    
    <td align="left">
      <a href="https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png" rel="nofollow">
        link
      </a>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        depthTest
      </strong>
    </td>
    
    <td align="left">
      <code>
        boolean
      </code>
    </td>
    
    <td align="left">
      The depthTest.
    </td>
    
    <td align="left">
      <code>
        false
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        spreadY
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      Spread on the Y axis.
    </td>
    
    <td align="left">
      <code>
        0.1
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        spreadX
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      Spread on the X axis.
    </td>
    
    <td align="left">
      <code>
        0.5
      </code>
    </td>
  </tr>
  
  <tr>
    <td align="left">
      <strong>
        scale
      </strong>
    </td>
    
    <td align="left">
      <code>
        number
      </code>
    </td>
    
    <td align="left">
      scale
    </td>
    
    <td align="left">
      <code>
        1
      </code>
    </td>
  </tr>
</tbody>
</table>

### Default texture

![Default texture](https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png)