I Built a 3D Library in Three.js and a Level Editor

Background and Context

A recent developer log shared in technical communities details the construction of a 3D asset library using Three.js, followed by the creation of a custom level editor from scratch. The developer found that no existing level editor matched the specific requirements of the project, prompting the build of a bespoke visual editing tool. This decision is not an isolated case; it reflects a growing trend in Web 3D development where, when generic engines fail to cover specialized workflows, developers are bridging the gap between creativity and implementation by building their own toolchains.

Three.js, as the most popular WebGL framework, is celebrated for its lightweight nature, flexibility, and extensive community ecosystem. However, compared to heavyweight engines like Unity and Unreal, it lacks mature visual editors and integrated toolchains. The developer’s approach thus offers a valuable reference for teams seeking efficient content production solutions within the Three.js ecosystem.

Deep Analysis

From a technical perspective, building a 3D library and equipping it with a level editor essentially addresses two core problems: asset reuse and scene orchestration. Three.js provides powerful rendering capabilities—including geometry construction, material systems, lighting models, and animation control—but it does not include any built-in scene editing interface. Developers typically write code directly to position models and adjust parameters, which becomes highly inefficient as the number of assets grows. The custom editor likely adopts a data-driven design: a graphical interface translates user actions into structured scene description data (such as JSON or a custom binary format), which Three.js then parses at runtime to reconstruct the 3D scene. This architecture decouples editing from execution, facilitating version control and team collaboration. On the frontend, given the affinity with Three.js, the editor probably uses modern frameworks like React or Vue to build UI panels, and leverages Three.js’s EditorControls or custom transform tools for object dragging, rotation, and scaling. To support complex levels, the editor must also integrate modules for asset management, a hierarchy tree, a property inspector, and undo/redo functionality—the depth of these features directly determines the editor’s usability.

Compared to the Babylon.js Editor provided officially by Babylon.js, a self-built editor offers the advantage of fully conforming to project-specific asset formats and logic rules, avoiding the redundancy and constraints of a generic tool. The downside is obvious: high development cost and the need for ongoing maintenance. The developer’s choice indicates that in specific vertical domains—such as architectural visualization, product configurators, or educational 3D applications—the return on investment for a customized editor may far exceed that of directly using a generic solution.

Industry Impact

This practice influences the competitive landscape on two levels. First, it further solidifies Three.js’s position in the lightweight Web 3D domain. While Unity and Unreal dominate the gaming and film markets with their powerful editors, Three.js remains the top choice for web scenarios requiring fast loading and cross-platform operation, thanks to its minimal bundle size and flexible customization. The emergence of custom level editors fills a critical gap in Three.js’s visual editing capabilities, enabling designers without deep technical backgrounds to participate in Web 3D content creation, thereby broadening the framework’s application boundaries.

Second, it may catalyze a wave of “micro-editor” tools or open-source projects targeting specific domains. Existing attempts within the Three.js ecosystem, such as the official Three.js Editor example or Vue 3D Editor, are often rudimentary or unmaintained. The developer’s success could inspire more sharing of editor solutions, potentially leading to pluggable, composable editor frameworks—akin to the “editor as a service” concept in game engines. For independent developers and small teams, this means gaining access to highly customized 3D content production tools at a lower cost, accelerating product iteration.

Outlook

Looking ahead, this event signals several noteworthy developments. The Three.js community may increase investment in visual toolchains, with official or third-party entities releasing more complete editor templates or SDKs to lower the barrier for building custom editors. AI-assisted content generation technologies could be integrated into such editors—for instance, using natural language commands to automatically place objects, generate terrain, or adjust lighting—further unleashing productivity.

As WebGPU gradually becomes mainstream, Three.js’s performance ceiling will rise significantly, placing higher demands on editors’ real-time preview and complex scene handling capabilities; custom editors will need to consider compatibility with next-generation graphics APIs early on. For teams venturing into Web 3D development, this case provides a clear path: first build core rendering capabilities with Three.js, then gradually develop a dedicated level editor tailored to business needs, ultimately forming a complete “engine + tool” loop. This model is not limited to 3D libraries; it can be extended to virtual showrooms, online education, digital twins, and many other fields, becoming a viable paradigm for the scaled production of Web 3D content.