### Install three.ez via npm

Source: https://github.com/agargaro/three.ez/blob/master/README.md

Use this command to install the three.ez library using npm.

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

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

### Basic three.ez Setup in TypeScript

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/getting-started/installation.md

Integrate this code into your main.ts file for a quick start. It sets up a rotating box in 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) });
```

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

### Basic Scene Setup and Object Interaction

Source: https://github.com/agargaro/three.ez/blob/master/README.md

Initialize a scene, add a draggable and animatable box, and set up event listeners for pointer interactions. This snippet demonstrates the core setup for a three.ez application.

```typescript
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().translateZ(10) }); // create the view to be rendered
```

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

### Recommended Class-Based three.ez Setup in TypeScript

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/getting-started/installation.md

For larger projects, use this class-based approach for a more structured setup. It defines custom classes for the scene and mesh.

```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();
```

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

### Main.renderer

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the WebGLRenderer instance used for rendering the 3D scene.

```APIDOC
## renderer

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

### Returns
`WebGLRenderer`

### Defined in
[src/core/Main.ts:90](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L90)
```

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

### Main.enableCursor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets a boolean indicating whether to enable cursor handling in the application.

```APIDOC
## enableCursor

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

### Returns
`boolean`

### Defined in
[src/core/Main.ts:117](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L117)
```

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

### Main.multitouch

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets a boolean indicating whether to enable multitouch interactions.

```APIDOC
## multitouch

### Description
Indicates whether to enable multitouch interactions.

### Returns
`boolean`

### Defined in
[src/core/Main.ts:104](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L104)
```

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

### Main.backgroundAlpha

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the default alpha (transparency) value for the background.

```APIDOC
## backgroundAlpha

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

### Returns
`number`

### Defined in
[src/core/Main.ts:140](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L140)
```

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

### Main.backgroundColor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the default background color used in the application.

```APIDOC
## backgroundColor

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

### Returns
`ColorRepresentation`

### Defined in
[src/core/Main.ts:134](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L134)
```

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

### Main.dragButtons

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the mouse buttons that can be used for dragging objects.

```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](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L111)
```

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

### Main.raycaster

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the Raycaster instance responsible for handling raycasting operations in the application.

```APIDOC
## raycaster

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

### Returns
`Raycaster`

### Defined in
[src/core/Main.ts:129](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L129)
```

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

### Main.activeScene

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the Scene associated with the currently active RenderView.

```APIDOC
## activeScene

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

### Returns
`Scene`

### Defined in
[src/core/Main.ts:74](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L74)
```

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

### Main.activeView

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the currently active RenderView (activated by mouse position).

```APIDOC
## activeView

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

### Returns
[`RenderView`](Rendering.RenderView.md)

### Defined in
[src/core/Main.ts:69](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L69)
```

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

### screenX

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the X coordinate of the mouse pointer in global screen coordinates.

```APIDOC
## get screenX()

### Description
The X coordinate of the mouse pointer in global (screen) coordinates.

### Returns
`number`

### Inherited from
MouseEventExt.screenX

### Defined in
[src/events/Events.ts:194](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L194)
```

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

### Main Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Initializes a new instance of the Main class with optional configuration parameters.

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

### Description
Initializes a new instance of the Main class with optional configuration parameters.

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

### Defined in
[src/core/Main.ts:157](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L157)
```

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

### type

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.WheelEventExt.md

Gets the event type.

```APIDOC
## type

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

### Returns
keyof [`MiscEvents`](../interfaces/Events.MiscEvents.md) | keyof [`InteractionEvents`](../interfaces/Events.InteractionEvents.md)<`Object3D`<`Object3DEventMap`\}, `Object3D`<`Object3DEventMap`\}, `Object3D`<`Object3DEventMap`">> | keyof [`UpdateEvents`](../interfaces/Events.UpdateEvents.md)

### Inherited from
MouseEventExt.type
```

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

### Core.MainParameters

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/interfaces/Core.MainParameters.md

Configuration parameters for initializing the Main class.

```APIDOC
## Interface: MainParameters

Configuration parameters for initializing the Main class.

### Properties

#### `animate` (Optional)

- **Type**: `(delta: number, total: number) => void`
- **Description**: Callback function executed for each frame.

#### `backgroundAlpha` (Optional)

- **Type**: `number`
- **Description**: Default background alpha (transparency) value (default: 1).

#### `backgroundColor` (Optional)

- **Type**: `ColorRepresentation`
- **Description**: Default background color (default: 'black').

#### `disableContextMenu` (Optional)

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

#### `enableCursor` (Optional)

- **Type**: `boolean`
- **Description**: Enable cursor handling in the application (default: true).

#### `fullscreen` (Optional)

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

#### `multitouch` (Optional)

- **Type**: `boolean`
- **Description**: Enable multitouch interactions (default: false).

#### `rendererParameters` (Optional)

- **Type**: `WebGLRendererParameters`
- **Description**: Configuration parameters for the WebGLRenderer.

#### `showStats` (Optional)

- **Type**: `boolean`
- **Description**: Display performance statistics (default: true).

```

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

### type

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the event type identifier.

```APIDOC
## get type()

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

### Returns
keyof [`MiscEvents`](../interfaces/Events.MiscEvents.md) | keyof [`InteractionEvents`](../interfaces/Events.InteractionEvents.md)<`Object3D`<`Object3DEventMap`\}, `Object3D`<`Object3DEventMap`\}, `Object3D`<`Object3DEventMap`
als> | [`InstancedMeshEntity`](InstancedMesh.InstancedMeshEntity.md)
als> | keyof [`UpdateEvents`](../interfaces/Events.UpdateEvents.md)

### Inherited from
MouseEventExt.type

### Defined in
[src/events/Events.ts:126](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L126)
```

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

### Initialize three.ez with a Scene and Camera

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/index.md

Initializes the three.ez Main class, sets up a scene with a draggable and animatable box, and creates a render view with an auto-resizing perspective camera.

```typescript
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
```

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

### Main Class Configuration

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/getting-started/configuration.md

Instantiate the Main class with a configuration object to customize application behavior. This includes setting up animation loops, background colors, user interaction options, and renderer parameters.

```typescript
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
});
```

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

### Main.pointerOnCanvas

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets a boolean indicating if the pointer is over the canvas.

```APIDOC
## pointerOnCanvas

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

### Returns
`boolean`

### Defined in
[src/core/Main.ts:152](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L152)
```

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

### Main.mousePosition

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the current mouse position represented as a Vector2.

```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](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L147)
```

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

### InstancedEntity Methods

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh2.InstancedEntity.md

Includes methods for applying transformations to the instance, such as applying a Matrix4 or a Quaternion.

```APIDOC
## Methods

### applyMatrix4
▸ **applyMatrix4**(`m`): `InstancedEntity`

Applies the matrix transform to the object and updates the object's position, rotation, and scale.

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

#### Returns
- **InstancedEntity** - The instance of the object.

### applyQuaternion
▸ **applyQuaternion**(`q`): `InstancedEntity`

Applies the rotation represented by the quaternion to the object.

#### Parameters
- **q** (Quaternion) - Required - Quaternion to apply.

#### Returns
- **InstancedEntity** - The instance of the object.

### forceUpdateMatrix
▸ **forceUpdateMatrix**(): `void`

Force local transformation update.
```

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

### Create and Configure a RenderView

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/rendering/how-it-works.md

Use the `createView` method of the `Main` class to add a new RenderView. This method requires scene and camera objects and accepts optional parameters for background, post-processing, event handling, and viewport configuration.

```typescript
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
  }
});
```

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

### Import three.ez from CDN

Source: https://github.com/agargaro/three.ez/blob/master/README.md

Import the three.ez library from a CDN using a script tag with import maps.

```html
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three/examples/jsm/",
    "@three.ez/main": "https://cdn.jsdelivr.net/npm/@three.ez/main/build/index.js"
  }
}
</script>
```

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

### target

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.WheelEventExt.md

Gets a reference to the object to which the event was originally dispatched.

```APIDOC
## target

### Description
A reference to the object to which the event was originally dispatched.

### Returns
`T`

### Inherited from
MouseEventExt.target
```

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

### Tween.start

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Tweening.Tween.md

Initiates the execution of the Tween and returns a `RunningTween` instance. This instance can be used to control the playback of the animation, such as pausing or stopping it.

```APIDOC
## Tween.start

### Description
Start the Tween and create a RunningTween instance.

### Method
start

### Returns
- **RunningTween<T>** - A RunningTween instance that controls the execution of the Tween.
```

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

### TweenManager.completeAll

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Tweening.TweenManager.md

Completes all currently running tweens immediately.

```APIDOC
## TweenManager.completeAll

### Description
Completes all running tweens.

### Method
Static

### Endpoint
N/A (Class method)

### Parameters
None

### Returns
`void`
```

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

### Main.activeCamera

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the Camera associated with the currently active RenderView.

```APIDOC
## activeCamera

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

### Returns
`Camera`

### Defined in
[src/core/Main.ts:79](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L79)
```

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

### screenY

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the Y coordinate of the mouse pointer in global screen coordinates.

```APIDOC
## get screenY()

### Description
The Y coordinate of the mouse pointer in global (screen) coordinates.

### Returns
`number`

### Inherited from
MouseEventExt.screenY

### Defined in
[src/events/Events.ts:196](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L196)
```

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

### OrthographicCameraAuto Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Cameras.OrthographicCameraAuto.md

Initializes a new instance of the OrthographicCameraAuto class. This constructor allows setting the camera's size, whether the size refers to width or height, and the near and far clipping planes.

```APIDOC
## new OrthographicCameraAuto(size?, fixedWidth?, near?, far?)

### Description
Initializes a new instance of the OrthographicCameraAuto class. This constructor allows setting the camera's size, whether the size refers to width or height, and the near and far clipping planes.

### Parameters
#### Parameters
- **size** (number) - Optional - Fixed width or height dimension based on the 'fixedWidth' property. Default `2`.
- **fixedWidth** (boolean) - Optional - If true, the 'size' property will refer to the width. If not, to the height. Default `true`.
- **near?** (number) - Optional - Camera frustum near plane. Default `0.1`.
- **far?** (number) - Optional - Camera frustum far plane. Default `2000`.

### Overrides
OrthographicCamera.constructor

### Defined in
src/cameras/OrthographicCameraAuto.ts:36
```

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

### PerspectiveCameraAuto Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Cameras.PerspectiveCameraAuto.md

Initializes a new instance of the PerspectiveCameraAuto class. This constructor allows for optional field of view, near, and far plane distance parameters.

```APIDOC
## constructor 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](https://github.com/agargaro/three.ez/blob/0027204/src/cameras/PerspectiveCameraAuto.ts#L13)
```

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

### Simplified InstancedMesh Creation and Manipulation

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/index.md

Create and manage InstancedMesh instances easily, similar to Object3D. Supports direct manipulation of individual instances and frustum culling.

```typescript
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();
```

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

### PerspectiveCameraAuto Methods

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Cameras.PerspectiveCameraAuto.md

Provides methods for managing the focus state of the object, applying blur, and binding properties for dynamic updates.

```APIDOC
## Methods

### applyBlur

▸ **applyBlur**(): `void`

Applies blur (removes focus) from the object.

#### Returns

`void`

### applyFocus

▸ **applyFocus**(): `void`

Applies focus to the object.

#### Returns

`void`

### bindProperty

▸ **bindProperty**<`T`">(`property`, `getCallback`, `renderOnChange?`): [`PerspectiveCameraAuto`](Cameras.PerspectiveCameraAuto.md)

Binds a property to a callback function for updates.

#### Type parameters

| Name | Type |
| :------ | :------ |
| `T` | extends keyof [`PerspectiveCameraAuto`](Cameras.PerspectiveCameraAuto.md) |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `property` | `T` | The name of the property to bind. |
| `getCallback` | () => [`PerspectiveCameraAuto`](Cameras.PerspectiveCameraAuto.md)[`T`] | A function that retrieves the property's value. |
| `renderOnChange?` | `boolean` | Indicates whether to render when the property changes (optional, default: `false`). |

#### Returns

[`PerspectiveCameraAuto`](Cameras.PerspectiveCameraAuto.md)

The instance of the object with the binding applied.

### detectChanges

▸ **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` | If true, calculate bindings for children as well (optional, default: `false`). |

#### Returns

`void`

### hasEvent

▸ **hasEvent**<`K`">(`type`, `listener`): `boolean`

Checks if the object has a specific event listener.

```

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

### width

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the width of the pointer's contact geometry in CSS pixels.

```APIDOC
## get width()

### Description
The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.

### Returns
`number`

### Defined in
[src/events/Events.ts:231](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L231)
```

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

### Create Multiple Render Views

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/rendering/multiple-rendering.md

Instantiate multiple RenderView objects for distinct scenes and cameras. Control initial visibility using the 'visible' property.

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

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

### CDN Import Map Configuration

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/index.md

Configure import maps to use the three.ez library from a CDN, specifying versions for Three.js and the library itself.

```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>
```

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

### Main.activeComposer

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets the EffectComposer (used for post-processing) associated with the currently active RenderView.

```APIDOC
## activeComposer

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

### Returns
`EffectComposer`

### Defined in
[src/core/Main.ts:84](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L84)
```

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

### InstancedMeshEntity Methods

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh.InstancedMeshEntity.md

These methods allow manipulation and interaction with the InstancedMeshEntity.

```APIDOC
## Methods

### applyBlur

▸ **applyBlur**(): `void`

Applies blur (removes focus) from the object.

### applyFocus

▸ **applyFocus**(): `void`

Applies focus to the object.

### applyMatrix4

▸ **applyMatrix4**(`m`): [`InstancedMeshEntity`]

Applies the matrix transform to the object and updates the object's position, rotation, and scale.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `m` | `Matrix4` | Matrix to apply. |

#### Returns

[`InstancedMeshEntity`]

The instance of the object.

### applyQuaternion

▸ **applyQuaternion**(`q`): [`InstancedMeshEntity`]

Applies the rotation represented by the quaternion to the object.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `q` | `Quaternion` | Quaternion to apply. |

#### Returns

[`InstancedMeshEntity`]

The instance of the object.

### getColor

▸ **getColor**(`color?`): `Color`

Gets the color of this instance.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `color` | `Color` | An optional target Color object to store the result (optional). |

#### Returns

`Color`

The color representation of this instance.

### hasEvent

▸ **hasEvent**<`K`
>(`type`, `listener`): `boolean`

Checks if the object has a specific event listener.

#### Type parameters

| Name | Type |
| :------ | :------ |
| `K` | extends ``"animate"`` | ``"blur"`` | ``"click"`` | ``"dblclick"`` | ``"drag"`` | ``"dragend"`` | ``"dragstart"`` | ``"focus"`` | ``"keydown"`` | ``"keyup"`` | ``"pointerdown"`` | ``"pointermove"`` | ``"pointerout"`` | ``"pointerover"`` | ``"pointerup"`` | ``"wheel"`` | ``"pointerintersection"`` | ``"dragcancel"`` |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `type` | `K` | The type of event to check for. |
| `listener` | (`event?`: `InstancedEvents`[`K`]) => `void` | The callback function to check. |

#### Returns

`boolean`

`true` if the event listener is attached; otherwise, `false`.
```

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

### getColor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh2.InstancedEntity.md

Gets the color of this instance. Optionally stores the result in a provided Color object.

```APIDOC
## getColor

### Description
Gets the color of this instance. Optionally stores the result in a provided Color object.

### Method
GET (conceptual)

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

### Returns
#### Success Response
- **Color** - The color representation of this instance.

### Response Example
{
  "example": "Color object representing the instance's color"
}
```

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

### InstancedMesh2 Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh2.InstancedMesh2.md

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

```APIDOC
## constructor

### new InstancedMesh2<T, G, M>(geometry: G, material: M, count: number, config: InstancedMesh2Params<T>)

#### 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.
```

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

### Interface: Resource

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/interfaces/Utils.Resource.md

Represents a resource with a specified loader type and an array of paths or configurations.

```APIDOC
## Interface: Resource

An interface representing a resource, specifying the loader type and paths to be loaded.

### Properties

#### loader

- **loader** (Object) - The type of loader to use for this resource.

#### paths

- **paths** (Array<string | ResourceConfig>) - An array of resource paths or configurations to be loaded by the loader.

#### Defined in

- src/utils/Asset.ts:28
- src/utils/Asset.ts:32
```

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

### twist

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the clockwise rotation of the pointer around its major axis in degrees (0 to 359).

```APIDOC
## get twist()

### Description
The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359.

### Returns
`number`

### Defined in
[src/events/Events.ts:243](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L243)
```

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

### ResourceConfig Interface

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/interfaces/Utils.ResourceConfig.md

Represents the configuration for a resource, specifying its path and an optional callback for load completion.

```APIDOC
## Interface: ResourceConfig

An interface representing the configuration of a resource, including its path and optional callbacks.

### Properties

#### path

- **path** (string) - The path to the resource that needs to be loaded.

#### onLoad

- **onLoad** ((result: unknown) => void) - A callback function to be called when the resource is successfully loaded.
  - Parameters:
    - **result** (unknown) - The result of the resource loading.
  - Returns: void
```

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

### Main.raycasterSortComparer

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Gets a custom sorting comparer function used to order intersections when performing raycasting.

```APIDOC
## raycasterSortComparer

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

### Returns
[`RaycasterSortComparer`](../namespaces/Events.md#raycastersortcomparer)

### Defined in
[src/core/Main.ts:123](https://github.com/agargaro/three.ez/blob/0027204/src/core/Main.ts#L123)
```

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

### Asset.preload

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Utils.Asset.md

Preloads resources using a specified loader and an array of paths or resource configurations.

```APIDOC
## Static preload(loader: Object, ...paths: (string | ResourceConfig)[]): void

### Description
Preload resources for future use.

### Parameters
* `loader` (Object) - The loader type to be used for preloading.
* `...paths` (`string` | `ResourceConfig`)[] - An array of resource paths or configurations to preload.

### Returns
`void`
```

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

### Tween.setTarget

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Tweening.Tween.md

Specifies the target object to which the tween's animations will be applied. This must be set before starting the tween.

```APIDOC
## Tween.setTarget

### Description
Set the target object for the Tween.

### Method
setTarget

### Parameters
#### Request Body
- **target** (T) - Required - The object to apply the tween to.

### Returns
- **Tween<T>** - The updated Tween instance.
```

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

### on

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh.InstancedMesh2.md

Attaches an event listener to the object.

```APIDOC
## on

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

### Method
on<K>(type: K, listener: (event?: Events[K]) => void): (event?: Events[K]) => void

### Parameters
#### Path Parameters
- **type** (K) - Required - The type of event to attach the listener to.
- **listener** ((event?: Events[K]) => void) - Required - The callback function to execute when the event is triggered.

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

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

### tiltX

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the plane angle in degrees (range -90 to 90) between the Y-Z plane and the pointer's axis relative to the Y axis.

```APIDOC
## get tiltX()

### Description
The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.

### Returns
`number`

### Defined in
[src/events/Events.ts:239](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L239)
```

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

### Asset.loadAll

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Utils.Asset.md

Loads multiple specified resources concurrently and returns a promise that resolves once all are loaded.

```APIDOC
## Static loadAll(config?: LoadingConfig, ...resources: Resource[]): Promise<void[]>

### Description
Load all specified resources and return a promise that resolves when all resources are loaded.

### Parameters
* `config` (optional) (`LoadingConfig`) - Configuration for the loading process.
* `...resources` (`Resource[]`) - An array of resource objects to load.

### Returns
`Promise<void[]>` - A promise that resolves when all resources are loaded.
```

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

### tangentialPressure

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the normalized tangential pressure of the pointer input, ranging from -1 to 1. A value of 0 indicates the neutral position.

```APIDOC
## get tangentialPressure()

### Description
The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.

### Returns
`number`

### Defined in
[src/events/Events.ts:237](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L237)
```

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

### activeSmartRendering

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/interfaces/Patch.SceneExtPrototype.md

Activates smart rendering for the scene, returning the updated scene instance.

```APIDOC
## activeSmartRendering

### Description
Activates smart rendering for the scene.

### Method
`activeSmartRendering()`

### Returns
- `SceneExtPrototype`: The updated instance of the scene.

### Defined in
`src/patch/Scene.ts:46`
```

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

### tiltY

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the plane angle in degrees (range -90 to 90) between the X-Z plane and the pointer's axis relative to the X axis.

```APIDOC
## get tiltY()

### Description
The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.

### Returns
`number`

### Defined in
[src/events/Events.ts:241](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L241)
```

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

### pressure

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.PointerEventExt.md

Gets the normalized pressure of the pointer input. The value ranges from 0 to 1, representing the minimum and maximum pressure detectable by the hardware.

```APIDOC
## get pressure()

### Description
The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.

### Returns
`number`

### Defined in
[src/events/Events.ts:235](https://github.com/agargaro/three.ez/blob/0027204/src/events/Events.ts#L235)
```

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

### preloadAllPending

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Utils.Asset.md

Preload all pending resources and return a promise that resolves when all resources are loaded.

```APIDOC
## preloadAllPending

### Description
Preload all pending resources and return a promise that resolves when all resources are loaded.

### Method Signature
`Static` **preloadAllPending**(`config?`): `Promise`<`void`[]>

### Parameters
- **config** (LoadingConfig) - Optional - Optional configuration for the loading process.

### Returns
`Promise`<`void`[]> - A promise that resolves when all pending resources are loaded.
```

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

### getNodes

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Utils.Utils.md

Retrieves a map of objects in the scene graph (Object3D) starting from a root object. Each object is mapped using its unique name as the key in the resulting object.

```APIDOC
## getNodes

### Description
Retrieves a map of objects in the scene graph (Object3D) starting from a root object. Each object is mapped using its unique name as the key in the resulting object.

### Method
Static

### Parameters
#### Path Parameters
- **target** (Object3D<Object3DEventMap>) - Required - The root object to begin generating the object map from.

### Returns
`Nodes` - An object containing objects mapped by their names.
```

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

### InstancedMesh2 Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh.InstancedMesh2.md

Initializes a new instance of the InstancedMesh2 class. This constructor allows for the creation of an instanced mesh where each instance can be managed individually.

```APIDOC
## constructor

### new InstancedMesh2(geometry, material, count, singleInstanceType, animate?, color?)

#### Parameters

- **geometry** (BufferGeometry<NormalBufferAttributes>) - The geometry for the instanced mesh.
- **material** (Material) - The material to apply to the instanced mesh.
- **count** (number) - The number of instances to create.
- **singleInstanceType** (typeof InstancedMeshEntity) - The type of individual instance to create.
- **animate** (boolean, optional) - A flag indicating whether the 'animate' event will be triggered for each instance. Defaults to false.
- **color?** (ColorRepresentation) - The default color to apply to each instance (optional).
```

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

### tween

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.Hitbox.md

Initiates a Tween animation for the object. You can optionally provide an ID to manage multiple tweens on the same object, stopping the old one if a new tween with the same ID is started.

```APIDOC
## tween<T>

### Description
Initiates a Tween animation for the object.

### Method
(Implicitly invoked on an object)

### Parameters
#### Query Parameters
- **id** (string) - Optional - Unique identifier. If you start a new tween, the old one with the same id (if specified) will be stopped.

### Returns
- **Tween<T>** - A Tween instance for further configuration.

### Type Parameters
- **T** extends `Object3D<Object3DEventMap>` = `Object3D<Object3DEventMap>` - The type of the target.
```

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

### InstancedMesh2 Methods

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh2.InstancedMesh2.md

Methods available on the InstancedMesh2 class for managing focus and binding properties.

```APIDOC
## Methods

### applyBlur

▸ **applyBlur**(): `void`

Applies blur (removes focus) from the object.

#### Returns

`void`

#### Inherited from

InstancedMesh.applyBlur

#### Defined in

[src/patch/Object3D.ts:86](https://github.com/agargaro/three.ez/blob/0027204/src/patch/Object3D.ts#L86)

---

### applyFocus

▸ **applyFocus**(): `void`

Applies focus to the object.

#### Returns

`void`

#### Inherited from

InstancedMesh.applyFocus

#### Defined in

[src/patch/Object3D.ts:82](https://github.com/agargaro/three.ez/blob/0027204/src/patch/Object3D.ts#L82)

---

### bindProperty

▸ **bindProperty**<`T`>(`property`, `getCallback`, `renderOnChange?`): [`InstancedMesh2`](InstancedMesh2.InstancedMesh2.md)<`T`, `G`, `M`>

Binds a property to a callback function for updates.

#### Type parameters

| Name | Type |
| :------ | :------ |
| `T` | extends keyof [`InstancedMesh2`](InstancedMesh2.InstancedMesh2.md)<`T`, `G`, `M`> |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `property` | `T` | The name of the property to bind. |
| `getCallback` | (`value`: `any`) => `void` | The callback function to execute when the property changes. |
| `renderOnChange`? | `boolean` | Optional flag to indicate if rendering should occur on change. |
```

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

### FocusEventExt Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Events.FocusEventExt.md

Initializes a new instance of the FocusEventExt class. It accepts a related target as a parameter.

```APIDOC
## new FocusEventExt<T, R>(relatedTarget)

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

### Parameters
#### Parameters
- **relatedTarget** (R) - The secondary target for the event.
```

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

### Bind Object3D Property Automatically

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/binding.md

Use `bindProperty` to automatically update a property at the end of each animation cycle. This example makes the box's visibility dependent on its parent's enabled state.

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

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

### OrthographicCameraAuto Methods

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Cameras.OrthographicCameraAuto.md

This section details the methods available on the OrthographicCameraAuto class, including inherited methods and those specific to this class.

```APIDOC
## Methods

### applyBlur

▸ **applyBlur**(): `void`

Applies blur (removes focus) from the object.

#### Returns

`void`

#### Inherited from

OrthographicCamera.applyBlur

#### Defined in

[src/patch/Object3D.ts:86](https://github.com/agargaro/three.ez/blob/0027204/src/patch/Object3D.ts#L86)

---

### applyFocus

▸ **applyFocus**(): `void`

Applies focus to the object.

#### Returns

`void`

#### Inherited from

OrthographicCamera.applyFocus

#### Defined in

[src/patch/Object3D.ts:82](https://github.com/agargaro/three.ez/blob/0027204/src/patch/Object3D.ts#L82)

---

### bindProperty

▸ **bindProperty**<`T`">(`property`, `getCallback`, `renderOnChange?`): [`OrthographicCameraAuto`](Cameras.OrthographicCameraAuto.md)

Binds a property to a callback function for updates.

#### Type parameters

| Name | Type |
| :------ | :------ |
| `T` | extends keyof [`OrthographicCameraAuto`](Cameras.OrthographicCameraAuto.md) |

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `property` | `T` | The name of the property to bind. |
| `getCallback` | () => [`OrthographicCameraAuto`](Cameras.OrthographicCameraAuto.md)[`T`] | A function that retrieves the property's value. |
| `renderOnChange?` | `boolean` | Indicates whether to render when the property changes (optional, default: `false`). |

#### Returns

[`OrthographicCameraAuto`](Cameras.OrthographicCameraAuto.md)

The instance of the object with the binding applied.

#### Inherited from

OrthographicCamera.bindProperty

#### Defined in

[src/patch/Object3D.ts:138](https://github.com/agargaro/three.ez/blob/0027204/src/patch/Object3D.ts#L138)

---

```

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

### createView

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Core.Main.md

Creates a new RenderView and adds it to the RenderManager.

```APIDOC
## createView

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

### Method
POST

### Endpoint
/core/main/createView

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

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

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

### Enable and Use Smart Rendering

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/rendering/smart-rendering.md

Enables smart rendering for a scene and demonstrates manual update of the needsRender flag for color changes on a draggable object.

```typescript
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);
```

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

### Preload a Single Resource for Later Use

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/tutorial/asset-management.md

Preload a specific resource using its loader and path. This is useful for loading assets in one file and using them in another. The asset can be retrieved later using `Asset.get()`.

```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);
  }
}
```

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

### Tween.then

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/Tweening.Tween.md

Chains another Tween to execute after the current Tween completes. This allows for creating a series of animations that follow each other.

```APIDOC
## Tween.then

### Description
Chain another Tween to execute after this Tween.

### Method
then

### Parameters
#### Request Body
- **tween** (Tween<T>) - Required - The Tween to chain.

### Returns
- **Tween<T>** - The updated Tween instance.
```

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

### InstancedEntity Constructor

Source: https://github.com/agargaro/three.ez/blob/master/docs/docs/api/classes/InstancedMesh2.InstancedEntity.md

Initializes a new InstancedEntity. This constructor is used internally by InstancedMesh2 to create individual instances.

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

### Description
Initializes a new InstancedEntity.

### 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.
```