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",