diff --git a/README.md b/README.md index ad2a076..4a78465 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,73 @@ -## 3d scene spanning multiple windows using three.js and localStorage +# 3D Window Visualization with Three.js -A simple example showing how to setup a 3d scene across windows on the same origin using three.js and localStorage. Code should be self explanatory +## Introduction +This JavaScript code utilizes the Three.js library to create a 3D visualization of windows. It renders cubes representing windows in a 3D space, with dynamic updates based on window positions and changes. + +## Components + +### 1. Initialization and Dependencies +- **Imported Dependencies:** + - `WindowManager`: A class responsible for managing windows. + - `THREE`: Aliased as `t` for the Three.js library. + +### 2. Variables +- `camera`, `scene`, `renderer`, `world`: Objects for managing the 3D scene. +- `near`, `far`: Parameters for camera positioning. +- `pixR`: Pixel ratio for rendering. +- `cubes`: Array to store cube objects. +- `sceneOffsetTarget`, `sceneOffset`: Objects to manage scene offset. +- `today`: Represents the current date at midnight. +- `internalTime`: Holds the time in seconds since the beginning of the day. +- `windowManager`: Instance of the `WindowManager` class. +- `initialized`: Flag to track if the initialization is complete. + +### 3. Functions + +#### a. `getTime()` +- Description: Calculates the time in seconds since the beginning of the day. +- Returns: Time in seconds. + +#### b. `init()` +- Description: Initializes the 3D scene, sets up the window manager, and adds event listeners. +- Usage: Called on window load or visibility change. + +#### c. `setupScene()` +- Description: Sets up the orthographic camera, scene, and renderer. +- Usage: Called during initialization. + +#### d. `setupWindowManager()` +- Description: Initializes the window manager, sets up callbacks, and adds custom metadata. +- Usage: Called during initialization. + +#### e. `windowsUpdated()` +- Description: Callback function triggered on window updates. +- Usage: Updates the number of cubes based on window configuration. + +#### f. `updateNumberOfCubes()` +- Description: Updates and displays cubes based on the current window setup. +- Usage: Called on window updates. + +#### g. `updateWindowShape(easing)` +- Description: Updates the window shape and offset with optional easing. +- Parameters: + - `easing`: Boolean indicating whether to use easing for the update. + +#### h. `render()` +- Description: Updates and renders the 3D scene continuously. +- Usage: Called recursively using `requestAnimationFrame`. + +#### i. `resize()` +- Description: Handles resizing of the renderer based on the window size. +- Usage: Called on window resize. + +## Usage +1. Include the necessary dependencies, including Three.js and the `WindowManager` class. +2. Initialize the visualization by calling the `init` function. +3. Customize the window manager and metadata as needed. +4. Allow the visualization to continuously render and update based on window changes. + +## Notes +- The code provides a dynamic 3D visualization of windows using cubes. +- It smoothly updates the scene based on window positions and changes. +- The window manager class facilitates the management of windows and their metadata. -follow me on twitter at [@_nonfigurativ_](https://twitter.com/_nonfigurativ_) for more stuff like this \ No newline at end of file