diff --git a/docs/guide/misc/use-tweakpane.md b/docs/guide/misc/use-tweakpane.md index b0c0cb84..08d85e22 100644 --- a/docs/guide/misc/use-tweakpane.md +++ b/docs/guide/misc/use-tweakpane.md @@ -2,6 +2,23 @@ [TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications. +::: code-group + +```bash [pnpm] +pnpm add @tweakpane/core @tweakpane/essentials -D +``` + +```bash [npm] +npm install @tweakpane/core @tweakpane/essentials -D + +``` + +```bash [yarn] +yarn add @tweakpane/core @tweakpane/plugin-essentials -D +``` + +::: + **TresJS** provides a composables called `useTweakPane` that creates a Tweakpane panel to your container so you can add tweaks to it. By default, the panel is created on the top right corner of the canvas and includes a FPS graph monitor to keep and eye on the performance of your scene. ::: info diff --git a/package.json b/package.json index 6d9f4f84..1c25a90f 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,8 @@ }, "peerDependencies": { "three": ">=0.133", - "vue": ">=3.3" + "vue": ">=3.3", + "tweakpane": ">=4.0.0" }, "devDependencies": { "@alvarosabu/prettier-config": "^1.3.0", diff --git a/stats.html b/stats.html index fc7a053a..6397f39f 100644 --- a/stats.html +++ b/stats.html @@ -5,7 +5,7 @@ -