Skip to content

useTweakPane deprecated


useTweakPane is deprecated as of Cientos v3.7.0 and will no longer be part of this package. Please migrate to @tresjs/leches package or v-tweakpane instead.

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.

pnpm add @tweakpane/core @tweakpane/essentials -D
npm install @tweakpane/core @tweakpane/essentials -D
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.


You can change the container of the panel by passing the selector option to the useTweakPane function.

Basic usage

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:


selectorstringundefinedThe selector of the container where the panel will be created.