dice-box-threejs

3D Dice implemented with ThreeJS and Cannon ES

The goal of this project is to decouple the UI of Major's 3D Dice and strip down the dice box to just the essentials. Just a module that accepts simple dice notation input and outputs a JSON object when the dice finish rolling.

Why another dice roller when you have @3d-dice/dice-box? Teall dice had already solved predeterministic rolling, which is a feature some developers really need. Major's 3D dice are based on Teall Dice.

Demo

https://codesandbox.io/s/dice-box-threejs-j79h35?file=/src/index.js

Install using NPM

npm install @3d-dice/dice-box-threejs

Config Options

const defaultConfig = {
    framerate: (1/60),
    sounds: false,
    volume: 100,
    color_spotlight: 0xefdfd5,
    shadows: true,
    theme_surface:  "green-felt",
    sound_dieMaterial: 'plastic',
    theme_customColorset: null,
    theme_colorset: "white", // see available colorsets in https://github.com/3d-dice/dice-box-threejs/blob/main/src/const/colorsets.js
    theme_texture: "", // see available textures in https://github.com/3d-dice/dice-box-threejs/blob/main/src/const/texturelist.js
    theme_material: "glass", // "none" | "metal" | "wood" | "glass" | "plastic"
    gravity_multiplier: 400,
    light_intensity: 0.7,
    baseScale: 100,
    strength: 1, // toss strength of dice
    onRollComplete: () => {}
}

Getting Results

There are three ways to get results

You can define an onRollComplete callback function when creating the Dice Box

const Box = new DiceBox("#scene-container",{
onRollComplete: (results) => {
console.log(`I've got results :>> `, results);
}
});

You can listen for the custom event that is triggered when results are ready

document.addEventListener("rollComplete",(e => {
console.log(`I've got custom event results :>> `, e.detail);
}))

You can await the results from the roll method. Just be sure the function this call is in is async

setTimeout(async () => {
const result = await Box.roll("6d6")
console.log('result :>> ', result);
}, 1000);

Predetermined Outcomes

As mentioned previously, this project was forked for it's predeterministic rolling capability. The notation to roll your predetermined outcomes looks like this:

Box.roll("6d6@4,4,4,4,4,4") // rolls six dice that will land on 4's

Notes

In order to use textures or sounds, you will need to manually copy the assets out of the ./public folder and into your static assets folder where you're building your app.

3d-dice / dice-box-threejs

readme