For years, web developers building high-fidelity 3D environments in the browser have faced a persistent bottleneck: the reliance on heavy, external mesh files. Manually adjusting coordinates or optimizing complex assets often leads to bloated load times and rigid, difficult-to-edit scenes. A new approach is shifting this paradigm by moving away from static imports toward a procedural modeling environment driven by code.
Procedural Modeling via GitHub Copilot
The RePolis project, leveraging the Three.js Object Sculptor plugin, automates the object sculpting process directly within the browser. Built upon the work of developer Vinh Hiển, this tool integrates with GitHub Copilot to streamline the workflow of image analysis, structural decomposition, and step-by-step assembly. Rather than acting as a simple file converter, the plugin manages the entire lifecycle of a 3D object, from automated specification generation to visual verification.
The power of this approach is best illustrated by the RePolis World Tree implementation. The structure was generated entirely through code, comprising 15 macro branches, 56 secondary branches, 112 fine branches, and 3,016 instanced leaf elements. By utilizing a deterministic seed value of 20260711, the developers successfully rendered a complex, high-density structure without importing a single external mesh file. This transition marks a fundamental change in 3D grammar, moving from static file-based assets to real-time, code-defined geometry.
Sculpt DNA and Coverage Curator Mechanisms
To maintain control over the generative process, the development team introduced two critical mechanisms: Sculpt DNA and Coverage Curator. Sculpt DNA acts as a structural constraint system, limiting parameters like ratio, material, palette, and density to ensure the integrity of the object. It preserves structural invariants such as component IDs, parent links, attachment roots, sockets, and colliders, preventing the model from collapsing into incoherent geometry during the generation phase.
Complementing this, the Coverage Curator manages the creative output by filtering potential designs. Instead of overwhelming the developer with random results, it generates 24 safe candidates and extracts three distinct intermediate concepts. In the case of the World Tree, the system produced Golden Canopy, Solar Archive, and Aurora Index. The team selected Solar Archive, applying manual art direction and optimization to finalize the asset for the live environment. This hybrid approach—combining automated exploration with human-led refinement—allows developers to overcome the traditional limitations of browser-based 3D graphics.
Implementation and Usage
Developers looking to integrate this procedural workflow can install the plugin locally. The setup process requires cloning the repository and configuring the plugin manifest to enable the sculpting interface within the development environment.
mkdir -p ~/plugins
git clone REPOSITORY_URL ~/plugins/threejs-object-sculptorOnce cloned, the plugin is registered via the local configuration file:
{
"name": "threejs-object-sculptor",
"source": {
"source": "local",
"path": "./plugins/threejs-object-sculptor"
},
"policy": {
"installation": "AVAILABLE",
"authentication": "ON_INSTALL"
},
"category": "Productivity"
}
For those interested in exploring the capabilities of this system, the interactive demo and the full RePolis project provide a clear look at how code-driven geometry performs in a live web environment. By defining 3D structures as code, developers are establishing a new, more efficient standard for high-performance web graphics.
This shift toward procedural, code-first 3D modeling effectively eliminates the overhead of external assets, paving the way for more dynamic and scalable web-based 3D experiences.
