Your First InstancedMesh2

Initializing InstancedMesh2

Start by initializing an InstancedMesh2:

const iMesh = new InstancedMesh2(geometry, material);

Adding and Positioning Instances

Next, add instances and set their positions:

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

Note

The obj used in the callback is an InstancedEntity, an object similar to Object3D, allowing transformations and custom data.

Example

In this example, an InstancedMesh2 is instantiated with 9 instances, each positioned and colored:

Note

All examples use the @three.ez/main package to simplify application development.
However, InstancedMesh2 is fully compatible with other libraries.

• app.ts
• index.ts

import { InstancedMesh2 } from '@three.ez/instanced-mesh';
import { MeshStandardMaterial, TorusKnotGeometry } from 'three';

const geo = new TorusKnotGeometry();
const mat = new MeshStandardMaterial()
export const torusKnots = new InstancedMesh2(geo, mat);

torusKnots.addInstances(9, (obj, index) => {
  obj.position.x = (index % 3 - 1) * 5;
  obj.position.y = (Math.trunc(index / 3) - 1) * 5;
  obj.quaternion.random();
  obj.color = Math.random() * 0xffffff;
});

import { Scene, DirectionalLight, AmbientLight } from 'three';
import { Main, PerspectiveCameraAuto } from '@three.ez/main';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { torusKnots } from './app.js';

const main = new Main();
const camera = new PerspectiveCameraAuto().translateZ(20);
const scene = new Scene().add(torusKnots);
main.createView({ scene, camera });

const controls = new OrbitControls(camera, main.renderer.domElement);
controls.update();

const ambientLight = new AmbientLight('white', 0.8);
scene.add(ambientLight);

const dirLight = new DirectionalLight('white', 2);
dirLight.position.set(0.5, 0.866, 0);
camera.add(dirLight);