To clarify, this isn’t advice, it’s more of a fair warning or a friendly disclaimer.
Building an editor is a much bigger task than most beginners and intermediate developers expect. Features like scene hierarchy, graphics, math, UI/UX design, undo/redo, precise object manipulation, and handling reactivity with many moving parts can quickly become overwhelmingly complex.
You’ll often end up rebuilding systems that existing editors have already solved. Copy-pasting code won’t cut it, you need a deep understanding of how everything fits together. The sheer size of the project can be discouraging, with no instant gratification and slow to show “cool results”. Which leads many people to quit before it’s finished.
That said, this isn’t meant to stop anyone from starting an editor project. It depends on your goals and personality. If you’re naturally curious, persistent, and enjoy big challenges, it can be a great learning experience. But for most people, starting with smaller projects, like interactive scenes, simple games, or particle systems… Will deliver quicker and more rewarding feedback.
Now, about your main question: Should you extend the three.js editor or start from scratch?
I’d recommend starting from scratch using a modern JS framework like Solid, Vue, Svelte, or React. The official three.js editor is built with plain JS, which is great for performance but not so much for extensibility. Using a framework lets you leverage built-in reactivity and UI/UX features, so you’re not reinventing the wheel. It also gives you a consistent coding architecture and connects you with an active community.
What’s the best framework? For three.js, React is the most popular. With r3f, you’ll find plenty of open-source implementations, and you might not need to start from scratch since there are already several three.js React editors you can adapt to your needs. Plus, you’ll have access to a wide range of essential plugins, like form generators, state managers, and database APIs, which can save you a lot of time.