fix: Smoke component

- Reactivity
- Default values
- Correct random an unpredictable behavior

Author: JaimeTorrealba

docs/guide/staging/smoke.md

@@ -49,8 +49,7 @@ Notice that you can pass a texture in combination with props,  to personalize yo
 <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">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>

playground/vue/src/pages/staging/SmokeDemo.vue

@@ -2,6 +2,49 @@
 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 } = 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,
+  },
+})
 
 const gl = {
   clearColor: '#333',
@@ -12,46 +55,25 @@ 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"
       />
     </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>

src/core/staging/Smoke.vue

@@ -29,14 +29,6 @@ export interface SmokeProps {
    * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
    */
   speed?: number
-  /**
-   * The base width.
-   * @default 4
-   * @type {number}
-   * @memberof SmokeProps
-   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
-   */
-  width?: number
   /**
    * The base depth.
    * @default 10
@@ -74,15 +66,17 @@ export interface SmokeProps {
 const props = withDefaults(defineProps<SmokeProps>(), {
   opacity: 0.5,
   speed: 0.4,
-  width: 10,
-  depth: 1.5,
-  segments: 20,
-  texture: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png',
-  color: '#ffffff',
-  depthTest: true,
+  depth: 0.3,
+  segments: 10,
+  texture:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png',
+  color: '#f7f7f7',
+  depthTest: false,
 })
 
-const { width, depth, segments, texture, color, depthTest, opacity, speed } = toRefs(props)
+const { depth, segments, texture, color, depthTest, opacity, speed } = toRefs(
+  props,
+)
 
 const smokeRef = shallowRef()
 const groupRef = shallowRef()
@@ -91,27 +85,26 @@ defineExpose({
   instance: smokeRef,
 })
 
-const smoke = [...[segments]].map((_, index) => ({
-  x: width.value / 2 - Math.random() * width.value,
-  y: width.value / 2 - Math.random() * width.value,
-  scale: 0.4 + Math.sin(((index + 1) / segments.value) * Math.PI) * ((0.2 + Math.random()) * 10),
-  density: Math.max(0.2, Math.random()),
-  rotation: Math.max(0.002, 0.005 * Math.random()) * speed.value,
-}))
-
-const calculateOpacity = (scale: number, density: number): number => (scale / 6) * density * opacity.value
+const smoke = computed(() =>
+  Array.from({ length: segments.value }, (_, index) => ({
+    x: (Math.random() - 0.5) * 0.5,
+    y: (Math.random() - 0.5) * 0.1,
+    scale: Math.sin((index + 1) / segments.value),
+  })),
+)
 
 const { map } = (await useTexture({ map: texture.value })) as { map: Texture }
 
 const { renderer, camera } = useTresContext()
+
 const colorSpace = computed(() => renderer.value?.outputColorSpace)
 
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(({ invalidate }) => {
   if (smokeRef.value && camera.value && groupRef.value) {
-    groupRef.value?.children.forEach((child: Object3D, index: number) => {
-      child.rotation.z += smoke[index].rotation
+    groupRef.value?.children.forEach((child: Object3D) => {
+      child.rotation.z += Math.max(0.002, 0.005 * Math.random()) * speed.value
     })
     smokeRef.value.lookAt(camera.value?.position)
     invalidate()
@@ -120,31 +113,22 @@ onBeforeRender(({ invalidate }) => {
 </script>
 
 <template>
-  <TresGroup
-    ref="smokeRef"
-    v-bind="$attrs"
-  >
-    <TresGroup
-      ref="groupRef"
-      :position="[0, 0, (segments / 2) * depth]"
-    >
+  <TresGroup ref="smokeRef">
+    <TresGroup ref="groupRef" :position="[0, 0, (segments / 2) * depth]">
       <TresMesh
-        v-for="({ scale, x, y, density }, index) in smoke"
+        v-for="({ x, y }, index) in smoke"
         :key="`${index}`"
         :position="[x, y, -index * depth]"
       >
-        <TresPlaneGeometry
-          :scale="[scale, scale, scale]"
-          :rotation="[0, 0, 0]"
-        />
+        <TresPlaneGeometry />
         <TresMeshStandardMaterial
           :map="map"
           :depth-test="depthTest"
           :color-space="colorSpace"
           :color="color"
           :depth-write="false"
           transparent
-          :opacity="calculateOpacity(scale, density)"
+          :opacity="opacity"
         />
       </TresMesh>
     </TresGroup>