Merge pull request #234 from Tresjs/docs/expand-precipitation-docs

docs: add more examples of the precipitation component

docs/.vitepress/theme/components/PrecipitationBeamDemo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { shallowRef, reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+import { SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const precipitationRef = shallowRef()
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
+    <Precipitation
+      ref="precipitationRef"
+      :position="[0, 3, 7.5]"
+      :randomness="0"
+      :speed="0.5"
+      :count="2000"
+      :area="[1, 10, 1]"
+    />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/PrecipitationDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { shallowRef, reactive } from 'vue'
+import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Precipitation } from '@tresjs/cientos'
+import { Precipitation } from '@tresjs/cientos'
 import { SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
@@ -11,16 +11,6 @@ const gl = {
 }
 
 const precipitationRef = shallowRef()
-
-const options = reactive({
-  speed: 1,
-  randomness: 0,
-  count: 1000,
-  size: 0.1,
-  areaX: 25,
-  areaY: 25,
-  areaZ: 25,
-})
 </script>
 
 <template>
@@ -30,13 +20,7 @@ const options = reactive({
     <TresPerspectiveCamera :position="[0, 2, 15]" />
     <Precipitation
       ref="precipitationRef"
-      :speed="options.speed"
-      :area="[options.areaX, options.areaY, options.areaZ]"
-      :count="options.count"
-      :randomness="options.randomness"
-      :size="options.size"
     />
     <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
   </TresCanvas>
 </template>

docs/.vitepress/theme/components/PrecipitationRainDemo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { shallowRef, reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+import { SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const precipitationRef = shallowRef()
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
+    <Precipitation
+      ref="precipitationRef"
+      :randomness="0"
+      :speed="1"
+      :count="2500"
+    />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/PrecipitationStormDemo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { shallowRef, reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+import { SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const precipitationRef = shallowRef()
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
+    <Precipitation
+      ref="precipitationRef"
+      :randomness="3"
+      :speed="1"
+      :count="2500"
+    />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>

docs/guide/staging/precipitation.md

@@ -8,33 +8,97 @@
 
 ## Usage
 
-You can use `<Precipitation />` component without passing any props.
+You can use `<Precipitation />` component without passing any props, this will achieve a snowy effect, like the before example.
 
-```vue
+```vue{8}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
 <template>
   <TresCanvas>
-    ...
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
     <Precipitation />
-    ...
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
 
-To create uniques effects play around with the different props available
+By setting the randomness to 0, increase the speed  and reduce the count. You can easily achieve a more rainy effect.
 
-```vue
+<DocsDemo>
+  <PrecipitationRainDemo />
+</DocsDemo>
+
+
+```vue{9,10,11}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
+    <Precipitation
+      :speed="1"
+      :randomness="0"
+      :count="2500"
+    />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+```
+A storm effect? Easy just increase the randomness.
+
+<DocsDemo>
+  <PrecipitationStormDemo />
+</DocsDemo>
+
+```vue{9,10,11}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
 <template>
   <TresCanvas>
-    ...
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
     <Precipitation
       :speed="1"
+      :randomness="3"
       :count="2500"
-      :map="myTexture"
     />
-    ...
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+```
+
+What about an infinite beam?.
+
+<DocsDemo>
+  <PrecipitationBeamDemo />
+</DocsDemo>
+
+Just set the area, to the axis that you need constrain.
+
+```vue{9,10,11,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
+    <Precipitation
+      :randomness="0"
+      :speed="0.5"
+      :count="2000"
+      :area="[1, 10, 1]"
+    />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
+You can create much more! ☔
 
 ::: warning
 Be careful with the performance this components render infinite particles in movement