Fully customisable 3D dice roller.
Find the dice roller here: dice.bee.ac
Example roll
Following a request for a custom on stream dice roller I took to adapting Teal’s dice roller to allow for some more customisability.
Teal’s dice roller creates dice using Three.js with results truly randomised using random.org integration.
Changes for Bee’s dice roller:
Clean design with no links for stream overlays.
Customisable Dice and Label Colours.
Default to a chromakey throughout with a customisable colour.
As well as clicking to throw the dice, dragging in any direction will throw the dice in that manner.
Customisation and URL options
The dice roller is fully customisable using URL parameters.
Available parameters: (all hexcodes are without the #)
dicehex - hexcode - sets the dice’s body colour.
labelhex - hexcode - set’s the number’s colour.
transparency - number 0-1 - set’s an opacity on the dice.
chromahex - hexcode - sets background colour
dicescale - number 0.05-4 - increase or decreases size of the dice. (multiplies size by number)
shadows - 0 or 1 - turns off dice shadows.
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 - set the colour of the result text
resultbghex- hexcode - set the colour of the result text box’s background. (accepts alpha channel)
resultsize - integer- sets the font size in pixels
roll- no input- immediately rolls on page load.
d - dice notation (see below) - set’s the starting dice
example link: http://dice.bee.ac/?dicehex=4E1E78&labelhex=CC9EEC&chromahex=FBFF00&d=2d20&roll
dice notation
standard dice notation, multiple dice separated with +. can also include @ to set the numbers they will roll.
examples:
3d4 = 3 four sided dice
4d20+2d8 = 4 twenty sided dice and 2 eight sided dice
2d20@1%201 = 2 twenty sided, both will roll 1’s. (results separated by a space, url encoded)
2d20+1d4@1%201%203 = 2 twenty sided, both will roll 1’s, 1 4 sided die, will roll a 3
Adding to OBS
Set as browser source and add a chroma key filter to match the chosen chromahex and dice colours.
To roll the dice right click source and choose "Interact" to pop up window to roll.
If you make use of the roll&d= notation you can set the source to ‘shutdown source when not visible’ then any time you toggle the source visible (via hotkey) there will be a new roll.
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 and tips would be greatly appreciated.
Buy me a Coffee over at Ko-Fi
Updates:
2021-10-24 - Fixed D100 pre set results.
2022-01-16 - Added dice scale parameter
2022-04-03 - Added result parameters
2023-04-04 - Added resulttotal parameters