Building physics-based 3D dice in the browser (three.js + cannon-es, PWA, 11 languages)
I built 3DRoll, a free dice roller where the dice actually tumble. Here's how it works. Why physics instead of Math.random() The easy way is to choose the result first and animate the die to it. I went the other way: I throw rigid bodies with a random impulse and spin, let cannon-es simulate the roll, and read the result from whichever face ends up on top once the dice settle. Making it feel good…
I created 3DRoll, a free online dice roller that features realistic tumbling dice. Instead of predetermined outcomes and animated rolls, I opted for a different approach: I launched rigid bodies with random impulses and allowed cannon-es to simulate the dice roll, then examined the result based on the face that faced upwards once the dice came to a stop.
To ensure a smooth experience on mobile devices, I adjusted sleep thresholds to prevent jittering and allow the dice to come to a rest quickly. Users can initiate a roll by holding down on the screen and shaking their device, utilizing DeviceMotion for iOS (after obtaining permission). The engine accommodates themed dice, with each die defined by a list of faces.
Consequently, you can roll common dice like "What to eat", "Date night", "Chores", or "Truth or dare", all using the same engine with text or emoji textures overlaid on a canvas. Custom dice can also be crafted in a similar manner. The website is static, featuring a manifest and service worker, enabling installation and continued functionality after the initial load.
It supports 11 languages, each associated with unique prerendered URLs, hreflang tags, and a sitemap that is submitted via IndexNow. Following a roll, the share button permits users to add the result to the text and generate an image. I invite feedback on the physics simulation and can be reached via the provided link: https://3droll.com/?utm_campaign=3day1016&utm_source=devto&utm_medium=article.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
