3D Interactive Badges

A simple interactive 3D visualization featuring floating badges that respond to user interaction. Built with Three.js.

Features

• Interactive 3D badges with hover effects and click animations
• Smooth floating animations
• Add/Remove badges dynamically
• Debug mode for development
• Responsive design

Controls

Keyboard Shortcuts

• D - Toggle debug mode (shows axes, grid, and camera position)
• R - Reset camera to default position

Mouse Controls

• Hover - Badges tilt towards cursor and scale up
• Click - Triggers a flip animation on the badge

Buttons

• Add Badge - Adds a new badge (maximum 5)
• Remove Badge - Removes the rightmost badge (minimum 1)

Debug Mode Features

When debug mode is enabled (D key):

• Axes helper
• Grid helper
• Camera position information
• Orbit controls enabled

Technologies

• Three.js
• HTML5
• CSS3
• JavaScript

Setup

Simply open index.html in a modern web browser. No build process required.