Loading...

Art Maker: Rapid 3D Scene Pre-Visualization

A rapid 3D scene pre-visualization tool built with Three.js for quickly prototyping and experimenting with 3D compositions, animations, and effects.

ToolCOMPLETED
Three.jsJavaScriptVite3D ToolsWebGLAnimationPre-visualization

Overview

Art Maker is a tool designed for quickly creating pre-visualizations (pre-viz) or interesting 3D scenes. The main goal is to enable artists, designers, and developers to rapidly prototype and experiment with 3D compositions, animations, and effects—without the overhead of traditional 3D software.

Key Features

  • Fast Scene Setup: Instantly create and manipulate 3D objects and scenes.
  • Animation Tools: Animate models and paths with intuitive controls.
  • Post-Processing: Apply visual effects to enhance the look of your scenes.
  • Modular Architecture: Easily extend or modify components for custom workflows.

Project Structure

art_maker/
  ├── src/
  │   ├── config/           # Constants and configuration
  │   ├── controls/         # Animation and transformation managers
  │   ├── core/             # Main ArtMaker logic
  │   ├── postprocessing/   # Visual effects management
  │   ├── scene/            # Scene setup and management
  │   ├── ui/               # User interface logic
  │   ├── style.css         # Base styles
  │   └── styles/           # Additional CSS
  ├── public/               # Static assets
  ├── index.html            # Entry point
  └── package.json          # Project metadata

How It Works

  1. Scene Management:
    The SceneManager sets up the 3D environment, including camera, lights, and objects.

  2. Controls:
    The ControlsManager and related modules allow users to move, rotate, and animate objects or cameras along paths.

  3. Animation:
    Path-based and in-place animation is handled by dedicated managers, making it easy to create dynamic scenes.

  4. Post-Processing:
    The PostProcessingManager applies effects like bloom, color grading, or depth of field to enhance visuals.

  5. UI:
    The UI module provides controls for interacting with the scene, adjusting parameters, and triggering animations.

Design & Development with Cursor’s Auto Mode

I designed this project using Cursor’s auto mode—an AI-powered coding assistant. While Cursor’s auto mode can sometimes be less sophisticated than models like Claude Max, it excels at:

  • Boilerplate Generation: Quickly scaffolding out files and modules.
  • Repetitive Tasks: Handling routine code, freeing me to focus on design.
  • Rapid Prototyping: Letting me iterate fast, even if I occasionally had to correct or refine its output.

Challenges

  • AI Limitations:
    Cursor’s auto mode sometimes misunderstood context or made “dumber” suggestions, especially with complex 3D logic or architectural decisions. I often had to guide it or manually adjust its output.
  • Manual Oversight:
    I found myself reviewing and tweaking code more than with smarter models, but the speed of initial generation was still a net positive.

Why Cursor?

Despite its quirks, Cursor’s auto mode was invaluable for getting the project off the ground quickly. It’s a great tool for:

  • Jumpstarting new ideas
  • Automating repetitive code
  • Experimenting with different approaches

Conclusion

Art Maker is a testament to the power of rapid prototyping with AI-assisted tools. While not every suggestion from Cursor’s auto mode was perfect, the combination of automation and manual refinement enabled me to build a flexible, extensible 3D pre-viz tool in record time.