Open-source project
z2586300277/three-editor avatar
z2586300277/three-editor

three-editor is a low-code scene editor that ships as a Vue and three.js package

Three.js Editor 一个基于three.js 的低代码编辑器 -- star -- 点星星

595 stars119 forksJavaScriptMulanPSL-2.0

At a glance

What is it?
three-editor is a low-code editor built on three.js and Vue 3, and its structure is unusual for an editor project: the core is published separately to npm as three-editor-cores, the application shell is a private package with a version of 0.0.0, and the documentation, the examples and the editor preview are three permanently hosted sites. The author also points at a newer, larger editor built on the same foundation.
Who is it for?
Adopt three-editor if you need a browser-based way to assemble three.js scenes without writing the scene graph by hand, since the editor and the core are published and the examples show the target output. Skip it if you need a documented, tested production tool, because the package is private with a placeholder version, there are no releases, and the author says the newer editor is where the effort is going.
Can I use it commercially?
Check first. The repository uses a licence we do not classify automatically, so read its LICENSE file before any commercial use.
Is it still maintained?
Yes. The repository last received commits 71 days ago.
What is it written in?
Mainly JavaScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on October 23, 2026, and from our analysis. They are not legal advice.

Editorial analysis

Two editors, and the author points you at the newer one

The project describes itself as a digital twin low-code configuration editor built on three.js, and the very first thing the documentation does is point you somewhere else.

It lists a newer and more powerful editor address, at a threejs-editor path rather than the three-editor one, and calls it the new generation. The editor preview, the editor examples and the editor documentation are three separate permanent links at the three-editor path.

That ordering tells you something about the state of the project. There is a working editor with a live preview, a gallery of examples and a documentation site, and there is a successor that the author considers better. Both exist, both are hosted, and the documentation leads with the newer one.

The author also says where the effort is going. The follow-up author will put most of their spare time into open source examples in the three-cesium-examples repository, and there is a separate repository of native Three.js and Cesium.js cases.

The positioning in search results is stated as well. Searching for the three editor, three.js editor or three js editor keywords in Baidu puts this one first, and the project asks for stars.

So the honest reading is that this is a personal open source project with a large audience, a published core library, and an active successor being built alongside the version you can use today. The licence is MulanPSL-2.0, the primary language is JavaScript, the default branch is dev, and the last push was on 2026-08-14 with no GitHub releases.

The core is a separate npm package, and the app is private

The package file is where the architecture of this project becomes clear, and it is unusual.

The root package is named three-editor-ui, it is marked private, and its version is 0.0.0. That combination means the application shell is not published to a registry at all, and the version number is a placeholder rather than a release number.

The interesting entry is three-editor-cores at version 1.1.6 in the dependencies. That is the actual engine, it is a real published package with a version line, and the documentation links to an npm page for it and to a GitHub repository holding the v1.0.0 source, described as permanently open source.

So the split is: the reusable engine ships, and the application that demonstrates it is built from the repository.

The dependency list also tells you the stack. Vue at 3.5.18 with vue-router and Element Plus at 2.10.7 with its icon package, which is the panel library for the editor chrome. CodeMirror 6 with the JavaScript language support and the One Dark theme, wired in through vue-codemirror, so the editor has a real code view rather than a textarea. jszip for packaging, and less with less-loader for the stylesheets.

The topic tags list datgui and gsap as well as threejs and vue3, which are the two libraries associated with the classic three.js example ecosystem, so the renderer side is likely to involve both.

The build tool is Vite at 5.4.19 with the Vue plugin, and the documentation site is VitePress at 1.6.4, with three scripts for it: docs:dev, docs:build and docs:preview.

The source layout tells you what the editor does

The directory convention is documented directly, and it is the clearest description of the project.

The root directory is src for development, dist for the packaged output, docs for documentation, public for files, and vite.config.js for the configuration.

Inside src there are four directories. codeMirror holds the online code editor, example holds the example pages, codes holds the example instances, and editor holds the editor page.

That is a small, legible structure. The editor page is one directory, the examples are data and pages kept apart, and the CodeMirror integration is isolated in its own place.

There is one configuration detail that matters if you want to use your own assets, and it is stated precisely. If you want to connect your own local resources, the directory structure needs to match the public/files/ directory structure, and you configure it in editor/config.js.

That is a constraint worth understanding rather than discovering. The editor loads resources from a fixed layout, so a scene that references your own models, textures or data has to present them in the same shape the public/files directory uses. It is the kind of coupling that a low-code editor has to have somewhere, and here it is in the configuration file rather than hidden in the loader.

The npm scripts are the standard Vite set with the documentation ones added. start, dev and serve all run vite, build runs vite build, and preview runs vite preview.

The repository also carries a dist/ directory at the top level and an index.html, which is the shape of a project where the built output is committed, which is what lets the GitHub Pages preview of the built site work.

What a low-code scene editor is for, and what the docs do not cover

The project labels itself in three ways, and the combination is the useful part: digital twin, low-code, and configuration editor.

A configuration editor is the industry term for a tool that produces the layout and configuration of an industrial or monitoring screen, and the three.js version of that is a scene graph you assemble visually rather than in code. The digital twin framing places it in the world of monitoring systems, where a plant or a building has a live 3D model and the operator clicks equipment to see its state.

That use explains the CodeMirror dependency and the element-plus panels. You place and configure objects, you script behaviour, and you see the result in a 3D viewport. The examples directory exists to show that range, and the three-cesium-examples repository pushes it further by adding Cesium, which is how a globe-scale digital twin gets its basemap.

What the documentation here does not cover is worth noting too. There is no mention of a test suite, no CI configuration in the visible files, and no release history, with the project having no GitHub releases. The GitHub Actions directory is present in the tree but the workflows are not described.

For an editor whose output is a scene graph, the absence of documented tests is a meaningful gap. The engine is published separately with its own repository and its own version, which is where a test suite would most plausibly live, but that is not stated.

The other limitation to weigh is the split between the current editor and the newer generation. If you are starting a project now, the documentation's own advice is to use the newer address, and that means the one with less history of published releases behind it.

A personal project with a large audience and an unusual support model

The contact section is unlike most open source documentation, and it tells you the scale of the project.

There is a QQ account, a WeChat account and a QQ group, with the identifiers given in a table. The stated purpose is part-time technical help, hiring needs, cooperation and open source sharing, with the note that other questions should not be asked because time is precious.

That is a very direct statement of what a maintainer can offer, and it is more honest than a generic contribute section. The corollary is that this is a one-person project with a large following rather than a team with a support process, and the language, the presence of a QQ group and the Baidu search result all point to a Chinese developer audience as the primary community.

The support options follow the same pattern. There is a Ko-fi link, a PayPal link, an AliPay link, a WeChat Pay link and a GitHub Sponsors link, which is an unusual number of payment processors for a project of this size and suggests the project has funding from more than one region.

The download options are three and they point in different directions. The source is mirrored on a domestic high-speed download service, the core package is on npm, and the core source is on GitHub as permanently open source.

The Node requirement is stated with an update note. Node 18 or later, and as of 2024-09-10 all the current project dependencies were updated to the latest versions using Node 20.9.0 with pnpm.

That last detail is worth flagging for anyone picking this up now. The dependency refresh recorded in the documentation is from September 2024, and the last push to the repository was in August 2026, so the state of the dependency tree relative to that note is something to check in the lockfile rather than assume.

Editorial conclusion

Adopt three-editor if you need a browser-based way to assemble three.js scenes without writing the scene graph by hand, since the editor and the core are published and the examples show the target output. Skip it if you need a documented, tested production tool, because the package is private with a placeholder version, there are no releases, and the author says the newer editor is where the effort is going. Verify first which of the two editor addresses you are targeting, since the project lists a newer generation alongside the current one, that you are on Node 18 or newer with pnpm, and how your own resources are laid out, because connecting local assets requires the directory structure to match public/files exactly.

Frequently asked questions

What is three-editor and what is it built on?

It is a low-code configuration editor for three.js scenes, described as a digital twin editor, with a tree editor, a code view and a 3D preview. The stack is Vue 3.5 with vue-router, Element Plus for the panels, CodeMirror 6 with the One Dark theme for script editing, three-editor-cores 1.1.6 as the engine, and Vite for the build with VitePress for the documentation site.

How is three-editor structured and how do I add my own assets?

The root holds src for development, dist for the packaged output, docs for documentation and public for files, with vite.config.js at the root. Inside src there are codeMirror for the online code editor, example for the example pages, codes for the example instances and editor for the editor page. To connect your own local resources the directory structure must match the public/files directory structure, and you configure it in editor/config.js.

Is the three-editor core published separately from the application?

Yes. The engine is the three-editor-cores package at version 1.1.6, published to npm, with its v1.0.0 source in a separate GitHub repository described as permanently open source. The application shell at the root is a private package named three-editor-ui with a placeholder version of 0.0.0, so the root repository builds the demo rather than shipping a released application.

Official sources

  1. Issues
  2. License: MulanPSL-2.0
  3. Project website
  4. README
  5. z2586300277/three-editor on GitHub
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/z2586300277-three-editor.svg)](https://hysenlabs.com/projects/z2586300277-three-editor)

Was this useful?