### Reference Code Example in Docs

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/CONTRIBUTE.md

Reference a code example in your documentation using the <Example /> component with the 'path' prop. The 'path' prop is the directory path relative to src/examples.

```html
<Example path="myExample" />
```

```markdown
| Prop             | Type    | Default  | Description                             |
| ---------------- | ------- | -------- | --------------------------------------- |
| `path`           | string  | required | Directory path relative to src/examples |
| `hideCode`       | boolean | `false`  | Hides the source code section           |
| `hidePreview`    | boolean | `false`  | Hides the example preview               |
| `hideStackblitz` | boolean | `false`  | Hides "Open in Stackblitz" button       |
```

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

### Install via npm

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/getting-started/01-installation.mdx

Use this command to install the package using npm.

```sh
npm install @three.ez/instanced-mesh
```

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

### Create Code Example

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/CONTRIBUTE.md

Create a new example directory and write your Three.js code in index.ts. Maximum 2 levels of nesting are allowed.

```bash
code src/examples/myExample/index.ts
```

```typescript
import { Scene, PerspectiveCamera } from 'three';

// Your Three.js example code here
```

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

### Install via yarn

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/getting-started/01-installation.mdx

Use this command to install the package using yarn.

```sh
yarn add @three.ez/instanced-mesh
```

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

### Install via pnpm

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/getting-started/01-installation.mdx

Use this command to install the package using pnpm.

```sh
pnpm add @three.ez/instanced-mesh
```

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

### Add Documentation Pages

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/CONTRIBUTE.md

Specify the directory based on content type (guides, reference, tutorials, concepts) and include required frontmatter with title and description.

```bash
src/content/docs/guides/     # For how-to guides
src/content/docs/reference/  # For technical reference
src/content/docs/tutorials/  # For tutorials
src/content/docs/concepts/   # For explanations
```

```markdown
---
title: Your Page Title
description: Brief description
---
```

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

### Install via CDN with Import Map

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/getting-started/01-installation.mdx

Include this script tag in your HTML file to load the library directly from a CDN. This sets up import aliases for three.js and related libraries.

```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/instanced-mesh": "https://cdn.jsdelivr.net/npm/@three.ez/instanced-mesh/build/index.js",
    "bvh.js": "https://cdn.jsdelivr.net/npm/bvh.js/build/index.js"
  }
}
</script>
```

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

### Development Scripts

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/CONTRIBUTE.md

Run development and build scripts using npm. 'npm run dev' provides hot reload, 'npm run start' for production preview, and 'npm run build' for production build.

```bash
npm run dev     # Dev mode with hot reload
npm run start   # Production preview
npm run build   # Production build
```

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

### Tweening Instanced Entity Properties

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/04-tween.mdx

This example demonstrates how to apply tween animations to properties of instanced entities. It assumes you have already created an array of instances. Note that the 'color' property cannot be tweened.

```javascript
<Example path='tween'/>
```

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

### Initialize Skeleton and Set Bones

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Apply skeletal animations to instances by initializing the skeleton and then setting the bones for each instance. The mixer needs to be updated with time for animations to progress.

```typescript
myInstancedMesh.initSkeleton(skeleton);

mixer.update(time);
myInstancedMesh.setBonesAt(index);
```

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

### Instantiate and Add Instances with InstancedMesh2

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Initialize InstancedMesh2 with geometry and material, then add a specified number of instances, configuring each instance's properties using a callback function.

```typescript
const myInstancedMesh = new InstancedMesh2(geometry, material);

myInstancedMesh.addInstances(count, (obj, index) => {
  obj.position.x = index;
});
```

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

### Initialize InstancedMesh2

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/getting-started/02-first-instancedmesh2.mdx

Create a new InstancedMesh2 instance. Requires a geometry and a material.

```typescript
const iMesh = new InstancedMesh2(geometry, material);
```

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

### Add Custom Data to Instances (JavaScript)

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/05-custom-data.mdx

This JavaScript snippet demonstrates how to assign custom data, such as a UUID, to each instance during creation with `addInstances`.

```javascript
const iMesh = new InstancedMesh2(geo, mat, { createEntities: true });

iMesh.addInstances(count, (obj, index) => {
    obj.uuid = MathUtils.generateUUID();
});
```

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

### Animate All Instances using updateInstances

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/02-animation.mdx

The recommended method for animating all active instances. This method automatically handles matrix updates. Be aware that if instances are not created as an array, transformations might reset.

```typescript
this.updateInstances((obj) => {
  instance.scale.x += 0.1;
});
```

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

### Initialize InstancedMesh2 with Capacity

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/00-add-remove.mdx

Set the initial buffer capacity when creating a new InstancedMesh2 to pre-allocate memory. Buffers expand automatically if capacity is not specified.

```typescript
const iMesh = new InstancedMesh2(geo, mat, { capacity: 10000 });
```

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

### Initialize and Set Per-Instance Uniforms

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Assign unique shader uniforms to each instance. This works with all materials. Uniforms can be initialized for fragment or vertex shaders and then set per instance by index or directly on the instance object.

```typescript
myInstancedMesh.initUniformsPerInstance({ fragment: { metalness: 'float', roughness: 'float', emissive: 'vec3' } });

myInstancedMesh.setUniformAt(index, 'metalness', 0.5);
myInstancedMesh.instances[0].setUniform('emissive', new Color('white')); // if instances array is created
```

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

### Custom Frustum Enter Callback

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/06-frustum-culling.mdx

Implement a callback function that is executed for each instance entering the camera's frustum. Return true to render the instance; this is useful for conditional rendering based on distance.

```typescript
iMesh.onFrustumEnter = (index, camera) => {
  // render only if not too far away
  return iMesh.getPositionAt(index).distanceTo(camera.position) <= maxDistance;
};
```

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

### InstancedMesh2 with Dynamic Capacity

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Instantiate InstancedMesh2 with a specified capacity. Use addInstances to add new instances, which will expand the buffer if necessary. removeInstances and clearInstances manage existing instances.

```typescript
const myInstancedMesh = new InstancedMesh2(geometry, material, { capacity: count }); 

myInstancedMesh.addInstances(count, (obj, index) => { ... }); // add instances and expand buffer if necessary

myInstancedMesh.removeInstances(id0, id1, ...);

myInstancedMesh.clearInstances(); // remove all instances
```

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

### Enable InstancedEntity Creation

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/01-Instancedentity.mdx

Set the `createEntities` flag to `true` in the InstancedMesh2 constructor parameters to automatically generate InstancedEntity objects for each instance.

```typescript
const iMesh = new InstancedMesh2(geo, mat, { createEntities: true });
```

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

### Set Per-Instance Opacity

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Adjust the opacity of individual instances. For best results, enable instance sorting and disable depth writing on the material.

```typescript
myInstancedMesh.setOpacityAt(index, 0.5);
myInstancedMesh.instances[0].opacity = 0.5; // if instances array is created
```

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

### InstancedMesh2 with Object3D-like Instances

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Create InstancedMesh2 with entities that mimic Object3D behavior. Transformations on these entities require an explicit call to updateMatrix().

```typescript
const myInstancedMesh = new InstancedMesh2(geometry, material, { createEntities: true });

myInstancedMesh.instances[0].customData = {};
myInstancedMesh.instances[0].position.random();
myInstancedMesh.instances[0].rotateX(Math.PI);
myInstancedMesh.instances[0].updateMatrix(); // necessary after transformations
```

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

### Enable Instance Sorting

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/07-sorting.mdx

Set `iMesh.sortObjects` to `true` to enable automatic sorting of instances. This is useful for avoiding GPU overdraw and correctly rendering transparent objects. The default value is `false`.

```typescript
iMesh.sortObjects = true; // default is false
```

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

### Add Shadow Level of Detail (LOD)

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Optimize shadow rendering by adding simplified geometries for instances that cast shadows, based on their distance from the camera.

```typescript
myInstancedMesh.addShadowLOD(geometryMid);
myInstancedMesh.addShadowLOD(geometryLow, 100);
```

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

### Set Per-Instance Visibility

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Control the visibility of individual instances. This can be done by index or directly on the instance object if the instances array is created.

```typescript
myInstancedMesh.setVisibilityAt(index, false);
myInstancedMesh.instances[0].visible = false; // if instances array is created
```

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

### Add Custom Data to Instances (TypeScript)

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/05-custom-data.mdx

Use this TypeScript snippet to add custom data, like a UUID, to each instance when creating them. Ensure the `CustomData` type is defined.

```typescript
type CustomData = { uuid: string };

const iMesh = new InstancedMesh2<CustomData>(geo, mat, { createEntities: true });

iMesh.addInstances(count, (obj, index) => {
    obj.uuid = MathUtils.generateUUID();
});
```

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

### Add Level of Detail (LOD)

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Implement Level of Detail (LOD) by adding simplified geometries for instances at certain distances from the camera. This improves rendering performance by reducing the detail of distant objects.

```typescript
myInstancedMesh.addLOD(geometryMid, material, 50);
myInstancedMesh.addLOD(geometryLow, material, 200);
```

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

### Add Instances to InstancedMesh2

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/00-add-remove.mdx

Add a specified number of instances to the mesh. A callback function can be provided to configure each added instance, such as setting its position or rotation.

```typescript
iMesh.addInstances(count, (obj, index) => {
  obj.position.x = index;
  obj.quaternion.random();
});
```

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

### Add and Position Instances

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/getting-started/02-first-instancedmesh2.mdx

Add a specified number of instances to the InstancedMesh2. The callback function allows you to set properties like position for each instance based on its index.

```typescript
iMesh.addInstances(count, (obj, index) => {
  obj.position.x = index;
});
```

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

### Compute BVH for Spatial Indexing

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Compute a Bounding Volume Hierarchy (BVH) for efficient spatial indexing, useful for raycasting and frustum culling. A margin can speed up BVH updates at the cost of slight performance reduction in raycasting and culling.

```typescript
myInstancedMesh.computeBVH({ margin: 0 }); // margin is optional
```

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

### Access and Modify Instance Properties

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/01-Instancedentity.mdx

Use the InstancedEntity associated with an instance to modify its properties like position and rotation. Remember to call `updateMatrix()` after making transformations.

```typescript
iMesh.instances[index].position.random();
iMesh.instances[index].rotateX(Math.PI);
iMesh.instances[index].updateMatrix(); // Required after transformations
```

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

### Enable Euler Rotation Property

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/03-euler.mdx

Set the `allowsEuler` flag to true in the InstancedMesh2 constructor to enable the rotation property for Euler angles. This allows direct manipulation of rotation using Euler, but incurs a minor performance cost for synchronization.

```typescript
const iMesh = new InstancedMesh2(geo, mat, { createEntities: true, allowsEuler: true });
```

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

### Use Custom Radix Sort

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/07-sorting.mdx

Replace the default sorting algorithm with a custom one, such as radix sort, for potentially faster performance. Ensure `createRadixSort` is available in your scope.

```typescript
iMesh.customSort = createRadixSort(iMesh);
```

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

### Animate Multiple Instances with a for loop

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/02-animation.mdx

Iterate through active instances and update their properties, such as position, within a for loop. Use `updateMatrixPosition()` for performance when only position is changed.

```typescript
for (const instance of iMesh.instances) {
  if (instance.active) { // if isn't removed
    instance.position.x += 0.1;
    instance.updateMatrixPosition();
  }
}
```

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

### Enable Raycast Only Frustum

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

To optimize raycasting when not using a BVH, set `raycastOnlyFrustum` to true. This prevents the iteration over all instances during raycasting.

```typescript
myInstancedMesh.raycastOnlyFrustum = true;
```

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

### Clear All Instances

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/00-add-remove.mdx

Remove all instances from the InstancedMesh2, effectively resetting it.

```typescript
iMesh.clearInstances();
```

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

### Enable Frustum Culling

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/06-frustum-culling.mdx

Set this property to true to enable frustum culling. It is enabled by default.

```typescript
iMesh.perObjectFrustumCulled = true;
```

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

### Enable Sorting and Custom Sort

Source: https://github.com/agargaro/instanced-mesh/blob/master/README.md

Enable object sorting to decrease overdraw and render transparent objects correctly. A custom sort function, like the built-in `createRadixSort`, can further improve performance.

```typescript
import { createRadixSort } from '@three.ez/instanced-mesh';

myInstancedMesh.sortObjects = true;
myInstancedMesh.customSort = createRadixSort(myInstancedMesh);
```

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

### Disable Autoupdate and Manual Rendering

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/07-sorting.mdx

Disable automatic frustum culling and sorting before each render by setting `iMesh.autoUpdate` to `false`. You can then manually trigger these operations using `performFrustumCulling`.

```typescript
iMesh.autoUpdate = false;

// compute frustum culling and sorting manually
iMesh.performFrustumCulling(camera);
```

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

### Enable Raycasting Only Frustum

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/08-raycasting.mdx

Set `raycastOnlyFrustum` to true to iterate only instances rendered in the previous frame. This property is ignored if a BVH has been built.

```typescript
iMesh.raycastOnlyFrustum = true;
```

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

### Remove Instances by ID

Source: https://github.com/agargaro/instanced-mesh/blob/master/docs/src/content/docs/basics/00-add-remove.mdx

Remove instances from the mesh using their unique IDs. Removed instance IDs are stored in a pool and reused for subsequent additions.

```typescript
iMesh.removeInstances(id0, id1, ...);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.