Skip to main content
Version: 1.0.14

Box Controls

Box Controls uses the popular dat.GUI module which is self described as:

A lightweight graphical user interface for changing variables in JavaScript

Use this module if you want to dynamically experiment with the Dice-Box config settings and see real time feedback. All changes are passed to Dice-Box's updateConfig() method.

Install

Add the dice-ui module using

npm install @3d-dice/dice-ui

Setup

Then create a new instance of the picker

import { BoxControls } from '@3d-dice/dice-ui'

const Controls = new BoxControls({
onUpdate: (updates) => {
diceBox.updateConfig(updates)
}
})

Settings

Sliders

Config Optionsmindefaultmaxstep
gravity01101
mass11201
friction0.81.1
restitution001.1
linearDamping0.51.1
angularDamping0.41.1
spinForce06151
throwForce03151
startingHeight120651
settleTimeout 10005000200001000
delay101050010
scale1410.1
shadowTransparency00.81.01
lightIntensity015.1
note

While the slider has a max setting, there is no enforced max in the module itself.

Checkbox

Config Optiondefault
enableShadowstrue
suspendSimulationfalse

Combo Box

Config Optiondefaultoptions
theme'default'array passed in from options.themes

Color Picker

Config Optiondefault
themeColor#0974E6
Theme config

Not all themes make use of themeColor.

Setting theme controls

The controls for theme and themeColor have been exposed as themeSelect and themeColorPicker respectively. These controls can now be set externally.

Controls.themeSelect.setValue('diceOfRolling')
Controls.themeColorPicker.setValue('#fc05fc')

This was set up so the controls would reflect the theme or themeColor first loaded by dice box. Other controls have not been exposed.