refactor(PrecipitationDemo): remove TweakPane, use Leches

Tresjs · Dec 14, 2023 · 0860720 · 0860720
1 parent 5000d68
commit 0860720
Showing 1 changed file with 55 additions and 38 deletions.
diff --git a/playground/src/pages/staging/PrecipitationDemo.vue b/playground/src/pages/staging/PrecipitationDemo.vue
@@ -3,6 +3,8 @@ import { shallowRef, reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, Precipitation, useTweakPane } from '@tresjs/cientos'
 import { SRGBColorSpace, NoToneMapping } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#333',
@@ -12,8 +14,6 @@ const gl = {
 
 const precipitationRef = shallowRef()
 
-const { pane } = useTweakPane()
-
 const options = reactive({
   speed: 1,
   randomness: 0,
@@ -24,48 +24,65 @@ const options = reactive({
   areaZ: 25,
 })
 
-pane.addInput(options, 'speed', {
-  step: 0.1,
-  min: 0,
-  max: 10,
+const { speed, randomness, count, size, areaX, areaY, areaZ } = useControls({
+  speed: {
+    value: options.speed,
+    step: 0.1,
+    min: 0,
+    max: 10,
+  },
+  randomness: {
+    value: options.randomness,
+    step: 0.1,
+    min: 0,
+    max: 10,
+  },
+  count: {
+    value: options.count,
+    step: 10,
+    min: 500,
+    max: 30000,
+  },
+  size: {
+    value: options.size,
+    step: 0.001,
+    min: 0.001,
+    max: 1,
+  },
+  areaX: {
+    value: options.areaX,
+    step: 1,
+    min: 1,
+    max: 30,
+  },
+  areaY: {
+    value: options.areaY,
+    step: 1,
+    min: 1,
+    max: 30,
+  },
+  areaZ: {
+    value: options.areaZ,
+    step: 1,
+    min: 1,
+    max: 30,
+  },
 })
 
-pane.addInput(options, 'randomness', {
-  step: 0.1,
-  min: 0,
-  max: 10,
-})
-pane.addInput(options, 'count', {
-  step: 10,
-  min: 500,
-  max: 30000,
-})
-pane.addInput(options, 'size', {
-  step: 0.001,
-  min: 0.001,
-  max: 1,
-})
-pane.addInput(options, 'areaX', {
-  step: 1,
-  min: 1,
-  max: 30,
-})
-pane.addInput(options, 'areaY', {
-  step: 1,
-  min: 1,
-  max: 30,
-})
-pane.addInput(options, 'areaZ', {
-  step: 1,
-  min: 1,
-  max: 30,
+watch([speed.value, randomness.value, count.value, size.value, areaX.value, areaY.value, areaZ.value], () => {
+  options.speed = speed.value.value
+  options.randomness = randomness.value.value
+  options.count = count.value.value
+  options.size = size.value.value
+  options.areaX = areaX.value.value
+  options.areaY = areaY.value.value
+  options.areaZ = areaZ.value.value
 })
 </script>
 
 <template>
-  <TresCanvas
-    v-bind="gl"
-  >
+  <TresLeches />
+  <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 2, 15]" />
     <Precipitation
       ref="precipitationRef"