Skip to content
This repository was archived by the owner on Feb 1, 2026. It is now read-only.

fix: Smoke component #645

Open
JaimeTorrealba wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix: Smoke component #645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ebb8350
fix: Smoke component
JaimeTorrealba Sep 13, 2025
4751fa1
Merge branch 'main' into Fix/smoke-component
JaimeTorrealba Sep 23, 2025
9dc158c
Merge branch 'main' into Fix/smoke-component
alvarosabu Sep 26, 2025
0be64a7
Add: spreadX, spreadY and scale props.
JaimeTorrealba Sep 27, 2025
5993eec
🔥 Remove unused imports
JaimeTorrealba Sep 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 78 additions & 43 deletions docs/.vitepress/theme/components/SmokeDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,71 @@
<script setup lang="ts">
import { Box, OrbitControls, Smoke } from '@tresjs/cientos'
import { Smoke } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { NoToneMapping, SRGBColorSpace } from 'three'
import { TresLeches, useControls } from '@tresjs/leches'
import '@tresjs/leches/styles'

const { segments, opacity, speed, depth, color, depthTest, spreadY, spreadX, scale } = useControls({
segments: {
label: 'Segments',
value: 5,
min: 1,
max: 20,
step: 1,
},
opacity: {
label: 'Opacity',
value: 0.5,
min: 0,
max: 1,
step: 0.1,
},
speed: {
label: 'Speed',
value: 0.4,
min: 0,
max: 1,
step: 0.1,
},
depth: {
label: 'Depth',
value: 0.3,
min: 0,
max: 1,
step: 0.1,
},
color: {
type: 'color',
label: 'Color',
value: '#f7f7f7',
},
depthTest: {
type: 'boolean',
label: 'Depth Test',
value: false,
},
spreadY: {
label: 'Spread Y',
value: 0.1,
min: 0,
max: 4,
step: 0.1,
},
spreadX: {
label: 'Spread X',
value: 0.5,
min: 0,
max: 4,
step: 0.1,
},
scale: {
label: 'Scale',
value: 1,
min: 0.1,
max: 4,
step: 0.1,
},
})

const gl = {
clearColor: '#333',
Expand All @@ -12,53 +76,24 @@ const gl = {
</script>

<template>
<TresCanvas
v-bind="gl"
>
<TresPerspectiveCamera :position="[0, 2, 5]" />
<Suspense>
<Smoke
:segments="4"
:width="1"
:position="[-4, -2, 0]"
/>
</Suspense>
<Suspense>
<Smoke
:segments="4"
:width="1"
:position="[-4, 2, 0]"
/>
</Suspense>
<Suspense>
<Smoke
:segments="4"
:width="1"
/>
</Suspense>
<Suspense>
<Smoke
:segments="4"
:width="1"
:position="[4, -2, 0]"
/>
</Suspense>
<TresLeches class="important-top-[-2rem] important-left-0" />
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[-0.5, 1, 5]" />
<Suspense>
<Smoke
:segments="4"
:width="1"
:position="[4, 2, 0]"
:segments="segments.value"
:opacity="opacity.value"
:speed="speed.value"
:depth="depth.value"
:color="color.value"
:depth-test="depthTest.value"
:spreadY="spreadY.value"
:spreadX="spreadX.value"
:scale="scale.value"
/>
</Suspense>
<Box :args="[2, 2]">
<TresMeshToonMaterial color="#82DBC5" />
</Box>
<TresGridHelper :args="[10, 10]" />
<TresAmbientLight :intensity="1" />
<TresDirectionalLight
:intensity="1"
:position="[2, 2, 2]"
/>
<OrbitControls />
<TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
</TresCanvas>
</template>
30 changes: 9 additions & 21 deletions docs/guide/staging/smoke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,32 +26,20 @@ You can use `<Smoke />` component without passing any props, but still if you wa
</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

<table><thead><tr class="row-header"><th class="col-name">Name</th><th class="col-type">Type</th><th class="col-description">Description</th><th class="col-default">Default</th><th class="col-required">Required</th></tr></thead><tbody><tr class="row-color"><td class="col-name"><strong><nobr>color</nobr></strong></td><td class="col-type"><code>TresColor</code></td><td class="col-description">The color of the smoke.<br>
</td><td class="col-default"><code>'#ffffff'</code></td><td class="col-required">No</td></tr><tr class="row-opacity"><td class="col-name"><strong><nobr>opacity</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The strength of the opacity.<br>
</td><td class="col-default"><code>0.5</code></td><td class="col-required">No</td></tr><tr class="row-speed"><td class="col-name"><strong><nobr>speed</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The rotation speed of the smoke.<br>
</td><td class="col-default"><code>0.4</code></td><td class="col-required">No</td></tr><tr class="row-width"><td class="col-name"><strong><nobr>width</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The base width.<br>
</td><td class="col-default"><code>10</code></td><td class="col-required">No</td></tr><tr class="row-depth"><td class="col-name"><strong><nobr>depth</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The base depth.<br>
</td><td class="col-default"><code>0.4</code></td><td class="col-required">No</td></tr><tr class="row-depth"><td class="col-name"><strong><nobr>depth</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The base depth.<br>
</td><td class="col-default"><code>1.5</code></td><td class="col-required">No</td></tr><tr class="row-segments"><td class="col-name"><strong><nobr>segments</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">The number of smoke to render.<br>
</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr><tr class="row-texture"><td class="col-name"><strong><nobr>texture</nobr></strong></td><td class="col-type"><code>string</code></td><td class="col-description">The texture of the smoke.<br>
</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr>
<tr class="row-segments"><td class="col-name"><strong><nobr>SpreadX</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">Spread factor on the X axis.<br>
</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr>
<tr class="row-segments"><td class="col-name"><strong><nobr>SpreadY</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">Spread factor on the Y axis.<br>
</td><td class="col-default"><code>20</code></td><td class="col-required">No</td></tr>
<tr class="row-segments"><td class="col-name"><strong><nobr>Scale</nobr></strong></td><td class="col-type"><code>number</code></td><td class="col-description">controls the overall size of the smoke segments<br>
</td><td class="col-default"><code>1</code></td><td class="col-required">No</td></tr>
<tr class="row-texture"><td class="col-name"><strong><nobr>texture</nobr></strong></td><td class="col-type"><code>string</code></td><td class="col-description">The texture of the smoke.<br>
</td><td class="col-default">default component texture</td><td class="col-required">No</td></tr><tr class="row-depth-test"><td class="col-name"><strong><nobr>depthTest</nobr></strong></td><td class="col-type"><code>boolean</code></td><td class="col-description">The depthTest.<br>
</td><td class="col-default"><code>true</code></td><td class="col-required">No</td></tr></tbody></table>
108 changes: 77 additions & 31 deletions playground/vue/src/pages/staging/SmokeDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,70 @@
import { Box, OrbitControls, Smoke } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { NoToneMapping, SRGBColorSpace } from 'three'
import { TresLeches, useControls } from '@tresjs/leches'
import '@tresjs/leches/styles'

const { segments, opacity, speed, depth, color, depthTest, spreadY, spreadX, scale } = useControls({
segments: {
label: 'Segments',
value: 5,
min: 1,
max: 20,
step: 1,
},
opacity: {
label: 'Opacity',
value: 0.5,
min: 0,
max: 1,
step: 0.1,
},
speed: {
label: 'Speed',
value: 0.4,
min: 0,
max: 1,
step: 0.1,
},
depth: {
label: 'Depth',
value: 0.3,
min: 0,
max: 1,
step: 0.1,
},
color: {
type: 'color',
label: 'Color',
value: '#f7f7f7',
},
depthTest: {
type: 'boolean',
label: 'Depth Test',
value: false,
},
spreadY: {
label: 'Spread Y',
value: 0.1,
min: 0,
max: 4,
step: 0.1,
},
spreadX: {
label: 'Spread X',
value: 0.5,
min: 0,
max: 4,
step: 0.1,
},
scale: {
label: 'Scale',
value: 1,
min: 0.1,
max: 4,
step: 0.1,
},
})

const gl = {
clearColor: '#333',
Expand All @@ -12,46 +76,28 @@ const gl = {
</script>

<template>
<TresCanvas
v-bind="gl"
>
<TresLeches />
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[0, 2, 5]" />
<Suspense>
<Smoke
:position="[-4, -2, 0]"
:segments="8"
/>
</Suspense>
<Suspense>
<Smoke
:position="[-4, 2, 0]"
:segments="8"
/>
</Suspense>
<Suspense>
<Smoke :segments="8" />
</Suspense>
<Suspense>
<Smoke
:position="[4, -2, 0]"
:segments="8"
/>
</Suspense>
<Suspense>
<Smoke
:position="[4, 2, 0]"
:segments="8"
:segments="segments.value"
:opacity="opacity.value"
:speed="speed.value"
:depth="depth.value"
:color="color.value"
:depth-test="depthTest.value"
:spreadY="spreadY.value"
:spreadX="spreadX.value"
:scale="scale.value"
/>
</Suspense>
<Box :args="[2, 2]">
<TresMeshToonMaterial color="#82DBC5" />
<TresMeshToonMaterial color="#82DBC5" wireframe />
</Box>
<TresGridHelper :args="[10, 10]" />
<TresAmbientLight :intensity="1" />
<TresDirectionalLight
:intensity="1"
:position="[2, 2, 2]"
/>
<TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
<OrbitControls />
</TresCanvas>
</template>
Loading
Loading