Technical Specification: Free Online 3D Dice Roller

Overview

A high-fidelity, browser-based 3D dice simulator that utilizes Three.js for rendering and Cannon.js for physics calculations. The application allows users to select, throw, and view results for standard polyhedral dice (D4 through D20) in a clean, professional, light-mode interface.

Technical Architecture

• Core Frameworks: Vanilla JavaScript, HTML5, CSS3.
• Physics/3D Engine: Three.js and Cannon.js (loaded via reliable CDNs).
• State Management: In-memory object state only (No localStorage, cookies, or IndexedDB per iframe sandbox requirements).
• Constraints: Single HTML file. No external styling or logic files. No branding. No dark mode.

Features

• Dice Selection: UI selector for dice quantity and type (D4, D6, D8, D10, D12, D20).
• Physics Simulation: Realistic rolling, tumbling, and collision detection within a 3D floor plane.
• Live Results: Real-time calculation of individual die results and total sum.
• Clear functionality: Ability to clear the board and reset the physics scene.
• Responsive Canvas: The 3D scene must handle resizing gracefully, filling the available viewport space.

UI/UX Design

• Aesthetic: Clean, minimalist 'SaaS' look. Use a soft color palette: white backgrounds (#FFFFFF), light grey accents (#F9FAFB, #E5E7EB), and a primary action color (e.g., a professional blue #2563EB) for the 'Roll' button.
• Layout:
  • Header: Sticky top header with app title and simple instruction tooltip.
  • Control Panel: A bar at the bottom containing buttons for dice selection (+/-), a 'Roll' trigger, and a 'Clear' button.
  • Viewport: The central area is dominated by the Three.js canvas.
  • Sidebar/Overlay: A transparent glass-morphism overlay showing the current total and last roll history (transient data).

Implementation Directives

1. Sandbox Compatibility: Do NOT use localStorage, sessionStorage, cookies, alert(), or prompt(). All communication must happen via custom modal popups and in-memory variables.
2. Performance: Optimize geometry and physics bodies to ensure smooth 60fps performance on mobile devices.
3. Animations: Use CSS transitions for button interactions (hover states) and UI panel reveals. Keep the 3D physics animation fluid.
4. No Branding: Ensure the UI is devoid of any specific brand names, logos, or identifying marks.
5. Accessibility: Ensure all interactive elements have proper aria-labels and keyboard navigation support.