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 on phones

• Sleep thresholds tuned so dice stop quickly instead of jittering
• "Hold to charge" and shake-to-roll using DeviceMotion (iOS asks for permission)

Themed dice

A die is just a list of faces, so "What to eat", "Date night", "Chores" and "Truth or dare" use the same engine with text or emoji textures drawn onto a canvas. You can also make custom dice the same way.

PWA + i18n

The site is static, with a manifest and a service worker, so it can be installed and still works after the first load. There are 11 languages, each with its own prerendered URLs and hreflang tags, and a sitemap that is pinged through IndexNow.

Sharing results

After a roll, the share button adds the result to the text and can generate an image.

Try it: https://3droll.com/?utm_campaign=3day1016&utm_source=devto&utm_medium=article . I'd love feedback on how the physics feels. I'm the author of this project.