# doinel1a/vite-three-js architecture

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

- Interactive diagram: https://gitdiagram.com/doinel1a/vite-three-js
- Repository: https://github.com/doinel1a/vite-three-js

## Overview

This repository is a Three.js web-application starter. The principal workflow begins when the browser loads the app: its entry module imports styles and creates a Three.js scene for the canvas, then renders an animated shader-driven plane with orbit controls and resize handling. The README also advertises TailwindCSS 4 and Sass/SCSS; the tree and sampled entry show CSS and SCSS imports, but do not establish their styling details. Build and developer tooling are omitted. Links reflect the sampled source and README; no unsampled runtime behavior is inferred.

Main entry points: [`src/app/three.js`](https://github.com/doinel1a/vite-three-js/blob/main/src/app/three.js) (Three scene), [`src/app/index.js`](https://github.com/doinel1a/vite-three-js/blob/main/src/app/index.js) (App bootstrap), [`src/shaders/vertex.glsl`](https://github.com/doinel1a/vite-three-js/blob/main/src/shaders/vertex.glsl) (Vertex shader), [`src/shaders/fragment.glsl`](https://github.com/doinel1a/vite-three-js/blob/main/src/shaders/fragment.glsl) (Fragment shader)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_entry["App bootstrap<br/>[index.js]"]
end

subgraph group_rendering["Scene rendering"]
  node_scene["Three scene<br/>[three.js]"]
  node_vertex["Vertex shader<br/>[vertex.glsl]"]
  node_fragment["Fragment shader<br/>[fragment.glsl]"]
end

subgraph group_styles["App styles"]
  node_css["Global CSS<br/>[globals.css]"]
  node_scss["Global SCSS<br/>[globals.scss]"]
end

node_browser(("Browser"))
node_threejs["Three.js"]
node_orbit["OrbitControls"]

node_browser -->|"loads app"| node_entry
node_entry -->|"creates scene"| node_scene
node_entry -->|"imports styles"| node_css
node_entry -->|"imports styles"| node_scss
node_scene -->|"uses shader"| node_vertex
node_scene -->|"uses shader"| node_fragment
node_scene -->|"uses library"| node_threejs
node_scene -->|"creates controls"| node_orbit

click node_entry "https://github.com/doinel1a/vite-three-js/blob/main/src/app/index.js"
click node_scene "https://github.com/doinel1a/vite-three-js/blob/main/src/app/three.js"
click node_vertex "https://github.com/doinel1a/vite-three-js/blob/main/src/shaders/vertex.glsl"
click node_fragment "https://github.com/doinel1a/vite-three-js/blob/main/src/shaders/fragment.glsl"
click node_css "https://github.com/doinel1a/vite-three-js/blob/main/src/styles/globals.css"
click node_scss "https://github.com/doinel1a/vite-three-js/blob/main/src/styles/globals.scss"

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_entry,node_browser toneBlue
class node_scene,node_vertex,node_fragment toneAmber
class node_css,node_scss toneMint
class node_threejs,node_orbit toneIndigo
```

## Components

### App entry

- [App bootstrap](https://github.com/doinel1a/vite-three-js/blob/main/src/app/index.js): `src/app/index.js`

### Scene rendering

- [Three scene](https://github.com/doinel1a/vite-three-js/blob/main/src/app/three.js): `src/app/three.js`
- [Vertex shader](https://github.com/doinel1a/vite-three-js/blob/main/src/shaders/vertex.glsl): `src/shaders/vertex.glsl`
- [Fragment shader](https://github.com/doinel1a/vite-three-js/blob/main/src/shaders/fragment.glsl): `src/shaders/fragment.glsl`

### App styles

- [Global CSS](https://github.com/doinel1a/vite-three-js/blob/main/src/styles/globals.css): `src/styles/globals.css`
- [Global SCSS](https://github.com/doinel1a/vite-three-js/blob/main/src/styles/globals.scss): `src/styles/globals.scss`

### Other components

- **Browser**
- **Three.js**
- **OrbitControls**

## Connections

- Browser → App bootstrap: loads app (evidence: `src/app/index.js`)
- App bootstrap → Three scene: creates scene (evidence: `src/app/index.js`)
- App bootstrap → Global CSS: imports styles (evidence: `src/app/index.js`)
- App bootstrap → Global SCSS: imports styles (evidence: `src/app/index.js`)
- Three scene → Vertex shader: uses shader (evidence: `src/app/three.js`)
- Three scene → Fragment shader: uses shader (evidence: `src/app/three.js`)
- Three scene → Three.js: uses library (evidence: `src/app/three.js`)
- Three scene → OrbitControls: creates controls (evidence: `src/app/three.js`)