A 3D environment for rolling game dice using threejs and cannon-es
npm install @3d-dice/dice-box-threejsBased on Major's 3D Dice
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.
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
$3
1. 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);
}
});
`
2. 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);
}))
`
3. 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.