Tokio

Minimal GUI Framework

Installation

yarn add minigui

Usage

import { Gui } from 'minigui'

const camera = {
	position: { x: 0, y: 0, z: 0 },
}

const mesh = {
	position: { x: 0, y: 0, z: 0 },
	rotation: { x: 0, y: 0, z: 0 },
}

const gui = new Gui()
gui.create()

const cameraFolder = gui.folder('Camera')
cameraFolder.add(camera.position, 'x', -1, 1, 0.01)
cameraFolder.add(camera.position, 'y', -1, 1, 0.01)
cameraFolder.add(camera.position, 'z', -1, 1, 0.01)

const meshFolder = gui.folder('Mesh')
meshFolder.add(mesh.position, 'x', -1, 1, 0.01)
meshFolder.add(mesh.position, 'y', -1, 1, 0.01)
meshFolder.add(mesh.position, 'z', -1, 1, 0.01)
meshFolder.add(mesh.rotation, 'x', -1, 1, 0.01)
meshFolder.add(mesh.rotation, 'y', -1, 1, 0.01)
meshFolder.add(mesh.rotation, 'z', -1, 1, 0.01)

Missing Features

• [ ] Color picker
• [ ] Radians / Degrees sliders
• [ ] Dropdown/select menu
• [ ] Button controls
• [ ] Checkbox/toggle controls
• [ ] Text input fields
• [ ] Collapsible folders?
• [ ] Custom styling options
• [ ] Mobile/touch support