# redwan786/houses-from-outside architecture

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

- Interactive diagram: https://gitdiagram.com/redwan786/houses-from-outside
- Repository: https://github.com/redwan786/houses-from-outside

## Overview

This is a browser-based Three.js architectural scene: users navigate a five-storey building and cottage, inspect changing materials, and control lighting, seasons, wind, and snapshots. The runtime entry point assembles textures, lighting, environment, house models, controls, and HUD, then renders the scene. The graph preserves those distinct scene domains and the shader/material layer. Wiring is based on the README and sampled excerpts; unsampled render-loop and setup details are represented only where documented.

Main entry points: [`js/main.js`](https://github.com/redwan786/houses-from-outside/blob/master/js/main.js) (Scene entry), [`js/materials.js`](https://github.com/redwan786/houses-from-outside/blob/master/js/materials.js) (Shader materials), [`js/lighting.js`](https://github.com/redwan786/houses-from-outside/blob/master/js/lighting.js) (Lighting rig), [`js/cottage.js`](https://github.com/redwan786/houses-from-outside/blob/master/js/cottage.js) (Gabled cottage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Scene runtime"]
  node_page["Page shell<br/>[index.html]"]
  node_main["Scene entry<br/>[main.js]"]
end

subgraph group_world["Scene domains"]
  node_building["Five-storey building<br/>[building.js]"]
  node_cottage["Gabled cottage<br/>[cottage.js]"]
  node_environment["Scene environment<br/>[environment.js]"]
  node_lighting["Lighting rig<br/>[lighting.js]"]
end

subgraph group_rendering["Rendering resources"]
  node_textures["Texture library<br/>[textures.js]"]
  node_materials["Shader materials<br/>[materials.js]"]
  node_shaders["GLSL programs<br/>[shaders.js]"]
  node_textureassets["Texture images"]
end

subgraph group_interaction["User interaction"]
  node_controls["Camera controls<br/>[controls.js]"]
  node_hud["HUD<br/>[hud.js]"]
end

node_user(("Viewer"))

node_user -->|"opens scene"| node_page
node_page -->|"loads module"| node_main
node_user -->|"navigates camera"| node_controls
node_user -->|"clicks cottage"| node_main
node_user -->|"uses overlay"| node_hud
node_main -->|"creates and updates"| node_controls
node_main -->|"creates and updates"| node_hud
node_hud -->|"dispatches actions"| node_main
node_main -->|"loads textures"| node_textures
node_textures -->|"loads images"| node_textureassets
node_main -->|"creates rig"| node_lighting
node_main -->|"builds scene"| node_environment
node_main -->|"builds model"| node_building
node_main -->|"builds model"| node_cottage
node_main -->|"updates skin"| node_cottage
node_main -->|"sets season and wind"| node_environment
node_main -->|"controls time and shadows"| node_lighting
node_building -->|"creates facade materials"| node_materials
node_cottage -->|"creates cottage materials"| node_materials
node_cottage -->|"creates smoke material"| node_materials
node_environment -->|"creates foliage and glow"| node_materials
node_materials -->|"uses GLSL"| node_shaders
node_textures -->|"supplies maps"| node_materials
node_lighting -->|"shares light uniforms"| node_environment
node_lighting -->|"shares light uniforms"| node_building
node_lighting -->|"shares light uniforms"| node_cottage

click node_page "https://github.com/redwan786/houses-from-outside/blob/master/index.html"
click node_main "https://github.com/redwan786/houses-from-outside/blob/master/js/main.js"
click node_controls "https://github.com/redwan786/houses-from-outside/blob/master/js/controls.js"
click node_hud "https://github.com/redwan786/houses-from-outside/blob/master/js/hud.js"
click node_building "https://github.com/redwan786/houses-from-outside/blob/master/js/building.js"
click node_cottage "https://github.com/redwan786/houses-from-outside/blob/master/js/cottage.js"
click node_environment "https://github.com/redwan786/houses-from-outside/blob/master/js/environment.js"
click node_lighting "https://github.com/redwan786/houses-from-outside/blob/master/js/lighting.js"
click node_textures "https://github.com/redwan786/houses-from-outside/blob/master/js/textures.js"
click node_materials "https://github.com/redwan786/houses-from-outside/blob/master/js/materials.js"
click node_shaders "https://github.com/redwan786/houses-from-outside/blob/master/js/shaders.js"
click node_textureassets "https://github.com/redwan786/houses-from-outside/tree/master/assets/textures"

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_page,node_main,node_user toneBlue
class node_building,node_cottage,node_environment,node_lighting toneAmber
class node_textures,node_materials,node_shaders,node_textureassets toneMint
class node_controls,node_hud toneRose
```

## Components

### Scene runtime

- [Page shell](https://github.com/redwan786/houses-from-outside/blob/master/index.html): `index.html`
- [Scene entry](https://github.com/redwan786/houses-from-outside/blob/master/js/main.js): `js/main.js`

### Scene domains

- [Five-storey building](https://github.com/redwan786/houses-from-outside/blob/master/js/building.js): `js/building.js`
- [Gabled cottage](https://github.com/redwan786/houses-from-outside/blob/master/js/cottage.js): `js/cottage.js`
- [Scene environment](https://github.com/redwan786/houses-from-outside/blob/master/js/environment.js): `js/environment.js`
- [Lighting rig](https://github.com/redwan786/houses-from-outside/blob/master/js/lighting.js): `js/lighting.js`

### Rendering resources

- [Texture library](https://github.com/redwan786/houses-from-outside/blob/master/js/textures.js): `js/textures.js`
- [Shader materials](https://github.com/redwan786/houses-from-outside/blob/master/js/materials.js): `js/materials.js`
- [GLSL programs](https://github.com/redwan786/houses-from-outside/blob/master/js/shaders.js): `js/shaders.js`
- [Texture images](https://github.com/redwan786/houses-from-outside/tree/master/assets/textures): `assets/textures`

### User interaction

- [Camera controls](https://github.com/redwan786/houses-from-outside/blob/master/js/controls.js): `js/controls.js`
- [HUD](https://github.com/redwan786/houses-from-outside/blob/master/js/hud.js): `js/hud.js`

### Other components

- **Viewer**

## Connections

- Viewer → Page shell: opens scene
- Page shell → Scene entry: loads module
- Viewer → Camera controls: navigates camera
- Viewer → Scene entry: clicks cottage
- Viewer → HUD: uses overlay
- Scene entry → Camera controls: creates and updates
- Scene entry → HUD: creates and updates
- HUD → Scene entry: dispatches actions
- Scene entry → Texture library: loads textures
- Texture library → Texture images: loads images
- Scene entry → Lighting rig: creates rig
- Scene entry → Scene environment: builds scene
- Scene entry → Five-storey building: builds model
- Scene entry → Gabled cottage: builds model
- Scene entry → Gabled cottage: updates skin
- Scene entry → Scene environment: sets season and wind
- Scene entry → Lighting rig: controls time and shadows
- Five-storey building → Shader materials: creates facade materials
- Gabled cottage → Shader materials: creates cottage materials
- Gabled cottage → Shader materials: creates smoke material
- Scene environment → Shader materials: creates foliage and glow
- Shader materials → GLSL programs: uses GLSL
- Texture library → Shader materials: supplies maps
- Lighting rig → Scene environment: shares light uniforms
- Lighting rig → Five-storey building: shares light uniforms
- Lighting rig → Gabled cottage: shares light uniforms