revert: remove tweakpane (#313)" (#343)

* Revert "feat: remove tweakpane (#313)"

This reverts commit 19b08cc.

* chore(app): Update deps

package.json

@@ -53,12 +53,13 @@
   "peerDependencies": {
     "@tresjs/core": ">=3.2",
     "three": ">=0.133",
+    "tweakpane": ">=3.0.0",
     "vue": ">=3.3"
   },
   "dependencies": {
     "@tresjs/core": "3.7.0",
     "@vueuse/core": "^10.7.2",
-    "camera-controls": "^2.7.3",
+    "camera-controls": "^2.7.4",
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",
     "three-custom-shader-material": "^5.4.0",
@@ -68,22 +69,24 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@tresjs/core": "^3.2.1",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@types/node": "^20.11.10",
-    "@types/three": "^0.160.0",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@tweakpane/core": "^1.1.9",
+    "@types/node": "^20.11.16",
+    "@types/three": "^0.159.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^4.6.2",
     "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.21.0",
+    "eslint-plugin-vue": "^9.21.1",
     "gsap": "^3.12.5",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.2",
     "release-it": "^17.0.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "three": "^0.160.1",
+    "three": "^0.159.0",
+    "tweakpane": "^3.1.10",
     "typescript": "^5.3.3",
-    "unocss": "^0.58.4",
+    "unocss": "^0.57.7",
     "vite": "^5.0.12",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-dts": "3.7.2",

playground/src/pages/abstractions/Sampler.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, shallowReactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/dist/style.css'
-import { OrbitControls, Sampler } from '@tresjs/cientos'
+import { OrbitControls, Sampler, useTweakPane } from '@tresjs/cientos'
 import { SRGBColorSpace, ACESFilmicToneMapping } from 'three'
 import type { Mesh } from 'three'
 
@@ -18,13 +16,17 @@ const gl = {
 const torusRef = ref<Mesh>()
 const instancesRef = ref<Mesh>()
 
-const { samples } = useControls({
-  samples: {
-    min: 1,
-    max: 50,
-    step: 1,
-    value: 1,
-  },
+const state = shallowReactive({
+  count: 1,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(state, 'count', {
+  label: 'samplers',
+  min: 1,
+  max: 50,
+  step: 1,
 })
 </script>
 
@@ -34,7 +36,7 @@ const { samples } = useControls({
     <TresPerspectiveCamera :position="[0, 0.5, 5]" />
     <OrbitControls />
 
-    <Sampler :count="samples">
+    <Sampler :count="state.count">
       <TresMesh ref="torusRef">
         <TresTorusGeometry />
       </TresMesh>