1
AI Three Studio: Bringing Visual Editing to Three.js Development
What if you could work with a Three.js project the way you work with a visual 3D editor while still keeping your actual source code?
That idea led me to build AI Three Studio, a browser-based, source-aware development environment designed to bring 3D scene editing, live preview, and source code into one workspace.
🚀 Live Demo:
[https://punitpritam788.github.io/AI-Three-Studio/
](https://punitpritam788.github.io/AI-Three-Studio/)
I’d also like to thank and acknowledge @GitHub for providing the platform and hosting infrastructure that makes it possible to share and deploy this project, and @@ for providing a platform to publish and share it with the developer community.
I’m also grateful to @threejs, @WebGL, @JavaScript, and the developers, creators, and open-source communities behind modern web development tools that continue to make projects like this possible.
---
## 💡 The Motivation Behind This Project
This project started from a problem I personally experienced while developing 3D environments for my games and websites.
When working with Three.js - especially when the code is generated or heavily assisted by AI coding tools - getting the first working version can be surprisingly easy.
But then comes the next problem:
## How do you actually edit it?
You may have a working 3D scene, but simply changing the position of an object, adjusting its scale, rotating something, or changing the layout can mean going back into the code and asking an AI to modify it again.
Then you inspect it.
Something isn't quite right.
So you prompt again.
Then again.
And again.
That repetitive process was one of the biggest motivations behind this project.
I started thinking:
> Why can't I simply select the object I want and edit it visually, while the underlying code stays connected?
That question eventually became the foundation of AI Three Studio.
---
##🤖 Exploring the Idea with ChatGPT
Before building the project, I spent a lot of time researching and exploring the idea with ChatGPT.
I used ChatGPT to discuss the concept, think through possible architectures, explore development approaches, identify technical challenges, and understand what would actually be possible in a browser-based environment.
That research helped turn a rough idea into something I could start prototyping.
It wasn't about asking AI to build the entire product for me.
It was about using AI as a thinking and research partner while I experimented with the implementation myself.
---
## 🧩 The Original Idea Was Much Bigger
To be honest, my original goal wasn't specifically to build a Three.js editor.
I wanted to build something closer to an HTML / web editor that could visually edit existing websites and projects.
The idea was much broader:
Open a project → see the actual rendered page → select elements → change layout, styling, positioning, fonts, structure, and more → keep the source code synchronized.
But very quickly I realized how complicated that becomes.
A serious editor like that can't realistically be limited to one type of project.
It would need to deal with:
HTML + CSS + JavaScript + React + frameworks + dynamic DOM + external libraries + runtime state + component structures + source mapping
and much more.
That's a massive problem to solve.
So instead of trying to build everything at once, I decided to narrow the problem.
##Three.js became the starting point.
---
## 🎯 Why Three.js?
Three.js gave me a focused environment where I could explore the core idea:
##Can visual editing and source code actually stay connected?
That is what AI Three Studio is currently experimenting with.
It isn't intended to be the final answer to visual web development.
It is a prototype and a learning ground for a much bigger idea.
---
## 💡 The Problem
Three.js development can involve a constant back-and-forth workflow:
Write code → save → refresh → inspect → change code → refresh again.
That process works, but it becomes increasingly frustrating when you're building complex scenes and simply want to move an object, adjust a rotation, change a scale, or understand what's currently inside the scene.
I wanted to explore a different workflow:
What if the scene itself could become part of the development environment?
---
## 🧩 Introducing AI Three Studio
AI Three Studio is an experimental browser-based environment that combines:
🎮 3D viewport
🌳 Scene hierarchy
🎛 Object inspector
💻 Source editor
🌐 Live preview
🎯 Transform controls
⏸ Animation freezing
↩ Undo/redo
📦 Project export
The goal is simple:
## Make Three.js development more visual without abandoning code.
---
## 🎮 Edit the Live Page
One of the most interesting parts of the project is Live Page Edit.
Instead of editing only a separate copy of the scene, the studio can connect to the actual Three.js application running inside the preview.
You can select runtime objects and manipulate them using familiar 3D tools:
W - Move
E - Rotate
R - Scale
The studio communicates with the running page through an internal bridge that tracks scene objects and their transformations.
This creates a workflow much closer to a traditional visual 3D editor.
---
## ⏸ Editing Animated Scenes
Animations introduce another challenge.
Imagine trying to position an object while it is constantly rotating, moving, or following an animation loop.
AI Three Studio includes a Freeze feature that temporarily pauses animation-frame execution.
That means you can:
Freeze → Position → Transform → Resume
without fighting against the animation.
---
## 🌳 Understanding the Scene
The hierarchy panel makes it possible to inspect the objects currently present in the Three.js scene.
You can select objects, hide or show them, filter visible objects, and work with multiple selections.
For larger scenes, this provides a much easier way to understand what's actually happening in the runtime environment.
---
## 🎯 Multi-Selection & Group Editing
The editor also supports multiple selection workflows.
For example:
Shift + Click → Select multiple objects
Shift + Drag → Box selection
Ctrl + A → Select everything
And with:
## G → Group Mode
multiple selected objects can be manipulated around a shared selection center.
---
## 🧠 The Interesting Part: Source-Aware Editing
The bigger challenge isn't moving a cube.
The interesting question is:
## What happens to the source code after you move that cube?
AI Three Studio explores a source-aware workflow where runtime objects can be associated with the code that created them.
When the system can confidently identify a source relationship, visual transformations can be written back toward the original project representation.
When that relationship cannot be safely determined, the editor can fall back to runtime editing instead of pretending it knows more than it does.
This is an important design principle for tools that try to bridge visual editing and real programming.
---
## 📂 Bring Existing Projects
The studio isn't designed only for scenes created from scratch.
It includes project import workflows for:
📄 HTML files
📁 Project folders
📋 Pasted HTML/JavaScript
It can also work with linked CSS and JavaScript module structures while preparing the project for preview.
---
## 💻 Code + Visual Editing
The editor keeps the source visible rather than hiding it behind a purely visual abstraction.
You can work with:
index.html
styles.cssSOURCE CODE
↕
3D SCENE
↕
LIVE PAGE
↕
VISUAL EDITORAdd a comment
0/2000