Skip to content

Smoke

<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

WARNING

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

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
<template>
  <TresCanvas>
    ...
    <Suspense>
      <Smoke />
    </Suspense>
    ...
  </TresCanvas>
</template>

Notice that you can pass a texture in combination with props, to personalize your effect

vue
<template>
  <TresCanvas>
    ...
    <Suspense>
      <Smoke
        :speed="0.8"
        :segments="12"
        texture="my_texture_path"
        :color="#f7f"
      />
    </Suspense>
    ...
  </TresCanvas>
</template>

Props

NameTypeDescriptionDefaultRequired
TresColorThe color of the smoke.
'#ffffff'No
numberThe strength of the opacity.
0.5No
numberThe rotation speed of the smoke.
0.4No
numberThe base width.
10No
numberThe base depth.
1.5No
numberThe number of smoke to render.
20No
stringThe texture of the smoke.
default component textureNo
booleanThe depthTest.
trueNo