How I Used Kiro to Turn a Simple Three.js Scene into a Playable Game World

#kiro #webdev #ai

What started as a simple haunted house scene in a Three.js tutorial became my most ambitious hackathon project yet. Armed with React Three Fiber and Kiro (an AI-powered dev tool), I spent one week transforming static 3D scenery into Haunted House Party — a fully interactive Halloween game where the doors lead to unpredictable mini-games.

This is the story of how I built it, what went wrong, and what I learned about shipping 3D web experiences fast.

From Classroom to Game World

Earlier this year, I built a basic haunted house scene in a Three.js course. Nothing fancy, just a house surrounded by graves. When Kiro asked us to build a spooky app for Kiroween, that scene came first to mind, and I asked myself:

"What if the house wasn't just scenery? What if the door hid a mystery like in Halloween movies?"

That question became Haunted House Party, a Halloween-themed world where the door teleports you into a random mini-game. To modernize the workflow and gain component flexibility, I rebuilt everything from scratch in React Three Fiber.

The Core Mechanic

The gameplay loop is simple:

Knock three times on any door in the foggy graveyard
Get transported into a random 3D mini-game inside a dark room
Fail? Retry or get kicked back to the hub world

Mini-games include:

Slicing flying pumpkins mid-air
Sprinting through endless tomb tunnels

The Build Process

1. Migrating to React Three Fiber with Kiro
Kiro accelerated my migration from vanilla Three.js to React Three Fiber. Instead of manually rewriting geometry and materials, I wrote steering documents upfront to establish:

The atmospheric vibe and tone
Core game mechanics
Lighting and fog parameters
Design rules for future rooms

This gave the AI clear context for generating better code suggestions.

2. Rapid Prototyping with AI-Assisted Development
React Three Fiber doesn't include Three.js's built-in GUI helpers, which can slow down iteration. I used Kiro's vibe chat for:

Previewing animations before implementing them
Testing asset placement and scaling
Troubleshooting material and shader issues
Getting real-time optimization suggestions

This conversational debugging style saved hours of trial and error.

3. Building Structured Mini-Game Specs
Before writing any game logic, I created detailed specs for each mini-game:

Objective: What's the win condition?
Player controls: Keyboard? Mouse? Both?
Asset list: Models, textures, sounds needed
Win/fail conditions: Clear success/failure states
Expected animations: Entry, gameplay, exit These specs dramatically improved the quality of AI-generated code and reduced back-and-forth iterations.

4. Automated Repository Cleanup
As I experimented with different assets and approaches, my repo became cluttered. I created Kiro agent hooks that automatically:

Deleted unused files after each iteration
Removed outdated test assets
Kept the codebase lean and navigable

This automation was crucial for maintaining velocity during the hackathon crunch.

5. Performance Optimization (The Never-Ending Battle)
Every iteration included aggressive optimization:

Simplifying shaders to reduce GPU load
Baking lights instead of real-time shadows
Compressing textures with minimal quality loss
Replacing heavy models with sub-8MB alternatives

Challenges That Nearly Broke Me (and My Laptop)

Performance Bottlenecks
3D assets get heavy fast. My laptop froze multiple times before I finally replaced most of the assets with much lighter versions. The loading screen became a necessity, not a feature.

Lesson learned: Start with performance budgets. Know your target framerates and file size limits before importing that beautiful 50MB haunted tree model.

Slow Iteration Cycles
Writing comprehensive specs meant Kiro sometimes processed 15-17 tasks before I could test anything. This cost me a lot of hours wh

Lesson learned: Balance spec detail with iteration speed. It's faster to create only the important tasks for the specs and skip the tests initially.

Asset Hunting
Finding good quality, lightweight, Halloween-themed 3D assets was harder than expected. Many free models were:

Too polygon-heavy
Poorly rigged
Missing textures
Over 10MB

Lesson learned: Budget time for asset sourcing. Consider creating simple custom models instead of hunting for the "perfect" free asset.

Wins I'm Proud Of

Despite the struggles, I shipped several features I'm genuinely excited about:

A perfect eerie loading animation that sets the mood immediately
Fully functional mini-games with distinct mechanics
Strong visual identity for each room (fog, lighting, materials all cohesive)
Smooth gameplay after aggressive optimization
The zoom-into-the-door transition — this took many revisions but nails the vibe

Key Takeaways

Ship Fast, Fix Fast
When one approach failed, I pivoted immediately instead of trying to salvage it. This mentality kept momentum alive during the hackathon.

**React Three Fiber is Powerful (and Different)
I leveled up massively in R3F and learned how scene management differs from vanilla Three.js. The component model is brilliant once you embrace it.

AI Accelerates Development When Used Intentionally
Kiro wasn't magic — it was most effective when I gave it:

Clear context through steering documents
Structured specs for complex features
Specific debugging questions instead of vague prompts

3D Game Development is a Skill Stack
I now understand the full pipeline: modeling, texturing, animation, optimization, gameplay programming, and performance profiling. Each piece matters.