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>

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 depth.
1.5No
numberThe number of smoke to render.
20No
numberSpread factor on the X axis.
20No
numberSpread factor on the Y axis.
20No
numbercontrols the overall size of the smoke segments
1No
stringThe texture of the smoke.
default component textureNo
booleanThe depthTest.
trueNo