Merge remote-tracking branch 'origin/v4' into fix/lint-problems-sky-h…

…ologram

docs/.vitepress/config.ts

@@ -151,7 +151,6 @@ export default defineConfig({
         text: 'Misc',
         collapsed: true,
         items: [
-          { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' },
           { text: 'Stats', link: '/guide/misc/stats' },
           { text: 'Html', link: '/guide/misc/html-component' },
           { text: 'StatsGl', link: '/guide/misc/stats-gl' },

docs/component-list/components.ts

@@ -102,7 +102,6 @@ export default [
   {
     text: 'Misc',
     items: [
-      { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' },
       { text: 'Stats', link: '/guide/misc/stats' },
       { text: 'Html', link: '/guide/misc/html-component' },
       { text: 'StatsGl', link: '/guide/misc/stats-gl' },

package.json

@@ -55,7 +55,6 @@
   "peerDependencies": {
     "@tresjs/core": ">=3.2",
     "three": ">=0.133",
-    "tweakpane": ">=3.0.0",
     "vue": ">=3.3"
   },
   "dependencies": {
@@ -70,7 +69,6 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@tresjs/core": "4.0.0-next.1",
     "@tresjs/eslint-config": "^1.1.0",
-    "@tweakpane/core": "^1.1.9",
     "@types/node": "^20.12.10",
     "@types/three": "^0.164.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -86,7 +84,6 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "three": "^0.164.1",
-    "tweakpane": "^3.1.10",
     "typescript": "^5.4.5",
     "unocss": "^0.59.4",
     "vite": "^5.2.11",

playground/src/pages/abstractions/Sampler.vue

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

src/core/misc/index.ts

@@ -1,9 +1,7 @@
-import { useTweakPane } from './useTweakPane'
-
 import { Stats } from './Stats'
 import { StatsGl } from './StatsGl'
 import { BakeShadows } from './BakeShadows'
 import Html from './html/HTML.vue'
 import { useGLTFExporter } from './useGLTFExporter'
 
-export { useTweakPane, Html, Stats, StatsGl, BakeShadows, useGLTFExporter }
+export { Html, Stats, StatsGl, BakeShadows, useGLTFExporter }