# minemotion/nexel3d architecture

> Architecture diagram of the GitHub repository minemotion/nexel3d, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/minemotion/nexel3d
- Repository: https://github.com/minemotion/nexel3d

## Overview

#### Purpose and Entry Points
This repository appears to implement a browser-based 3D scene editor, with project selection, scene editing, object manipulation, materials, animation, rigging, and rendering.

Primary HTML entry points:
- `index.html` — main editor shell, bootstrapped by `index.js`
- `projects.html` — project-oriented view, bootstrapped by `projects.js`
- `rigTest.html` and `tester.html` — specialized/manual test pages

#### Application Bootstrap and UI Shell
The main application likely initializes shared editor state, UI panels, and runtime systems from:
- `index.js`
- `interface.js`
- `styles.css`

UI-specific subsystems are separated by editor concern: hierarchy/outliner, themes, translations, and icon assets. This suggests a modular desktop-editor-style interface rather than a server-rendered application.
- `outliner.js`
- `themes.js`
- `translations.json`

#### Scene and Rendering Boundary
Scene representation and viewport presentation are distinct from rendering implementation:
- `scene.js`
- `sceneView.js`
- `renderEngine.js`

`scene.js` is the likely authoritative scene/object model. `sceneView.js` likely adapts that model to an interactive viewport, while `renderEngine.js` owns graphics rendering. This boundary is central: editing systems mutate scene state, then the viewport/render engine reflects those changes.

#### Object Selection and Transform Editing
Interactive object editing is organized into separate selection, transform-state, and transform-control layers:
- `selectionSystem.js`
- `transform.js`
- `transformControls.js`

The expected control flow is user input → selection update → transform control interaction → scene object mutation → viewport refresh. Keeping transform math/state separate from controls permits actions, undo/redo, and other editor modes to reuse the same object-editing operations.

#### Editor Modes, Actions, and History
Commands and mode-specific behavior are isolated from base scene management:
- `actions.js`
- `editMode.js`
- `undoRedoManager.js`

`actions.js` likely provides high-level editor commands. `editMode.js` supplies alternate interaction semantics for editing object structure or components. `undoRedoManager.js` is the transaction/history boundary and should capture scene-changing actions rather than raw UI events.

#### Asset, Import, and Material Pipeline
The repository includes local model and texture assets plus modules responsible for bringing them into scenes and assigning visual properties:
- `import.js`
- `material.js`
- `assets/Models/suzanne.obj`
- `assets/Textures/waterPBR.mp4`

Assets are browser-served static resources. Import and material handling form the bridge between external files/media and renderer-specific scene resources. Model fixtures such as `assets/Models/bone.obj` and `assets/Models/camera.obj` also support rigging or scene-object workflows.

#### Animation and Rigging Systems
Animation and skeletal/rig workflows are represented as dedicated systems rather than extensions of generic transforms:
- `animate.js`
- `animationSystem.js`
- `rigging.js`

This likely establishes a pipeline where rig definitions/control structures drive animated transforms over time, with the animation system applying evaluated values to scene entities before rendering. The specialized `rigTest.html` indicates rigging is a meaningful runtime capability.

#### Persistence and Project Scope
Project-level behavior and reusable module/state storage are separated from the live editor:
- `projects.js`
- `moduleStorage.js`
- `projects.html`

`moduleStorage.js` is likely the persistence or in-memory storage abstraction used to retain project/editor data. The application appears fully client-side: no backend, API client, database, or deployment infrastructure is represented in the repository tree. Browser runtime dependencies are implied by JavaScript, HTML, CSS, static assets, and `manifest.json`.

Main entry points: [`scene.js`](https://github.com/minemotion/nexel3d/blob/main/scene.js) (Scene model), [`transform.js`](https://github.com/minemotion/nexel3d/blob/main/transform.js) (Transform operations), [`index.js`](https://github.com/minemotion/nexel3d/blob/main/index.js) (Editor bootstrap), [`projects.js`](https://github.com/minemotion/nexel3d/blob/main/projects.js) (Project manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor Shell"]
  node_main_page["Main editor page<br/>HTML entry<br/>[index.html]"]
  node_main_bootstrap["Editor bootstrap<br/>browser module<br/>[index.js]"]
  node_ui_shell["Editor UI<br/>UI shell<br/>[interface.js]"]
  node_outliner["Outliner<br/>UI subsystem<br/>[outliner.js]"]
end

subgraph group_runtime["Scene Runtime"]
  node_scene[("Scene model<br/>scene state<br/>[scene.js]")]
  node_scene_view["Viewport adapter<br/>[sceneView.js]"]
  node_renderer["Render engine<br/>graphics runtime<br/>[renderEngine.js]"]
  node_selection["Selection system<br/>interaction state<br/>[selectionSystem.js]"]
  node_transform_state["Transform operations<br/>transform state<br/>[transform.js]"]
  node_transform_controls["Transform controls<br/>interaction controls"]
  node_actions["Editor actions<br/>command layer<br/>[actions.js]"]
  node_history["Undo/redo manager<br/>history<br/>[undoRedoManager.js]"]
end

subgraph group_workflows["Content Workflows"]
  node_importer["Asset import<br/>import pipeline<br/>[import.js]"]
  node_materials["Material system<br/>material pipeline<br/>[material.js]"]
  node_assets["Static models and media<br/>browser assets<br/>[suzanne.obj]"]
  node_rigging["Rigging<br/>rig system<br/>[rigging.js]"]
  node_animation["Animation system<br/>animation runtime<br/>[animationSystem.js]"]
end

subgraph group_projects["Projects"]
  node_project_page["Projects page<br/>HTML entry<br/>[projects.html]"]
  node_projects_app["Project manager<br/>browser module<br/>[projects.js]"]
  node_storage[("Module storage<br/>client persistence<br/>[moduleStorage.js]")]
end

node_main_page -->|"boots"| node_main_bootstrap
node_main_bootstrap -->|"initializes"| node_ui_shell
node_main_bootstrap -->|"initializes"| node_scene
node_ui_shell -->|"hosts"| node_outliner
node_outliner -->|"selects objects"| node_selection
node_selection -->|"targets"| node_transform_controls
node_transform_controls -->|"edits"| node_transform_state
node_transform_state -->|"mutates objects"| node_scene
node_actions -->|"reuses"| node_transform_state
node_actions -->|"records"| node_history
node_scene -->|"presents"| node_scene_view
node_scene_view -->|"renders through"| node_renderer
node_importer -->|"loads"| node_assets
node_importer -->|"adds objects"| node_scene
node_materials -->|"uses media"| node_assets
node_materials -->|"assigns appearance"| node_scene
node_rigging -->|"defines controls"| node_scene
node_rigging -->|"drives"| node_animation
node_animation -->|"applies evaluated transforms"| node_transform_state
node_project_page -->|"boots"| node_projects_app
node_projects_app -->|"persists projects"| node_storage
node_projects_app -.->|"loads editor state"| node_scene

click node_main_page "https://github.com/minemotion/nexel3d/blob/main/index.html"
click node_main_bootstrap "https://github.com/minemotion/nexel3d/blob/main/index.js"
click node_ui_shell "https://github.com/minemotion/nexel3d/blob/main/interface.js"
click node_outliner "https://github.com/minemotion/nexel3d/blob/main/outliner.js"
click node_scene "https://github.com/minemotion/nexel3d/blob/main/scene.js"
click node_scene_view "https://github.com/minemotion/nexel3d/blob/main/sceneView.js"
click node_renderer "https://github.com/minemotion/nexel3d/blob/main/renderEngine.js"
click node_selection "https://github.com/minemotion/nexel3d/blob/main/selectionSystem.js"
click node_transform_state "https://github.com/minemotion/nexel3d/blob/main/transform.js"
click node_transform_controls "https://github.com/minemotion/nexel3d/blob/main/transformControls.js"
click node_actions "https://github.com/minemotion/nexel3d/blob/main/actions.js"
click node_history "https://github.com/minemotion/nexel3d/blob/main/undoRedoManager.js"
click node_importer "https://github.com/minemotion/nexel3d/blob/main/import.js"
click node_materials "https://github.com/minemotion/nexel3d/blob/main/material.js"
click node_assets "https://github.com/minemotion/nexel3d/blob/main/assets/Models/suzanne.obj"
click node_rigging "https://github.com/minemotion/nexel3d/blob/main/rigging.js"
click node_animation "https://github.com/minemotion/nexel3d/blob/main/animationSystem.js"
click node_project_page "https://github.com/minemotion/nexel3d/blob/main/projects.html"
click node_projects_app "https://github.com/minemotion/nexel3d/blob/main/projects.js"
click node_storage "https://github.com/minemotion/nexel3d/blob/main/moduleStorage.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main_page,node_main_bootstrap,node_ui_shell,node_outliner toneBlue
class node_scene,node_scene_view,node_renderer,node_selection,node_transform_state,node_transform_controls,node_actions,node_history toneAmber
class node_importer,node_materials,node_assets,node_rigging,node_animation toneMint
class node_project_page,node_projects_app,node_storage toneRose
```

## Components

### Editor Shell

- [Main editor page](https://github.com/minemotion/nexel3d/blob/main/index.html): HTML entry · `index.html`
- [Editor bootstrap](https://github.com/minemotion/nexel3d/blob/main/index.js): browser module · `index.js`
- [Editor UI](https://github.com/minemotion/nexel3d/blob/main/interface.js): UI shell · Panels and shared editor interface. · `interface.js`
- [Outliner](https://github.com/minemotion/nexel3d/blob/main/outliner.js): UI subsystem · `outliner.js`

### Scene Runtime

- [Scene model](https://github.com/minemotion/nexel3d/blob/main/scene.js): scene state · Authoritative scene and object state. · `scene.js`
- [Viewport adapter](https://github.com/minemotion/nexel3d/blob/main/sceneView.js): viewport · `sceneView.js`
- [Render engine](https://github.com/minemotion/nexel3d/blob/main/renderEngine.js): graphics runtime · `renderEngine.js`
- [Selection system](https://github.com/minemotion/nexel3d/blob/main/selectionSystem.js): interaction state · `selectionSystem.js`
- [Transform operations](https://github.com/minemotion/nexel3d/blob/main/transform.js): transform state · `transform.js`
- [Transform controls](https://github.com/minemotion/nexel3d/blob/main/transformControls.js): interaction controls · `transformControls.js`
- [Editor actions](https://github.com/minemotion/nexel3d/blob/main/actions.js): command layer · `actions.js`
- [Undo/redo manager](https://github.com/minemotion/nexel3d/blob/main/undoRedoManager.js): history · Records scene-changing commands. · `undoRedoManager.js`

### Content Workflows

- [Asset import](https://github.com/minemotion/nexel3d/blob/main/import.js): import pipeline · `import.js`
- [Material system](https://github.com/minemotion/nexel3d/blob/main/material.js): material pipeline · `material.js`
- [Static models and media](https://github.com/minemotion/nexel3d/blob/main/assets/Models/suzanne.obj): browser assets · `assets/Models/suzanne.obj`
- [Rigging](https://github.com/minemotion/nexel3d/blob/main/rigging.js): rig system · `rigging.js`
- [Animation system](https://github.com/minemotion/nexel3d/blob/main/animationSystem.js): animation runtime · `animationSystem.js`

### Projects

- [Projects page](https://github.com/minemotion/nexel3d/blob/main/projects.html): HTML entry · `projects.html`
- [Project manager](https://github.com/minemotion/nexel3d/blob/main/projects.js): browser module · `projects.js`
- [Module storage](https://github.com/minemotion/nexel3d/blob/main/moduleStorage.js): client persistence · `moduleStorage.js`

## Connections

- Main editor page → Editor bootstrap: boots
- Editor bootstrap → Editor UI: initializes
- Editor bootstrap → Scene model: initializes
- Editor UI → Outliner: hosts
- Outliner → Selection system: selects objects
- Selection system → Transform controls: targets
- Transform controls → Transform operations: edits
- Transform operations → Scene model: mutates objects
- Editor actions → Transform operations: reuses
- Editor actions → Undo/redo manager: records
- Scene model → Viewport adapter: presents
- Viewport adapter → Render engine: renders through
- Asset import → Static models and media: loads
- Asset import → Scene model: adds objects
- Material system → Static models and media: uses media
- Material system → Scene model: assigns appearance
- Rigging → Scene model: defines controls
- Rigging → Animation system: drives
- Animation system → Transform operations: applies evaluated transforms
- Projects page → Project manager: boots
- Project manager → Module storage: persists projects
- Project manager → Scene model: loads editor state