Mia Walks the Neighborhood

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 third-person 3D walking game titled “Mia Walks the Neighborhood” using Three.js. Load the supplied character asset `assets/Rig_model_mia.glb` as the player, scale it to about 2x, place Mia at approximately (0, 0, 4), enable mesh shadows, and use its embedded animations: play an idle animation while stationary and cross-fade to a walk animation while moving. If the model cannot load, use a simple blue capsule fallback.

Build a small stylized suburban neighborhood on a large 100x100 green grass plane. Use a bright sky-blue background with matching distance fog, ambient and hemisphere lighting, and a strong directional sun that casts soft shadows. Arrange the neighborhood around intersecting roads: tile straight road pieces across the X axis and a perpendicular set along the Z axis, with a crossroad piece at the center. Add sidewalk strips around the roads, residential building pieces on both sides of the sidewalks, trees/bushes in yards, fences along property lines, and curved street lamps. The layout should feel like a compact cross-shaped neighborhood: houses around x positions about -6 and 6 and z positions -6, 0, and 6, additional houses at x -3/3 near z ±6, and trees/fences/streetlights distributed around the sidewalks. Use the referenced low-poly city/neighborhood asset style and make all environment meshes cast and receive shadows. Include a simple red 3D test box near the center only if reproducing the source implementation literally.

Use a perspective camera (about 70-degree field of view) in a third-person follow view. Keep the camera roughly 8 units behind Mia and 4.8 units above her, looking toward her upper body; allow horizontal camera yaw adjustment. The camera should follow Mia as she walks and remain behind her, with a slight yaw offset based on mouse/touch look input. Render with antialiasing, capped device pixel ratio, ACES filmic tone mapping, and an 0.1-to-300 camera range.

Movement: support W/A/S/D and arrow keys, plus a mobile virtual joystick fixed near the bottom-left. Combine keyboard and joystick input, normalize diagonal movement, and move Mia at roughly 5.5 world units per second. W/up moves toward negative Z, S/down toward positive Z, A/left toward negative X, and D/right toward positive X. Rotate Mia to face her movement direction. Add a subtle vertical bob while walking and keep her just above the ground; there is no implemented jumping, collision system, goal, enemy, coin collection, or score mechanic in the actual game logic. Let her freely walk through the neighborhood rather than enforcing sidewalk collisions.

For desktop camera control, drag the canvas horizontally with the left mouse button to rotate the follow camera. On touch devices, drag on the right half of the screen to adjust camera yaw, while the left-bottom joystick controls walking. Add a fixed bottom-center translucent dark instruction panel reading approximately “Drag the joystick to walk • Mouse drag to look around” and “Stay on the sidewalks between houses”. Add a translucent circular joystick with a smaller white circular knob. Do not add a score counter, coins, jump prompt, or other HUD elements unless separately implementing them; they are not present in the supplied HTML/game.js mechanics. Make the experience fullscreen, hide page overflow, and resize the renderer and camera on window resize.