### Install Three.ez

Source: https://agargaro.github.io/three.ez/docs/tutorial/getting-started/installation

Install the main package of three.ez using npm. Ensure your project is compatible with three.js r151 or later.

```bash
npm install @three.ez/main  

```

--------------------------------

### Modular Three.ez Integration with Classes

Source: https://agargaro.github.io/three.ez/docs/tutorial/getting-started/installation

Use a class-based approach for a more structured and modular setup, recommended for larger projects. This example defines custom classes for the scene, box, and main application.

```typescript
import { Scene as SceneBase, Mesh, BoxGeometry, MeshNormalMaterial } from 'three';  
import { Main as MainBase, PerspectiveCameraAuto } from '@three.ez/main';  
  
class DraggableBox extends Mesh {  
  constructor() {  
    super(new BoxGeometry(0.2, 0.2, 0.2), new MeshNormalMaterial());  
    this.on('animate', (e) => this.rotateX(e.delta).rotateY(e.delta * 2));  
  }  
}  
  
class Scene extends SceneBase {  
  constructor() {  
    super();  
    this.add(new DraggableBox());  
  }  
}  
  
class Main extends MainBase {  
  constructor() {  
    super();  
    this.createView({ scene: new Scene(), camera: new PerspectiveCameraAuto(70).translateZ(1) });  
  }  
}  
  
const main = new Main();  


```

--------------------------------

### Initialize Main Class with Configuration

Source: https://agargaro.github.io/three.ez/docs/tutorial/getting-started/configuration

Instantiate the Main class with a configuration object to set up your three.ez application. This example shows how to define callbacks, background properties, interaction settings, and renderer parameters.

```javascript
const main = new Main({
  animate: () => {
    /** If you use external libraries that require cyclic updates, perform them here. */
  },
  backgroundAlpha: 1,
  backgroundColor: 'black',
  disableContextMenu: true,
  enableCursor: true,
  fullscreen: true,
  multitouch: false,
  rendererParameters: { antialias: true },
  showStats: true
});
```

--------------------------------

### Basic Three.ez Integration

Source: https://agargaro.github.io/three.ez/docs/tutorial/getting-started/installation

Integrate three.ez directly into your main.ts file for a simple setup. This example creates a rotating box within a scene.

```typescript
import { Scene, Mesh, BoxGeometry, MeshNormalMaterial } from 'three';  
import { Main, PerspectiveCameraAuto } from '@three.ez/main';  
  
const box = new Mesh(new BoxGeometry(0.2, 0.2, 0.2), new MeshNormalMaterial());  
box.on('animate', (e) => box.rotateX(e.delta).rotateY(e.delta * 2));  
const scene = new Scene().add(box);  
const main = new Main();  
main.createView({ scene, camera: new PerspectiveCameraAuto(70).translateZ(1) });  


```

--------------------------------

### Simplified Multiple Rendering Setup

Source: https://agargaro.github.io/three.ez/docs/api

Configures a Main renderer to display multiple views with different viewport configurations on the same canvas.

```javascript
const main = new Main();
main.createView({ scene, camera, viewport: { left: 0, bottom: 0, width: 0.5, height: 1 } });
main.createView({ scene, camera, viewport: { left: 0.5, bottom: 0, width: 0.5, height: 1 } });
```

--------------------------------

### Enable Smart Rendering and Handle Manual Updates

Source: https://agargaro.github.io/three.ez/docs/tutorial/rendering/smart-rendering

This example demonstrates enabling smart rendering for a scene and manually setting the `needsRender` flag when a material color changes, which is not automatically detected. The `activeSmartRendering()` method is called on the scene to enable the feature.

```javascript
const draggableBox = new Mesh(new BoxGeometry(), new MeshLambertMaterial({ color: 'green' }));
draggableBox.draggable = true;
draggableBox.on(['pointerenter', 'pointerleave'], function(e) {
  this.material.color.set(e.type === 'pointerenter' ? 'yellow' : 'green');
  this.needsRender = true; // Necessary because color change cannot be automatically detected
});

const scene = new Scene();
scene.activeSmartRendering(); // In this case, it automatically detects drag movements
scene.add(draggableBox);
```

--------------------------------

### firstFocusable

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh2.InstancedMesh2

Retrieves the first focusable object in the hierarchy starting from this object.

```APIDOC
## firstFocusable

### Description
Retrieves the first possible focusable object.

### Method
GET

### Returns
`Object3D<Object3DEventMap>` - The first focusable object.

### Inherited from
InstancedMesh.firstFocusable

### Defined in
src/patch/Object3D.ts:78
```

--------------------------------

### getColor

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Gets the color of this instance. Optionally accepts a target Color object to store the result.

```APIDOC
## getColor

### Description
Gets the color of this instance.

### Method
`getColor(color?: Color): Color`

### Parameters
#### Parameters
- **color** (Color) - Optional - Description: An optional target Color object to store the result.

### Returns
`Color` - The color representation of this instance.

### Defined in
src/instancedMesh/InstancedMeshEntity.ts:99
```

--------------------------------

### pageX

Source: https://agargaro.github.io/three.ez/docs/api/classes/Events.WheelEventExt

Gets the X coordinate of the mouse pointer relative to the entire document. This is a getter property returning a number.

```APIDOC
## pageX

### Description
The X coordinate of the mouse pointer relative to the whole document.

### Method
GET

### Endpoint
N/A (Property)

### Returns
- **number**: The X coordinate relative to the document.

### Defined in
src/events/Events.ts:188
```

--------------------------------

### type

Source: https://agargaro.github.io/three.ez/docs/api/classes/Events.WheelEventExt

Gets the case-insensitive name identifying the type of the event. This is a getter property returning a string representing the event type.

```APIDOC
## type

### Description
The case-insensitive name identifying the type of the event.

### Method
GET

### Endpoint
N/A (Property)

### Returns
- **keyof MiscEvents | keyof InteractionEvents<Object3D<Object3DEventMap>, Object3D<Object3DEventMap>, Object3D<Object3DEventMap> | InstancedMeshEntity> | keyof UpdateEvents**: The type of the event.

### Defined in
src/events/Events.ts:126
```

--------------------------------

### Automatic Property Binding

Source: https://agargaro.github.io/three.ez/docs/tutorial/binding

Use `bindProperty` to automatically update property values at the end of each animation cycle. This example makes the box visible only if its parent is enabled.

```javascript
const box = new Mesh(new BoxGeometry(), new MeshLambertMaterial());
box.bindProperty('visible', () => box.parent?.enabled); // Visible only if parent is enabled
```

--------------------------------

### Hitbox Functionality for Custom Intersections

Source: https://agargaro.github.io/three.ez/docs/api

Define custom hitboxes for objects to control intersection calculations. This example shows intercepting clicks inside a ring.

```javascript
const ring = new Mesh(new RingGeometry(1, 1.5), new MeshBasicMaterial());  
ring.hitboxes = [new Hitbox(new CircleGeometry(1.5))]; // intercept also inside the ring  


```

--------------------------------

### Core.Main Constructor

Source: https://agargaro.github.io/three.ez/docs/api/classes/Core.Main

Initializes the Core.Main class with optional configuration parameters.

```APIDOC
## new Main(parameters?)

### Description
Initializes the Core.Main class with optional configuration parameters.

### Parameters
#### Parameters
- **parameters** (MainParameters) - Optional - Configuration parameters for initializing the Main class.

### Defined in
src/core/Main.ts:157
```

--------------------------------

### Core.MainParameters

Source: https://agargaro.github.io/three.ez/docs/api/interfaces/Core.MainParameters

Configuration parameters for initializing the Main class.

```APIDOC
## Interface: MainParameters

Core.MainParameters

Configuration parameters for initializing the Main class.

### Properties

*   **`animate`** (`Optional` `(delta: number, total: number) => void`)
    Callback function executed for each frame.
    *   **Parameters**:
        *   `delta` (number) - The time delta since the last frame.
        *   `total` (number) - The total elapsed time.

*   **`backgroundAlpha`** (`Optional` `number`)
    Default background alpha (transparency) value (default: 1).

*   **`backgroundColor`** (`Optional` `ColorRepresentation`)
    Default background color (default: 'black').

*   **`disableContextMenu`** (`Optional` `boolean`)
    Disable the context menu on right-click (default: true).

*   **`enableCursor`** (`Optional` `boolean`)
    Enable cursor handling in the application (default: true).

*   **`fullscreen`** (`Optional` `boolean`)
    Enable full-screen mode and automatic canvas resizing (default: true).

*   **`multitouch`** (`Optional` `boolean`)
    Enable multitouch interactions (default: false).

*   **`rendererParameters`** (`Optional` `WebGLRendererParameters`)
    Configuration parameters for the WebGLRenderer.

*   **`showStats`** (`Optional` `boolean`)
    Display performance statistics (default: true).

#### Defined in

src/core/Main.ts
```

--------------------------------

### Create and Configure a RenderView

Source: https://agargaro.github.io/three.ez/docs/tutorial/rendering/how-it-works

Use the `createView` method of the `Main` object to create and configure a new RenderView. This method accepts various parameters to customize the scene, camera, background, post-processing effects, and viewport.

```javascript
const main = new Main();
main.createView({
  scene: sceneObj, // Mandatory
  camera: cameraObj, // Mandatory
  backgroundAlpha: 1,
  backgroundColor: 'black',
  composer: composerObj,
  enabled: true,
  onAfterRender: () => {
    /** Code */
  },
  onBeforeRender: () => {
    /** Code */
  },
  tags: ['A', 'B'],
  visible: true,
  viewport: {
    bottom: 0,
    height: 1,
    left: 0,
    width: 1
  }
});
```

--------------------------------

### pageY

Source: https://agargaro.github.io/three.ez/docs/api/classes/Events.WheelEventExt

Gets the Y coordinate of the mouse pointer relative to the entire document. This is a getter property returning a number.

```APIDOC
## pageY

### Description
The Y coordinate of the mouse pointer relative to the whole document.

### Method
GET

### Endpoint
N/A (Property)

### Returns
- **number**: The Y coordinate relative to the document.

### Defined in
src/events/Events.ts:190
```

--------------------------------

### Asset Loading with three.ez

Source: https://agargaro.github.io/three.ez/docs/api

Demonstrates how to load an audio file using the Asset.load function, providing progress and error callbacks.

```javascript
const audioBuffer = await Asset.load(AudioLoader, 'audio.mp3', onProgressCallback, onErrorCallback);
```

--------------------------------

### Core.Main Methods

Source: https://agargaro.github.io/three.ez/docs/api/classes/Core.Main

Methods for managing RenderViews within the 3D application.

```APIDOC
## addView(view)

### Description
Adds a RenderView to the RenderManager.

### Parameters
#### Parameters
- **view** (RenderView) - The RenderView instance to add.

### Returns
`void`

### Defined in
src/core/Main.ts:229
```

```APIDOC
## clearViews()

### Description
Clears all RenderViews from the RenderManager.

### Returns
`void`

### Defined in
src/core/Main.ts:261
```

```APIDOC
## createView(view)

### Description
Creates a new RenderView and adds it to the RenderManager.

### Parameters
#### Parameters
- **view** (ViewParameters) - The parameters for the new RenderView.

### Returns
`RenderView`
The created RenderView instance.

### Defined in
src/core/Main.ts:221
```

```APIDOC
## getViewByMouse(mouse)

### Description
Retrieves a RenderView by mouse position.

### Parameters
#### Parameters
- **mouse** (Vector2) - The mouse position to use for retrieval.

### Defined in
src/core/Main.ts:270
```

--------------------------------

### movementY

Source: https://agargaro.github.io/three.ez/docs/api/classes/Events.WheelEventExt

Gets the relative change in the Y coordinate of the pointer since the last event. This is a getter property returning a number.

```APIDOC
## movementY

### Description
The Y coordinate of the pointer relative to the position of the last event.

### Method
GET

### Endpoint
N/A (Property)

### Returns
- **number**: The relative Y movement of the pointer.

### Defined in
src/events/Events.ts:182
```

--------------------------------

### Preloading Assets with three.ez

Source: https://agargaro.github.io/three.ez/docs/api

Shows how to preload a GLTF model and then use it to construct a Soldier object. It also demonstrates preloading all pending assets with progress and error handling.

```javascript
// soldier.js
Asset.preload(GLTFLoader, 'https://threejs.org/examples/models/gltf/Soldier.glb');

export class Soldier extends Group {
  constructor() {
    super();
    const gltf = Asset.get('https://threejs.org/examples/models/gltf/Soldier.glb');
    this.add(...gltf.scene.children);
  }
}

// main.js
await Asset.preloadAllPending({ onProgress: (e) => console.log(e * 100 + '%'), onError: (e) => console.error(e) });
const main = new Main();
const soldier = new Soldier();
```

--------------------------------

### movementX

Source: https://agargaro.github.io/three.ez/docs/api/classes/Events.WheelEventExt

Gets the relative change in the X coordinate of the pointer since the last event. This is a getter property returning a number.

```APIDOC
## movementX

### Description
The X coordinate of the pointer relative to the position of the last event.

### Method
GET

### Endpoint
N/A (Property)

### Returns
- **number**: The relative X movement of the pointer.

### Defined in
src/events/Events.ts:180
```

--------------------------------

### Create Multiple Render Views

Source: https://agargaro.github.io/three.ez/docs/tutorial/rendering/multiple-rendering

Create distinct rendering views by instantiating `RenderView`. Control initial visibility using the `visible` property.

```javascript
const viewA = main.createView({ scene: sceneA, camera: cameraA });  
const viewB = main.createView({ scene: sceneB, camera: cameraB, visible: false });  
```

--------------------------------

### RenderView Constructor

Source: https://agargaro.github.io/three.ez/docs/api/classes/Rendering.RenderView

Initializes a new RenderView. This constructor should not be instantiated manually by the user.

```APIDOC
## new RenderView(parameters, rendererSize)

### Description
Initializes a new RenderView with the specified parameters and renderer size. Users are advised not to instantiate this class manually.

### Parameters
#### Parameters
- **parameters** (ViewParameters) - Description not available.
- **rendererSize** (Vector2) - Description not available.

### Defined in
src/rendering/RenderView.ts:76
```

--------------------------------

### Import Three.ez from CDN

Source: https://agargaro.github.io/three.ez/docs/api

Import the Three.ez library from a CDN using an import map for direct use in the browser.

```html
<script type="importmap">  
{"imports": {  "three": "https://unpkg.com/three@0.162.0/build/three.module.js",  "three/examples/jsm": "https://unpkg.com/three@0.162.0/examples/jsm/",  "@three.ez/main": "https://unpkg.com/@three.ez/main@0.5.1/bundle.js"  }}
</script>  


```

--------------------------------

### Initialize three.ez with Scene and Draggable Box

Source: https://agargaro.github.io/three.ez/docs/api

Initializes a three.js scene with a draggable box that has animation and pointer event listeners. It also sets up the main renderer and creates a view.

```javascript
import { Scene, Mesh, BoxGeometry, MeshNormalMaterial } from 'three';
import { Main, PerspectiveCameraAuto } from '@three.ez/main';

const box = new Mesh(new BoxGeometry(), new MeshNormalMaterial());
box.draggable = true; // make it draggable
box.on('animate', (e) => box.rotateX(e.delta).rotateY(e.delta * 2)); // animate it every frame
box.on(['pointerover', 'pointerout'], (e) => box.scale.setScalar(e.type === 'pointerover' ? 1.5 : 1));

const scene = new Scene().add(box);
const main = new Main(); // init inside the renderer, and handle events, resize, etc
main.createView({ scene, camera: new PerspectiveCameraAuto(70).translateZ(1) }); // create the view to be rendered
```

--------------------------------

### Manage View Visibility with Tags

Source: https://agargaro.github.io/three.ez/docs/tutorial/rendering/multiple-rendering

Assign tags to views and use `setActiveViewsByTag` for organized visibility control. This is the recommended approach.

```javascript
main.createView({ scene, camera: frontCamera, tags: ['front'] });  
  
main.createView({ scene, camera: backCamera, tags: ['back'] });  
  
main.createView({ scene, camera: frontCamera,  
  viewport: { left: 0, bottom: 0, width: 0.5, height: 1 },  
  tags: ['multiple']  
});  
  
main.createView({ scene, camera: backCamera,   
  viewport: { left: 0.5, bottom: 0, width: 0.5, height: 1 },  
  tags: ['multiple']  
});  
  
main.setActiveViewsByTag('multiple'); // Show 'multiple' views and hide 'front' and 'back' views  
```

--------------------------------

### PerspectiveCameraAuto Constructor

Source: https://agargaro.github.io/three.ez/docs/api/classes/Cameras.PerspectiveCameraAuto

Initializes a new instance of PerspectiveCameraAuto. This constructor allows for optional field of view, near, and far plane distances.

```APIDOC
## new PerspectiveCameraAuto(fov?, near?, far?)

### Description
Initializes a new instance of the PerspectiveCameraAuto class.

### Parameters
#### Parameters
- **fov** (number) - Optional - Camera frustum vertical field of view in degrees. Default `50`.
- **near** (number) - Optional - Camera frustum near plane distance. Default `0.1`.
- **far** (number) - Optional - Camera frustum far plane distance. Default `2000`.

### Overrides
PerspectiveCamera.constructor

### Defined in
src/cameras/PerspectiveCameraAuto.ts:13
```

--------------------------------

### LoadingConfig Interface

Source: https://agargaro.github.io/three.ez/docs/api/interfaces/Utils.LoadingConfig

Configuration options for resource loading, including callbacks for error handling and progress reporting.

```APIDOC
## Interface: LoadingConfig

Configuration options for resource loading.

### Properties

#### onError

- `Optional` **onError**: (`error`: `unknown`) => `void`
  - Type declaration: `(error): void`
  - Description: A callback function for handling errors during resource loading. This function is called with an `error` object in case of loading errors.
  - Parameters:
    - `error` (unknown)
  - Returns: `void`
  - Defined in: src/utils/Asset.ts:16

#### onProgress

- `Optional` **onProgress**: (`ratio`: `number`) => `void`
  - Type declaration: `(ratio): void`
  - Description: A callback function for reporting progress during resource loading. This function is called with a ratio (0 to 1) to indicate the loading progress.
  - Parameters:
    - `ratio` (number)
  - Returns: `void`
  - Defined in: src/utils/Asset.ts:11
```

--------------------------------

### Core.Main Properties

Source: https://agargaro.github.io/three.ez/docs/api/classes/Core.Main

Static properties of the Core.Main class.

```APIDOC
## ticks

### Description
A static counter representing the number of animation frames elapsed.

### Type
`number`

### Value
`0`

### Defined in
src/core/Main.ts:47
```

--------------------------------

### InstancedMesh2 Constructor

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh2.InstancedMesh2

Initializes a new InstancedMesh2 object. This constructor allows for the creation of an instanced mesh with custom data types, geometry, material, and configuration, including frustum culling and individual instance management.

```APIDOC
## new InstancedMesh2<T, G, M>(geometry, material, count, config)

### Description
Constructs a new InstancedMesh2 instance.

### Parameters
* `geometry` (G): The geometry for the instanced mesh.
* `material` (M): The material to apply to the instanced mesh.
* `count` (number): The number of instances to create.
* `config` (InstancedMesh2Params<T>): Configuration object for advanced features like instance transformations and visibility.

### Type Parameters
* `T`: Custom data type for instances.
* `G`: Geometry type, extending `BufferGeometry`.
* `M`: Material type, extending `Material`.
```

--------------------------------

### Handling Miscellaneous Events

Source: https://agargaro.github.io/three.ez/docs/tutorial/events/misc

This snippet demonstrates how to listen for and handle viewport resize, beforeanimate, animate, and afteranimate events. These events are useful for responding to changes in the rendering environment and for managing object animations.

```javascript
const box = new Mesh(new BoxGeometry(), new MeshLambertMaterial());  

box.on('viewportresize', (e) => {  
    console.log(`New viewport size: ${e.width} - ${e.height} / Camera: ${e.camera}`);  
});  

box.on('beforeanimate', (e) => {  
    console.log(`Before animate - Delta: ${e.delta} - Total: ${e.total}`);  
});  

box.on('animate', (e) => {  
    console.log(`Animate - Delta: ${e.delta} - Total: ${e.total}`);  
});  

box.on('afteranimate', (e) => {  
    console.log(`After animate - Delta: ${e.delta} - Total: ${e.total}`);  
});  

```

--------------------------------

### on

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh2.InstancedMesh2

Attaches an event listener to the object.

```APIDOC
## on <K>

### Description
Attaches an event listener to the object.

### Method
ON

### Type Parameters
- **K**: extends keyof `MiscEvents` | keyof `InteractionEvents`<`Object3D`<`Object3DEventMap`>, `Object3D`<`Object3DEventMap`>, `Object3D`<`Object3DEventMap`> | `InstancedMeshEntity`> | keyof `UpdateEvents`

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Parameters
- **type** (`K` | `K`[]) - Required - The type of event to listen for.
- **listener** ((`this`: `InstancedMesh2`<`T`, `G`, `M`>, `event?`: `Events`[`K`]) => `void`) - Required - The callback function to execute when the event occurs.

### Returns
(`event?`: `Events`[`K`]) => `void` - The attached event listener function.

### Inherited from
InstancedMesh.on

### Defined in
src/patch/Object3D.ts:117
```

--------------------------------

### on

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh2.InstancedMesh2

Attaches an event listener to the object.

```APIDOC
## `on`

### Description
Attaches an event listener to the object.

### Signature
`▸ (event?): fn`

### Parameters
- **event?** (`Events[K]`) -

### Returns
`fn` - A function to remove the event listener.
```

--------------------------------

### Simplified InstancedMesh Management

Source: https://agargaro.github.io/three.ez/docs/api

Easily manage `InstancedMesh` instances with an API similar to `Object3D`. Includes support for frustum culling and individual instance manipulation.

```javascript
const myInstancedMesh = new InstancedMesh2(geometry, material, count, (obj, index) => {  
  obj.position.x += index;  
  obj.scale.setScalar(2);  
  obj.quaternion.random();  
  obj.forceUpdateMatrix();  
});  
  
// How to handle instances  
myInstancedMesh.instances[0].visible = false;  
myInstancedMesh.instances[1].draggable = true;  
myInstancedMesh.instances[2].rotateOnWorldAxis(xAxis, Math.PI);  
myInstancedMesh.instances[2].updateMatrix();  


```

--------------------------------

### Preload All Pending Assets with Progress and Error Handling

Source: https://agargaro.github.io/three.ez/docs/tutorial/asset-management

After preloading individual assets across multiple files, call `Asset.preloadAllPending` to load them all. Progress and error callbacks can be provided.

```typescript
await Asset.preloadAllPending({ onProgress: (e) => console.log(e * 100 + '%'), onError: (e) => console.error(e) });
// now assets are loaded
const main = new Main();
```

--------------------------------

### InstancedMesh2Params<T>

Source: https://agargaro.github.io/three.ez/docs/api/interfaces/InstancedMesh2.InstancedMesh2Params

Configuration object for creating an InstancedMesh2. It allows specifying behavior for frustum culling, default instance color, and a callback for instance creation.

```APIDOC
## Interface: InstancedMesh2Params<T>

Configuration for creating an InstancedMesh2.

### Type parameters

* `T`: Type parameter for the entity.

### Properties

#### behaviour

* **behaviour** (number) - Required - Determines which strategy to use for frustum culling (can be `CullingNone`, `CullingStatic`, `CullingDynamic`).

#### color

* **color** (ColorRepresentation) - Optional - The default color to apply to each instance.

#### onInstanceCreation

* **onInstanceCreation** (CreateEntityCallback<Entity<T>>) - Optional - Callback invoked after creation of each instance (optional if behaviour is not `CullingStatic`).
```

--------------------------------

### InstancedMeshEntity Methods

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Provides methods for managing the state and transformations of an InstancedMeshEntity.

```APIDOC
## InstancedMeshEntity Methods

### applyBlur()
▸ **applyBlur**(): `void`
Applies blur (removes focus) from the object.

### applyFocus()
▸ **applyFocus**(): `void`
Applies focus to the object.

### applyMatrix4(m)
▸ **applyMatrix4**(`m`): `InstancedMeshEntity`
Applies the matrix transform to the object and updates the object's position, rotation, and scale.

#### Parameters
- **m** (Matrix4) - Required - Matrix to apply.
```

--------------------------------

### Preload Multiple Assets in a Single File

Source: https://agargaro.github.io/three.ez/docs/tutorial/asset-management

Preload various asset types by providing an object with loader configurations. This ensures all specified assets are cached before use.

```javascript
await Asset.loadAll({
  onProgress: (e) => console.log(e * 100 + '%'),
  onError: (e) => console.error(e)
}, {
  loader: TextureLoader,
  paths: ['texture.jpg', 'texture2.jpg'],
}, {
  loader: AudioLoader,
  paths: ['assets/win.mp3'],
}, {
  loader: GLTFLoader,
  paths: ['model.glb'],
});

// now assets are loaded
const gltf = Asset.get<GLTF>('model.glb');
const texture = Asset.get<Texture>('texture.jpg');
```

--------------------------------

### Synchronously Load an Asset

Source: https://agargaro.github.io/three.ez/docs/tutorial/asset-management

Use the `load` method to synchronously load a single resource. The loaded resource is also available via `Asset.get()`.

```javascript
const audioBuffer = await Asset.load(AudioLoader, 'audio.mp3', onProgressCallback, onErrorCallback) as AudioBuffer;
// now the resource is also available using Asset.get('audio.mp3')
```

--------------------------------

### TweenManager.completeAll

Source: https://agargaro.github.io/three.ez/docs/api/classes/Tweening.TweenManager

Completes all currently running tweens managed by the TweenManager.

```APIDOC
## TweenManager.completeAll

### Description
Completes all running tweens.

### Method
Static

### Returns
`void`

### Defined in
src/tweening/TweenManager.ts:123
```

--------------------------------

### MotionConfig<T>

Source: https://agargaro.github.io/three.ez/docs/api/interfaces/Tweening.MotionConfig

Interface for configuring motion animations in a Tween. You can specify easing, callback functions, and progress tracking functions.

```APIDOC
## Interface: MotionConfig<T>

Tweening.MotionConfig

Interface for configuring motion animations in a Tween. You can specify easing, callback functions, and progress tracking functions.

### Type parameters

* `T`: The type of the target object being tweened.

### Properties

* `easing` (Easing) - Optional - The easing function to control the animation's progression.
* `onComplete` (target: T => void) - Optional - A callback function to execute when the animation completes.
* `onProgress` (target: T, key: string, start: AllowedTypes, end: AllowedTypes, alpha: number) => boolean | void - Optional - A callback function to be executed before each property is updated. If `false`, will not assign a new value to the property.
* `onStart` (target: T) => void - Optional - A callback function to execute when the animation starts.
* `onUpdate` (target: T) => void - Optional - A callback function to be executed after each property has been updated.
```

--------------------------------

### Core.Main Accessors

Source: https://agargaro.github.io/three.ez/docs/api/classes/Core.Main

Accessor methods for retrieving various components and states of the 3D application managed by Core.Main.

```APIDOC
## activeCamera

### Description
The Camera associated with the currently active RenderView.

### Returns
`Camera`

### Defined in
src/core/Main.ts:79
```

```APIDOC
## activeComposer

### Description
The EffectComposer (used for post-processing) associated with the currently active RenderView.

### Returns
`EffectComposer`

### Defined in
src/core/Main.ts:84
```

```APIDOC
## activeScene

### Description
The Scene associated with the currently active RenderView.

### Returns
`Scene`

### Defined in
src/core/Main.ts:74
```

```APIDOC
## activeView

### Description
The currently active RenderView (activated by mouse position).

### Returns
`RenderView`

### Defined in
src/core/Main.ts:69
```

```APIDOC
## backgroundAlpha

### Description
The default alpha (transparency) value for the background.

### Returns
`number`

### Defined in
src/core/Main.ts:140
```

```APIDOC
## backgroundColor

### Description
The default background color used in the application.

### Returns
`ColorRepresentation`

### Defined in
src/core/Main.ts:134
```

```APIDOC
## dragButtons

### Description
Defines the mouse buttons that can be used for dragging objects. Specify the button values as an array of PointerEvent button values.

### Returns
`number[]`

### Defined in
src/core/Main.ts:111
```

```APIDOC
## enableCursor

### Description
Indicates whether to enable cursor handling in the application.

### Returns
`boolean`

### Defined in
src/core/Main.ts:117
```

```APIDOC
## mousePosition

### Description
The current mouse position represented as a Vector2. Provides the x and y coordinates of the mouse pointer within the application.

### Returns
`Vector2`

### Defined in
src/core/Main.ts:147
```

```APIDOC
## multitouch

### Description
Indicates whether to enable multitouch interactions.

### Returns
`boolean`

### Defined in
src/core/Main.ts:104
```

```APIDOC
## pointerOnCanvas

### Description
Indicates if the pointer is over the canvas.

### Returns
`boolean`

### Defined in
src/core/Main.ts:152
```

```APIDOC
## raycaster

### Description
A Raycaster instance responsible for handling raycasting operations in the application.

### Returns
`Raycaster`

### Defined in
src/core/Main.ts:129
```

```APIDOC
## raycasterSortComparer

### Description
A custom sorting comparer function used to order intersections when performing raycasting.

### Returns
`RaycasterSortComparer`

### Defined in
src/core/Main.ts:123
```

```APIDOC
## renderer

### Description
The WebGLRenderer instance used for rendering the 3D scene.

### Returns
`WebGLRenderer`

### Defined in
src/core/Main.ts:58
```

```APIDOC
## showStats

### Description
Indicates whether to display performance statistics. If set to true, statistics will be shown; otherwise, they will be hidden.

### Returns
`boolean`

### Defined in
src/core/Main.ts:90
```

```APIDOC
## views

### Description
An array of all RenderView instances managed by the application. Lists all views created and managed by the application, each representing a separate viewport or scene.

### Returns
`RenderView[]`

### Defined in
src/core/Main.ts:64
```

--------------------------------

### InstancedMeshEntity Constructor

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Initializes a new InstancedMeshEntity. This constructor is used internally to create instances managed by an InstancedMesh2.

```APIDOC
## new InstancedMeshEntity(parent, index, color?)

### Description
Initializes a new InstancedMeshEntity.

### Parameters
#### Parameters
- **parent** (InstancedMesh2) - Required - The parent InstancedMesh2 that contains this instance.
- **index** (number) - Required - The index of this instance within the parent InstancedMesh2.
- **color?** (ColorRepresentation) - Optional - The initial color representation for this instance.
```

--------------------------------

### Preload a Single Asset for Later Use

Source: https://agargaro.github.io/three.ez/docs/tutorial/asset-management

Preload a specific asset using `Asset.preload`. The asset can then be retrieved using `Asset.get` within the same file or imported files.

```typescript
Asset.preload(GLTFLoader, 'https://threejs.org/examples/models/gltf/Soldier.glb');

export class Soldier extends Group {
  constructor() {
    super();
    const gltf = Asset.get<GLTF>('https://threejs.org/examples/models/gltf/Soldier.glb');
    this.add(...gltf.scene.children);
  }
}
```

--------------------------------

### Smart Rendering with three.ez

Source: https://agargaro.github.io/three.ez/docs/api

Enables smart rendering for a scene, optimizing performance by rendering only when necessary. Changes like dragging a draggable object automatically trigger a render.

```javascript
const scene = new Scene();
scene.activeSmartRendering();

const box = new Mesh(new BoxGeometry(), new MeshLambertMaterial({ color: 'green' }));
box.draggable = true; // if you drag the frame, it automatically detects changes and renders the frame

box.material.color.set('yellow');
box.needsRender = true; // necessary because color change cannot be automatically detected
```

--------------------------------

### applyFocus

Source: https://agargaro.github.io/three.ez/docs/api/classes/Cameras.PerspectiveCameraAuto

Applies focus to the object.

```APIDOC
## applyFocus

### Description
Applies focus to the object.

### Method
POST

### Endpoint
/cameras/:id/applyFocus

### Returns
`void`
```

--------------------------------

### InstancedMesh.tween

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Initiates a Tween animation for the InstancedMesh object, allowing for smooth transitions and animations.

```APIDOC
## InstancedMesh.tween

### Description
Initiates a Tween animation for the InstancedMesh object, allowing for smooth transitions and animations.

### Method
tween

### Returns
#### Success Response
- **Tween<InstancedMeshEntity>** - A Tween instance for further configuration.

### Defined in
src/instancedMesh/InstancedMeshEntity.ts:229
```

--------------------------------

### ViewParameters Interface

Source: https://agargaro.github.io/three.ez/docs/api/interfaces/Rendering.ViewParameters

Represents a set of parameters for configuring a view. This interface is implemented by RenderView.

```APIDOC
## Interface: ViewParameters

Rendering.ViewParameters
Represents a set of parameters for configuring a view.

### Properties

* **backgroundAlpha** (`number`): Optional. Background alpha value of the view (default: 1).
* **backgroundColor** (`ColorRepresentation`): Optional. Background color of the view (default: 'black').
* **camera** (`Camera`): Camera used to view the scene (avoid using the same camera for different scenes).
* **composer** (`EffectComposer`): Optional. Effect composer used for post-processing.
* **enabled** (`boolean`): Optional. Determines whether InteractionEvents will be triggered for the view (default: true).
* **onAfterRender** (`() => void`): Optional. Function called after rendering the view.
* **onBeforeRender** (`() => void`): Optional. Function called before rendering the view.
* **scene** (`Scene`): Scene rendered in the view.
* **tags** (`string[]`): Optional. Tags of the view.
* **viewport** (`Viewport`): Optional. Normalized viewport defining dimensions and position of the view. Values range from 0 to 1.
* **visible** (`boolean`): Optional. Determines if the view is visible (default: true).
```

--------------------------------

### Object3DExtPrototype Methods

Source: https://agargaro.github.io/three.ez/docs/api/interfaces/Patch.Object3DExtPrototype

This section outlines the methods available on the Object3DExtPrototype for managing focus, applying blur, and binding properties for dynamic updates.

```APIDOC
### Methods

*   **applyBlur**(): `void`
    Applies blur (removes focus) from the object.
    #### Returns
    `void`
    #### Defined in
    src/patch/Object3D.ts:86
*   **applyFocus**(): `void`
    Applies focus to the object.
    #### Returns
    `void`
    #### Defined in
    src/patch/Object3D.ts:82
*   **bindProperty** <`T`>(`property`, `getCallback`, `renderOnChange?`): `Object3DExtPrototype`
    Binds a property to a callback function for updates.
    #### Type parameters
    Name| Type  
    ---|---
    `T`| extends keyof `Object3DExtPrototype`  
    #### Parameters
    Name| Type| Description  
    ---|---|---
    `property`| `T`| The name of the property to bind.  
    `getCallback`| () => `Object3DExtPrototype`[`T`]| A function that retrieves the property's value.  
    `renderOnChange?`| `boolean`| Indicates whether to render when the property changes (optional, default: `false`).  
    #### Returns
    `Object3DExtPrototype`
    The instance of the object with the binding applied.
    #### Defined in
    src/patch/Object3D.ts:138
*   **detectChanges**(`recursive?`): `void`
    Calculates all bindings on the current object. If 'recursive' is set to true, it will also calculate bindings for all children.
    #### Parameters
    Name| Type| Description
    ---|---|---
    `recursive?`| `boolean`| Whether to recursively calculate bindings for children.
    #### Defined in
    src/patch/Object3D.ts:145
```

--------------------------------

### detectChanges

Source: https://agargaro.github.io/three.ez/docs/api/classes/Cameras.PerspectiveCameraAuto

Calculates all bindings on the current object. Optionally, it can recursively calculate bindings for all child objects.

```APIDOC
## detectChanges

### Description
Calculates all bindings on the current object. If 'recursive' is set to true, it will also calculate bindings for all children.

### Method
POST

### Endpoint
/cameras/:id/detectChanges

### Parameters
#### Query Parameters
- **recursive** (boolean) - Optional - If true, calculate bindings for children as well (default: `false`).

### Returns
`void`
```

--------------------------------

### setColor

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Sets the color of this instance. Accepts a ColorRepresentation.

```APIDOC
## setColor

### Description
Sets the color of this instance.

### Method
`setColor(color: ColorRepresentation): void`

### Parameters
#### Parameters
- **color** (ColorRepresentation) - Description: The color representation to set.

### Returns
`void`

### Defined in
src/instancedMesh/InstancedMeshEntity.ts:88
```

--------------------------------

### bindProperty

Source: https://agargaro.github.io/three.ez/docs/api/classes/Cameras.PerspectiveCameraAuto

Binds a property of the camera to a callback function for updates. This allows for dynamic updates based on external changes.

```APIDOC
## bindProperty

### Description
Binds a property to a callback function for updates.

### Method
POST

### Endpoint
/cameras/:id/bindProperty

### Parameters
#### Request Body
- **property** (string) - Required - The name of the property to bind.
- **getCallback** (function) - Required - A function that retrieves the property's value.
- **renderOnChange** (boolean) - Optional - Indicates whether to render when the property changes (default: `false`).

### Returns
`PerspectiveCameraAuto` - The instance of the object with the binding applied.
```

--------------------------------

### Querying Objects in a Scene

Source: https://agargaro.github.io/three.ez/docs/api

Use powerful query selectors to find and select `Object3D` instances within a scene. Supports selecting by type, name, tags, and hierarchy.

```javascript
scene.querySelectorAll('Mesh'); // Selects all the meshes in the scene.  
scene.querySelectorAll('[name=box]'); // Selects all Object3D that have 'box' as their name.  
scene.querySelectorAll('[name*=box]'); // Selects all Object3D that have 'box' anywhere in their name.  
scene.querySelectorAll('Mesh.even'); // Selects meshes with both 'Mesh' type and 'even' tag.  
scene.querySelectorAll('Group .even'); // Selects all Object3D with 'even' tag that are children of a 'Group'.  
scene.querySelectorAll('Group > .even'); // Selects all direct children with 'even' tag under a 'Group'.  
scene.querySelectorAll('Mesh, SkinnedMesh'); // Selects all meshes and skinned meshes in the scene.  


```

--------------------------------

### WheelEventExt Accessors

Source: https://agargaro.github.io/three.ez/docs/api/classes/Events.WheelEventExt

Details the accessors for the WheelEventExt class, including altKey, bubbles, button, buttons, clientX, clientY, ctrlKey, defaultPrevented, deltaX, deltaY, and deltaZ.

```APIDOC
## Accessors

### altKey
- **altKey** () => boolean - Returns true if the alt key was down when the mouse event was fired.

### bubbles
- **bubbles** () => boolean - A boolean value indicating whether or not the event bubbles up through the DOM.

### button
- **button** () => number - The button number that was pressed (if applicable) when the mouse event was fired.

### buttons
- **buttons** () => number - The buttons being pressed (if any) when the mouse event was fired.

### clientX
- **clientX** () => number - The X coordinate of the mouse pointer in local (DOM content) coordinates.

### clientY
- **clientY** () => number - The Y coordinate of the mouse pointer in local (DOM content) coordinates.

### ctrlKey
- **ctrlKey** () => boolean - Returns true if the control key was down when the mouse event was fired.

### defaultPrevented
- **defaultPrevented** () => boolean - Indicates whether or not the call to event.preventDefault() canceled the event.

### deltaX
- **deltaX** () => number - Returns a double representing the horizontal scroll amount.

### deltaY
- **deltaY** () => number - Returns a double representing the vertical scroll amount.

### deltaZ
- **deltaZ** () => number - Returns a double representing the scroll amount for the z-axis.

### Defined in
src/events/Events.ts
```

--------------------------------

### TweenManager.completeAllByTag

Source: https://agargaro.github.io/three.ez/docs/api/classes/Tweening.TweenManager

Completes all running tweens that match a specific tag.

```APIDOC
## TweenManager.completeAllByTag

### Description
Complete all running tweens with a specific tag.

### Method
Static

### Parameters
#### Path Parameters
- **tag** (string) - Required - The tag to filter running tweens.

### Returns
`void`

### Defined in
src/tweening/TweenManager.ts:133
```

--------------------------------

### InstancedMesh.emit

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Triggers an event on the InstancedMesh. This method allows for custom event handling and animations.

```APIDOC
## InstancedMesh.emit

### Description
Triggers an event on the InstancedMesh. This method allows for custom event handling and animations.

### Method
emit

### Parameters
#### Path Parameters
- **type** (K) - Required - The type of event to trigger.
- **event?** (InstancedEvents[K]) - Optional - Optional event data to pass to the listeners.

### Returns
#### Success Response
- **void** - This method does not return a value.

### Defined in
src/instancedMesh/InstancedMeshEntity.ts:221
```

--------------------------------

### InstancedMeshEntity Properties

Source: https://agargaro.github.io/three.ez/docs/api/classes/InstancedMesh.InstancedMeshEntity

Provides access to various properties of an InstancedMeshEntity, including its interaction states, transform, and identification.

```APIDOC
## InstancedMeshEntity Properties

### cursor
- **cursor** (Cursor) - The cursor style when interacting with the object.

### cursorDrag
- **cursorDrag** (Cursor) - The cursor style when dragging the object.

### cursorDrop
- **cursorDrop** (Cursor) - The cursor style when dropping an object onto this one.

### draggable
- **draggable** (boolean) - Indicates whether the object is draggable. Defaults to `false`.

### enabled
- **enabled** (boolean) - Determines if the object is enabled. Defaults to `true`. If set to `true`, it allows triggering all InteractionEvents; otherwise, events are disabled.

### findDropTarget
- **findDropTarget** (boolean) - Determines when the object is dragged, whether it will have to search for any drop targets. Defaults to `false`.

### focusable
- **focusable** (boolean) - Indicates whether the object can receive focus. Defaults to `true`.

### instanceId
- **instanceId** (number) - An identifier for this individual instance within an InstancedMesh2.

### isInstancedMeshEntity
- **isInstancedMeshEntity** (boolean) - A flag indicating that this is an instance of InstancedMeshEntity. Defaults to `true`.

### parent
- **parent** (InstancedMesh2) - The parent InstancedMesh2 that contains this instance.

### position
- **position** (Vector3) - A `Readonly` Vector3 representing the object's local position. Default is (0, 0, 0).

### quaternion
- **quaternion** (Quaternion) - A `Readonly` object's local rotation as a Quaternion.

### scale
- **scale** (Vector3) - A `Readonly` object's local scale. Default is Vector3(1, 1, 1).
```

--------------------------------

### Automatic Resize Handling for Custom Shaders

Source: https://agargaro.github.io/three.ez/docs/api

Handles viewport resize events to update the resolution uniform for custom shaders in a Line2 object.

```javascript
const line = new Line2(geometry, material);
line.on('viewportresize', (e) => material.resolution.set(e.width, e.height));
```

--------------------------------

### on

Source: https://agargaro.github.io/three.ez/docs/api/classes/Cameras.PerspectiveCameraAuto

Attaches an event listener to the object. Returns a function to remove the listener.

```APIDOC
## on

### Description
Attaches an event listener to the object.

### Method
POST

### Endpoint
/cameras/:id/on

### Parameters
#### Request Body
- **type** (string | string[]) - Required - The type of event to listen for.
- **listener** (function) - Required - The callback function to execute when the event occurs.

### Returns
`function` - A function to remove the event listener.
```

--------------------------------

### querySelector

Source: https://agargaro.github.io/three.ez/docs/api/classes/Cameras.PerspectiveCameraAuto

Finds and returns the first Object3D element that matches the specified query string, similar to CSS selectors.

```APIDOC
## querySelector

### Description
Finds and returns the first Object3D element that matches the specified query string. This method follows a similar syntax to CSS selectors.

### Method
GET

### Endpoint
/cameras/:id/querySelector

### Parameters
#### Query Parameters
- **query** (string) - Required - The query string to match against the Object3D elements.

### Returns
`Object3D` - The first Object3D element that matches the query, or undefined if no match is found.
```

--------------------------------

### Focus and Blur Events in three.ez

Source: https://agargaro.github.io/three.ez/docs/api

Configures a Mesh object to be focusable and logs messages when it gains or loses focus.

```javascript
const box = new Mesh(geometry, material);
box.focusable = true; // default is true
box.on('focus', (e) => console.log('focused'));
box.on('blur', (e) => console.log('focus lost'));
```