Mia Dress Up

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a browser-based 3D character dress-up game titled “Mia Dress Up.” Use Three.js with an imported GLB character asset at assets/Rig_model_mia.glb as the central avatar. Place the avatar in a simple dark studio: a large dark gray floor plane and a dark gray back wall, with soft neutral hemisphere lighting plus a warm key directional light from the upper right/front and a cooler fill light from the opposite side. Render the scene full-screen behind a fixed control panel on the right.

Camera and interaction: use a perspective camera initially positioned around (0, 1.4, 2.8), aimed at the character’s upper-body/center target around y=1.1. Add orbit controls so the player can drag to rotate around Mia, zoom with the mouse wheel, cannot pan, and is constrained to a reasonable close/far range (approximately 1 to 6 units). Enable damping for smooth rotation. The character should face the camera in the initial view and be shown prominently in the center-left portion of the screen. If the GLB contains animations, play an idle animation (prefer an animation whose name contains “idle,” otherwise use the first animation).

Build a fixed right-side UI panel approximately 280px wide and full height, with a nearly black translucent background, subtle left border, scrolling if needed, and compact system UI typography. At the top show a dress emoji and the heading “Mia Dress Up.” Add an uppercase “COLORS” section with a divider and four full-width HTML color inputs: “Hair,” “Skin,” “Clothes,” and “Shoes / Accents.” Initialize them to dark brown hair (#2c2118), warm light skin (#e8c39e), muted blue clothes (#5c7a9e), and near-black accents (#1f1f1f). Below them place dark gray rounded buttons labeled “Apply Colors” and “Random Look.”

Color behavior: pressing Apply Colors reads the four color pickers and traverses Mia’s meshes, changing materials based on mesh names. Hair-related names such as hair or ponytail use the Hair color; face/head-related skin meshes and meshes named skin, face, body, arm, or leg use the Skin color; meshes named shoe, boot, or sock use Shoes / Accents; all other character meshes use Clothes. Make the material updates visible immediately. Also tint visible accessory meshes with the Shoes / Accents color, except meshes whose names indicate glass or lens, which should retain their transparent/lens appearance.

Add an uppercase “ACCESSORIES” section with a divider and four checkbox rows: Hat, Glasses, Sunglasses, and Bag. Load these as separate GLB accessory models and attach them as children of the Mia model, hiding/showing each model when its checkbox changes. Use these source assets/roles if available: a cap/hat GLB, glasses GLB, sunglasses GLB, and bag GLB. Position them relative to the character so the hat sits on the head, glasses and sunglasses sit in front of the face, and the bag hangs at Mia’s side; use approximate local placements of hat (0, 1.78, 0), glasses/sunglasses (0, 1.52, 0.22), and bag (0.48, 1.05, 0.05), with the glasses scaled around 0.85, hat around 1.05, and bag around 0.9. Initially show the glasses and hide the hat and bag; sunglasses should start hidden unless explicitly enabled. The checkbox state should directly control visibility. Accessories should cast/receive shadows when supported.

Random Look should generate new random hex colors for hair, clothes, and accents and a warm skin-range color, update all four color inputs, apply them immediately, and randomly turn each of the four accessory checkboxes on or off. Color inputs should also apply changes live on input, while the Apply Colors button remains available. Keep the interface focused on customizing and viewing the single model: no score, timer, combat, inventory, levels, or other gameplay systems. Include a small muted help note at the bottom reading “Drag to rotate view” and “Scroll to zoom in/out.” Match the visible style: low-poly/simple 3D character presentation, black/dark gray background and studio, muted blue outfit in the default look, and a minimal dark charcoal control panel with white headings and gray labels/buttons.