Skip to main content
Public
README.md 2.64 KB

Voxel Toy Box (Appsgm Edition)

A high-fidelity 3D voxel sandbox and architectural playground powered by the Appsgm 3 (GenAI) engine. Create complex sculptures from scratch, dismantle them into a pile of blocks, and use those same blocks to rebuild entirely new structures.

🚀 Key Features

  • Generative Design: Use natural language prompts to generate unique 3D voxel models via Appsgm.
  • Physics-Based Dismantling: Explode your creations into a satisfying pile of loose voxels.
  • Smart Rebuilding: Watch as loose blocks fly through the air to assemble into new shapes using a greedy color-matching algorithm.
  • 3D Visualization: Full OrbitControls support for viewing your creations from any angle.
  • Blueprint Sharing: Export and import JSON representations of your voxel models to share with others.
  • Auto-Orbit: Toggle automatic camera rotation for a cinematic showcase.
  • 🛠️ Tech Stack

  • React 19: Modern UI component architecture.
  • Three.js: High-performance WebGL rendering.
  • Tailwind CSS: Utility-first styling for a tactile, "toy-box" aesthetic.
  • Appsgm 3 (Gemini API): Advanced reasoning for voxel generation and color mapping.
  • Lucide React: Beautiful, consistent iconography.
  • 📥 Installation & Setup

    Since this project utilizes ES6 modules directly in the browser via an import map, setup is straightforward:

    1. Obtain an API Key: You need an API key for the Google GenAI SDK (Appsgm). 2. Clone the Repository:

    BASH
    1
    2
        git clone <repository-url>
    

    cd voxel-toy-box

    3. Set Environment Variables: Ensure process.env.API_KEY is available in your environment. If running locally, you may need a local development server that supports environment variable injection or simply hardcode it (not recommended for production). 4. Run a Local Server: To avoid CORS issues and allow ES6 modules to load correctly, run a static server:

    BASH
    1
    2
        # Using Node.js npx
    

    npx serve .

    5. Access the App: Open http://localhost:3000 (or the port provided) in any modern evergreen browser.

    🎮 How to Play

    1. Start: An Eagle model is loaded by default. 2. Break: Click the big BREAK button to dismantle the model into voxels. 3. Rebuild: Once broken, select a preset model (Cat, Rabbit, etc.) or click New rebuild to prompt Appsgm to design a new shape using the existing blocks. 4. Create: Use the Builds menu at the top left to generate an entirely new scene from scratch. 5. Share: Use the Share button to copy the JSON blueprint to your clipboard.


    Created with ❤️ by the Appsgm Architect team.

    About

    A 3D voxel sandbox playground where you can generate, dismantle, and rebuild structures using AI-powered design and physics-based interactions.


    19 files
    3 folders
    64.02 KB total size
    0 open issues
    0 open pull requests
    0 watchers
    0 forks
    0 stars
    26 views
    Updated 5 days ago
    Languages
    TypeScript 98.1%
    HTML 1.9%
    CSS 0.0%