Tweakpane

To make it easier to control the parameters of your scene, you can use Tweakpane. In this guide, we will show you how to use Tweakpane to control the parameters of your scene.

Loading...

Installation

First, you need to install Tweakpane:

pnpm add tweakpane

Additionally install type defs

$ 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.

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