Skip to content
Andy Lawton

Web Tool · Stream Overlay

Bee’s 3D Dice Roller

Fully customisable 3D dice roller. Following a request for a custom on-stream dice roller, I adapted Teal’s dice roller — which creates 3D dice using Three.js with results truly randomised via random.org integration — to allow for extensive URL-driven customisability.

Launch dice.bee.ac ↗ Try example roll ↗
Live App
dice.bee.ac ↗
Engine
Three.js · random.org
Framework
Teal’s Dice Roller ↗
Support
ko-fi.com/andlawton ↗

Changes for Bee’s dice roller

Stream & overlay features

  • Clean overlay design

    Clean design with no on-screen links or chrome, ready to drop straight into stream overlays.

  • Customisable dice & label colours

    Set any hex colour for both the dice body and the face numbers, plus adjustable dice opacity and scale.

  • Built-in chroma key background

    Defaults to a clean chroma-key backdrop throughout, with a customisable hex colour to avoid clashing with your dice.

  • Click or directional drag to throw

    As well as clicking to throw the dice, dragging in any direction will throw the dice in that manner.

Customisation & URL options

All hexcodes are without #

The dice roller is fully customisable using URL query parameters. Combine any of the parameters below with ? and & (note that all hex colour codes are written without the leading #):

Parameter Value Type Description
dicehex hexcode Sets the dice’s body colour (without #).
labelhex hexcode Sets the number’s colour (without #).
transparency number (0–1) Sets an opacity on the dice.
chromahex hexcode Sets the background colour (without #).
dicescale number (0.05–4) Increases or decreases the size of the dice (multiplies size by number).
shadows 0 or 1 Turns off dice shadows (0 = off, 1 = on).
noresult no input Turns off the results text.
resultdetail no input Breaks down the result for each die clearly.
resulttotal no input Gives the total of all dice rolls without a breakdown by die.
resulthex hexcode Sets the colour of the result text (without #).
resultbghex hexcode Sets the colour of the result text box’s background (accepts alpha channel, without #).
resultsize integer Sets the font size in pixels.
roll no input Immediately rolls on page load.
d dice notation Sets the starting dice (see dice notation below).

Example Link

dicehex=4E1E78 labelhex=CC9EEC chromahex=FBFF00

http://dice.bee.ac/?dicehex=4E1E78&labelhex=CC9EEC&chromahex=FBFF00&d=2d20&roll

Dice notation

d= parameter

Uses standard dice notation, with multiple dice groups separated with +. You can also include @ to pre-set the exact numbers they will roll (results separated by a space, URL-encoded as %20):

Example (d=) Meaning
3d4 3 four-sided dice
4d20+2d8 4 twenty-sided dice and 2 eight-sided dice
2d20@1%201 2 twenty-sided dice, both will roll 1’s (results separated by a space, URL encoded)
2d20+1d4@1%201%203 2 twenty-sided dice (both will roll 1’s) and 1 four-sided die (will roll a 3)

Adding to OBS

  1. Add a new Browser Source in OBS pointing to your configured dice.bee.ac URL, then add a Chroma Key filter to match your chosen chromahex and dice colours.
  2. To roll the dice manually, right-click the Browser Source in OBS and choose Interact to pop up the window to roll.
  3. If you make use of the roll&d= notation, you can set the Browser Source to ‘Shutdown source when not visible’ — then any time you toggle the source visible (e.g. via a hotkey) there will be a new roll.

Credits & feedback

Huge thanks to Teal for doing the hard work of creating the framework of this dice roller and making it open source, allowing for this customisation.

Should anyone have any questions or would like further customisation options, feel free to get in touch.

Find the Dice Roller here: dice.bee.ac.

Help keep the Dice Roller running

Keeping the server running costs money. While I intend to always keep the dice roller running and ad-free, any tips would be greatly appreciated — Buy me a Coffee over at Ko-Fi.