AI Three Studio

🎮 Build. Edit. Inspect. Sync.

AI Three Studio is a browser-based, source-aware 3D development environment for Three.js that brings visual editing and source code together.

Instead of constantly switching between your code editor and browser, AI Three Studio lets you open a project, see the 3D scene, edit objects visually, inspect the hierarchy, modify the live page, and synchronize changes back to source code — all in one workspace.

🌐 Try It Now

👉 Launch AI Three Studio

No installation required. Open it in your browser and start experimenting with Three.js projects.

✨ Why AI Three Studio?

Working with Three.js often means jumping between:

Code Editor
     ↓
Browser
     ↓
Inspect the Scene
     ↓
Change Code
     ↓
Reload
     ↓
Repeat...

AI Three Studio aims to turn that workflow into:

                 ┌─────────────────┐
                 │   Source Code   │
                 └────────┬────────┘
                          ↕
                 ┌─────────────────┐
                 │ AI Three Studio │
                 └───────┬─────────┘
                         ↕
      ┌──────────────────┼──────────────────┐
      ↓                  ↓                  ↓
   3D Scene          Live Page          Inspector

Edit visually without abandoning the source.

🚀 Features

🎮 Live Page Editing

Edit the actual running Three.js page directly inside the studio.

Select an object in the live preview and manipulate it with transform controls:

↕ Move
⟳ Rotate
⤢ Scale

Transformations can be synchronized back toward the project's source representation.

🌳 Scene Hierarchy

Inspect your scene through a dedicated hierarchy panel.

You can:

Select objects
Multi-select objects
Hide/show objects
Filter to visible objects
Select objects directly from the hierarchy
Synchronize selection with the viewport

🎯 Powerful Object Selection

Multiple selection workflows are supported:

Click              → Select
Shift + Click      → Multi-select
Shift + Drag       → Box select
Ctrl + A           → Select all
Esc                → Deselect

🧩 Group Editing

Enable Group Mode and manipulate multiple objects around a shared selection center.

G → Group Mode

Useful for arranging complete object sets without manually editing every object.

⏸ Freeze Animations

Editing animated scenes can be frustrating.

AI Three Studio includes:

`⏸ Freeze`

Pause animation-frame execution so moving objects can be positioned while they are temporarily held still.

Then simply resume the animation when you're finished.

📂 Import Existing Projects

Bring your existing Three.js experiments into the studio.

Supported workflows include:

📄 HTML File
📁 Project Folder
📋 Paste Code

The project can process linked CSS and JavaScript module relationships while preparing the project for preview and editing.

💻 Built-In Code Editor

Edit project source directly inside the application.

The workspace provides separate editing areas for:

index.html
styles.css

Make a source change → run the project → inspect the result.

🧠 Source-Aware Editing

One of the project's core ideas is that visual editing shouldn't have to mean throwing away your source code.

AI Three Studio attempts to connect runtime Three.js objects with their source representations so transformations can be reflected back into the project when a reliable binding can be established.

When a source mapping cannot be confidently determined, the system can fall back to runtime editing instead of making an unsafe source modification.

🔍 Multiple Preview Modes

The integrated preview supports different ways of viewing your project:

Mode	Purpose
🌐 Web	Normal website preview
🎮 Edit	Live object editing
📐 2D	2D view
⬇ Top	Top-down view

The preview also includes zoom, refresh, expand, and pop-out controls.

🛠️ Editor Workspace

┌──────────────────────────────────────────────────────────────┐
│                     ⚡ AI Three Studio                       │
├──────────────┬──────────────────────────────┬────────────────┤
│              │                              │                │
│ 📁 Files     │                              │ 🎛 Inspector   │
│ 🌳 Hierarchy │          🎮 3D VIEW          │                │
│ 🖥 Console   │                              │ 🌐 Preview      │
│              │                              │                │
├──────────────┴──────────────────────────────┴────────────────┤
│                    💻 Source Editor                          │
│                       HTML / CSS                             │
└──────────────────────────────────────────────────────────────┘

⌨️ Keyboard Shortcuts

Shortcut	Action
`W`	Move
`E`	Rotate
`R`	Scale
`G`	Group Mode
`F`	Focus Object
`Shift + Click`	Multi-select
`Shift + Drag`	Box Select
`Ctrl + A`	Select All
`Esc`	Deselect
`Ctrl + Z`	Undo
`Ctrl + Y`	Redo
`C`	Copy
`V`	Paste
`D`	Duplicate
`Delete`	Delete
`Shift + A`	Add Object
`Ctrl + Enter`	Run
`Ctrl + S`	Save
`Ctrl + O`	Import
`Ctrl + Shift + E`	Export
`Ctrl + P`	Expand Preview
`Home`	Reset View
`Ctrl + ?`	Guide

📦 Export

When your scene is ready, export it directly from the studio.

Two export modes

📄 Original Code

Preserve the project's existing source structure.

🔧 Regenerated

Generate output based on the scene representation.

Export formats

📄 Single HTML
📦 ZIP Project

🔄 Three.js Version Management

AI Three Studio uses a centralized Three.js version configuration.

The built-in version manager allows you to change the configured Three.js version without manually updating every Three.js URL used throughout the studio.

The current implementation is pinned to:

Three.js 0.160.0

🧱 Tech Stack

AI Three Studio is built with browser-native technologies and Three.js tooling.

HTML5
CSS3
JavaScript
Three.js
OrbitControls
TransformControls
Monaco Editor
Acorn
JSZip
Browser File APIs

🧠 Architecture

The project is organized around several major systems:

1. Studio Editor

Handles the scene, hierarchy, selection, transforms, inspector, undo/redo, and editor interactions.

2. Source Editor

Provides editable project source for HTML and CSS.

3. Preview Runtime

Runs the imported or generated project inside the browser preview.

4. A3S Bridge

A communication layer between the studio and the live Three.js runtime.

It can:

Detect the active Three.js scene
Track runtime objects
Assign stable runtime IDs
Detect object transformations
Synchronize selection
Control visibility
Freeze/resume animation behavior

5. Source Binding

The source-analysis system attempts to identify Three.js objects and transformation expressions so that runtime edits can be connected to source code.

⚠️ Current Status

AI Three Studio is an evolving project.

Complex Three.js applications can use highly dynamic code patterns, custom abstractions, generated objects, external modules, or runtime behavior that cannot always be mapped cleanly back to source.

The project therefore uses a hybrid approach:

Reliable source mapping
        ↓
Source-aware edit

No reliable mapping
        ↓
Runtime-only edit

The goal is to make visual editing powerful without pretending every arbitrary JavaScript program can always be safely rewritten.

🔮 Vision

AI Three Studio is more than a visual scene editor.

The long-term idea is to create a source-aware visual development environment where:

CODE
 ↕
SCENE
 ↕
LIVE PAGE
 ↕
SOURCE

all remain connected.

The goal:

Make Three.js development feel as visual as a 3D editor, while keeping the power and flexibility of real code.

📸 Screenshots

Add screenshots here when available:

![AI Three Studio](screenshots/editor.png)
![Live Page Editing](screenshots/live-edit.png)
![Hierarchy](screenshots/hierarchy.png)

🚀 Getting Started

You can use the hosted version immediately:

⚡ Open AI Three Studio

Or clone the repository:

git clone https://github.com/punitpritam788/AI-Three-Studio.git
cd AI-Three-Studio

Then open the project in a modern browser or serve it through a local web server.

🤝 Contributing

Ideas, improvements, bug reports, and experiments are welcome.

AI Three Studio is being developed as an exploration of what a browser-native, source-aware Three.js editor can become.

⭐ Support the Project

If you find the project interesting, consider giving it a ⭐ on GitHub.

🔗 Links

🚀 Live Demo: https://punitpritam788.github.io/AI-Three-Studio/

💻 GitHub: https://github.com/punitpritam788/AI-Three-Studio

⚡ AI Three Studio

Code it. See it. Edit it. Sync it.

Name		Name	Last commit message	Last commit date
README.md		README.md
index.html		index.html

Latest commit

History

Folders and files

Repository files navigation