diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5f1e13a8..1a38885d 100644
--- a/docs/.vitepress/config.ts
+++ b/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' },
diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
index 0328e5d4..491a9a1e 100644
--- a/docs/component-list/components.ts
+++ b/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' },
diff --git a/docs/guide/misc/use-tweakpane.md b/docs/guide/misc/use-tweakpane.md
deleted file mode 100644
index e7cda032..00000000
--- a/docs/guide/misc/use-tweakpane.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# useTweakPane
-
-::: warning
-
-useTweakPane is deprecated as of Cientos v3.7.0 and will no longer be part of this package. Please migrate to [`@tresjs/leches` package](https://github.com/Tresjs/leches) or [v-tweakpane](https://github.com/vinayakkulkarni/v-tweakpane) instead.
-
-:::
-
-[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
-You can change the container of the panel by passing the `selector` option to the `useTweakPane` function.
-:::
-
-## Basic usage
-
-```ts
-import { useTweakPane } from '@tresjs/cientos'
-
-const { pane } = useTweakPane()
-
-const experiment = reactive({
- clearColor: '#000000',
- alpha: true,
- shadow: true,
-})
-
-pane.addInput(experiment, 'clearColor', {
- label: 'Clear Color',
- colorMode: 'hex',
-})
-
-pane.addInput(experiment, 'alpha')
-```
-
-The result will be something like this:
-
-![](/use-tweakpane.png)
-
-## Options
-
-| Name | Type | Default | Description |
-| :----------- | -------- | ----------- | -------------------------------------------------------------- |
-| **selector** | `string` | `undefined` | The selector of the container where the panel will be created. |
diff --git a/package.json b/package.json
index 647ba05c..1f38022a 100644
--- a/package.json
+++ b/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",
diff --git a/playground/src/pages/abstractions/Sampler.vue b/playground/src/pages/abstractions/Sampler.vue
index 1e103e0e..907bd53b 100644
--- a/playground/src/pages/abstractions/Sampler.vue
+++ b/playground/src/pages/abstractions/Sampler.vue
@@ -1,7 +1,9 @@
@@ -36,7 +34,7 @@ pane.addInput(state, 'count', {
-
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 61e8635b..e0a4311d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,9 +39,6 @@ importers:
'@tresjs/eslint-config':
specifier: ^1.1.0
version: 1.1.0(@vue/compiler-sfc@3.4.27)(eslint@9.2.0)(typescript@5.4.5)
- '@tweakpane/core':
- specifier: ^1.1.9
- version: 1.1.9
'@types/node':
specifier: ^20.12.10
version: 20.12.12
@@ -87,9 +84,6 @@ importers:
three:
specifier: ^0.164.1
version: 0.164.1
- tweakpane:
- specifier: ^3.1.10
- version: 3.1.10
typescript:
specifier: ^5.4.5
version: 5.4.5
@@ -1780,10 +1774,6 @@ packages:
engines: {node: '>=10.13.0'}
dev: true
- /@tweakpane/core@1.1.9:
- resolution: {integrity: sha512-9tq+KAhaqPiOgsFyLPAz1IMXkVfhRqxGzAgy1ps3As6o3W7XjnU7sev6OlD/Z+Pzw8uZVMukkSHf2e0uCU6u0A==}
- dev: true
-
/@tweenjs/tween.js@23.1.2:
resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==}
@@ -7128,10 +7118,6 @@ packages:
resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
dev: true
- /tweakpane@3.1.10:
- resolution: {integrity: sha512-rqwnl/pUa7+inhI2E9ayGTqqP0EPOOn/wVvSWjZsRbZUItzNShny7pzwL3hVlaN4m9t/aZhsP0aFQ9U5VVR2VQ==}
- dev: true
-
/type-check@0.4.0:
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
engines: {node: '>= 0.8.0'}
diff --git a/src/core/misc/index.ts b/src/core/misc/index.ts
index 7bbcc888..501110f3 100644
--- a/src/core/misc/index.ts
+++ b/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 }
diff --git a/src/core/misc/useTweakPane/index.ts b/src/core/misc/useTweakPane/index.ts
deleted file mode 100644
index 0a7dda9d..00000000
--- a/src/core/misc/useTweakPane/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { onMounted, onUnmounted } from 'vue'
-import { Pane } from 'tweakpane'
-import { useRenderLoop } from '@tresjs/core'
-import { useLogger } from '../../../composables/useLogger'
-
-type TweakPane = Pane & { addBlade: (blade: any) => void, addInput: (blade: any) => void }
-let pane: TweakPane
-
-export const useTweakPane = (selector = 'body') => {
- if (!pane) {
- pane = new Pane({
- container: document.querySelector(selector) as HTMLElement,
- }) as TweakPane
- pane.element.style.position = 'absolute'
- pane.element.style.top = '1rem'
- pane.element.style.right = '1rem'
- pane.element.style.zIndex = '9999'
- }
-
- const { logWarning } = useLogger()
-
- logWarning('useTweakPane is deprecated as of Cientos v3.7.0 and will no longer be part of this package. Please migrate to @tresjs/leches package https://github.com/Tresjs/leches or v-tweakpane https://github.com/vinayakkulkarni/v-tweakpane instead.')
- // eslint-enabled
-
- /**
- * Disposes the TweakPane instance.
- *
- */
- function disposeTweakPane() {
- if (pane) {
- pane.dispose()
- }
- }
-
- onMounted(() => {
- const { resume } = useRenderLoop()
- resume()
- })
- onUnmounted(() => {
- disposeTweakPane()
- })
-
- return { pane, disposeTweakPane }
-}