Rolling The Dices - Multipurpose 3d dices for games

Built to offer multipurpose custom dice of different shapes, colors, faces and sizes with light effects for your games.

The number of dice, colors, text, images or videos on faces, size, floating result text, angular velocity and more can be controlled using JSON data. You can configure the appearance of each die and also have the ability to assign a probability on each face of the die. All this with an optional sharp light effect to highlight the landing face.

Features

• Type of dices: hexahedron, octahedron, decahedron, dodecahedron and icosahedron
• API for get/set options of dices and get roll results
• Deterministic dices, with result probabilities on each face
• Support to choose where to roll the dice from or do it randomly
• Customizable background/text/edges colors, sizes, font sizes, mass and angular velocity of each one
• Support for print text, special character, insert an image or video on each face
• Boards with background color, image or even with a video
• Custom sounds when colliding with each other or with the board
• Info popups can be styled via CSS and can be overrided with custom text
• Methods and callbacks to recover the results of the rolls
• Optional data when getting outcomes
• Optional Light effect to highlight landing face
• Responsive & supports desktop and mobile
• There is a configurator available to design each face to facilitate your design. You can also generate the code so that you only have to copy it into your script
• Usage examples included. Note: In addition, there are 2 examples included as “art examples” with other light and shadow effects but they are separated from the app options

Libraries

• Three js
• Cannon js

Documentation

Documentation is here

SUPPORT

For item built-in features and assistance with reported bugs and issues write a comment please

what customers say?

Next up

Some bug fixes and I accept suggestions. Send me and email for request new features here

CHANGELOG

Major update August 2024

Video, sounds, probabilities and deterministic dices, angular velocity… and more easy to configure

-- Feature: Boards with background color, image or even with a video -- Feautre: Toast (result info popup) can be activate or deactivate. -- Feautre: Added 2 event listener/callbacks that call the same functions. Can be used in both ways. --"beforeRoll": Runs before rolling the dice. --"rollComplete": Runs when all dice finish rolling and retrieves the results as an argument. Examples: --Event listener (with custom event constructor): document.addEventListener("rollComplete",(e => { console.log(e); })) --Callback: ... new rollingTheDices({ ... onRollComplete: (e) => { console.log(e); }, ... -- Feature: Added mass to dices. Defines the weight of the dice with values from 100 to 800. Default: 800 -- Feautre: Added angularVelocity to dices. Defines rotation speed with values from 0 to 120. Default: random from 30 to 120 -- Feature: Video on dice face. -- Feature: Custom sounds when colliding with each other or with the board -- Feature: faceResultText (within faceValues): overwrites the popup of dice result with custom text -- Feature: faceUserData (within faceValues): optional object that can contain custom data for retrieval in the getThrowResults method or callbacks. -- Feature: probability (within faceValues. Replaces the old presetValue setting): defines the probability of landing on that face. The values of all the faces should add up to 100 for better weighting. If 100 is defined on one face and 0 on the others, it will have 100% probability. Also, if on a die of 6, only one property is defined, the others are automatically added probability 50. -- Feature: FaceValues setting has been rewriten for an easier and simpler configuration. Now it's more object oriented. Within them you can configure the probability, the faceUserData and faceResultText of each face. -- Change: Toast: text and pop up more beautiful through css by default -- Change: better random initial position -- Fix: Minor bug fixes and clean up -- Breaking-change: presetValue setting is no longer available. Replaced by probability setting within faceValue -- Breaking-change: faceValues must be configured with objects to make it easier

Major update April 2024

It is now possible to configure each face of the dice independently. You will be able to paint each face with a different color, put short or long text adapting the font size or add an image that occupies the size and position you want.

Also in this version there is a configurator available to design each face with images or text to facilitate your design. You can also generate the code so that you only have to copy it into your script

-- Fixed a bug related to slow connections -- Fixed a bug in presetValue option. -- Reduced the brightness on the dice with image so that it looks more realistic -- Minor bug fixes and clean up