---
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://tweakpane.github.io/docs/). 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 { TresCanvas } from '@tresjs/core'
import { Pane } from 'tweakpane'

import { ref } from 'vue'

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>
```