chore(cookbook): 762 recipe using tweakpane (#790)

* docs: tweakpane recipe

* docs(cookbook): tweakpane recipe thumbnail

docs/.vitepress/config/en.ts

@@ -70,6 +70,7 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           { text: 'Load Text', link: '/cookbook/text-3d' },
           { text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
           { text: 'Shaders', link: '/cookbook/shaders' },
+          { text: 'Tweakpane', link: '/cookbook/tweakpane' },
         ],
       },
       {

docs/cookbook/tweakpane.md

@@ -0,0 +1,59 @@
+---
+title: Tweakpane
+description: How to use tweakpane to control your scene
+author: alvarosabu
+thumbnail: /recipes/tweakpane.png
+difficulty: 0
+---
+
+# Tweakpane
+
+To make it easier to control the parameters of your scene, you can use [Tweakpane](https://cocopon.github.io/tweakpane/). In this guide, we will show you how to use Tweakpane to control the parameters of your scene.
+
+<StackBlitzEmbed project-id="tweakpane" />
+
+## Installation
+
+First, you need to install Tweakpane:
+
+```bash
+pnpm add tweakpane
+```
+
+Additionally install type defs
+
+```bash
+$ pnpm add -D @tweakpane/core
+```
+
+## Usage
+
+In this example, we will create a simple scene with a cube and use Tweakpane to control background color and the cube material `wireframe` property.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+
+import { Pane } from 'tweakpane'
+
+const state = reactive({
+  clearColor: '#c0ffee',
+  wireframe: false
+})
+
+const pane = new Pane()
+
+pane.addInput(state, 'clearColor')
+pane.addInput(state, 'wireframe')
+</script>
+
+<template>
+  <TresCanvas :clear-color="state.clearColor">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial :wireframe="state.wireframe" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```

docs/package.json

@@ -9,7 +9,8 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^"
+    "@tresjs/core": "workspace:^",
+    "tweakpane": "^4.0.4"
   },
   "devDependencies": {
     "@iconify-json/logos": "^1.1.43",

pnpm-lock.yaml

@@ -26,7 +26,7 @@ importers:
         version: 1.11.0
       '@tresjs/cientos':
         specifier: 3.9.0
-        version: 3.9.0(@tresjs/core@4.1.0(three@0.166.1)(vue@3.4.31(typescript@5.5.3)))(three@0.166.1)(tweakpane@4.0.4)(vue@3.4.31(typescript@5.5.3))
+        version: 3.9.0(@tresjs/core@4.2.1(three@0.166.1)(vue@3.4.31(typescript@5.5.3)))(three@0.166.1)(tweakpane@4.0.4)(vue@3.4.31(typescript@5.5.3))
       '@tresjs/eslint-config':
         specifier: ^1.1.0
         version: 1.1.0(@vue/compiler-sfc@3.4.31)(eslint@9.6.0)(typescript@5.5.3)(vitest@2.0.2(@types/node@20.14.10)(@vitest/ui@2.0.2)(jsdom@24.1.0))
@@ -144,6 +144,9 @@ importers:
       '@tresjs/core':
         specifier: workspace:^
         version: link:..
+      tweakpane:
+        specifier: ^4.0.4
+        version: 4.0.4
     devDependencies:
       '@iconify-json/logos':
         specifier: ^1.1.43
@@ -1399,8 +1402,8 @@ packages:
       three: '>=0.133'
       vue: '>=3.3'
 
-  '@tresjs/core@4.1.0':
-    resolution: {integrity: sha512-gqISOYpjerG4Us7qAVHxkhaQwl+ZhmnfEs4ON6UC/aEuq0+q6qyUJQkcU5kZ32XuxpDdnk8FbSpnqQ3o5V5cHQ==}
+  '@tresjs/core@4.2.1':
+    resolution: {integrity: sha512-sgjidv+2QA6FPerXgbLslicIuxNCJrSkTcZ2RJFWJ7mVWir8LtVs8CpSJLDVJwuhmjNwn9IIFl2WH94H8xgy4Q==}
     peerDependencies:
       three: '>=0.133'
       vue: '>=3.4'
@@ -6352,9 +6355,9 @@ snapshots:
       - '@vue/composition-api'
       - react
 
-  '@tresjs/cientos@3.9.0(@tresjs/core@4.1.0(three@0.166.1)(vue@3.4.31(typescript@5.5.3)))(three@0.166.1)(tweakpane@4.0.4)(vue@3.4.31(typescript@5.5.3))':
+  '@tresjs/cientos@3.9.0(@tresjs/core@4.2.1(three@0.166.1)(vue@3.4.31(typescript@5.5.3)))(three@0.166.1)(tweakpane@4.0.4)(vue@3.4.31(typescript@5.5.3))':
     dependencies:
-      '@tresjs/core': 4.1.0(three@0.166.1)(vue@3.4.31(typescript@5.5.3))
+      '@tresjs/core': 4.2.1(three@0.166.1)(vue@3.4.31(typescript@5.5.3))
       '@vueuse/core': 10.11.0(vue@3.4.31(typescript@5.5.3))
       camera-controls: 2.8.3(three@0.166.1)
       stats-gl: 2.2.8
@@ -6378,7 +6381,7 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@tresjs/core@4.1.0(three@0.166.1)(vue@3.4.31(typescript@5.5.3))':
+  '@tresjs/core@4.2.1(three@0.166.1)(vue@3.4.31(typescript@5.5.3))':
     dependencies:
       '@alvarosabu/utils': 3.2.0
       '@vue/devtools-api': 6.6.3