Use Rotation Property

Managing Rotation in InstancedEntity

By default, rotation in InstancedEntity is handled using quaternion, while the rotation property (of type Euler) is disabled.

This design choice avoids the computational overhead of keeping quaternion and rotation synchronized, as both representations must be updated simultaneously for consistency.

Enabling the rotation Property

If you prefer to work with Euler angles instead of quaternions, you can enable the rotation property by setting the allowsEuler flag in the constructor:

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

Enabling this option allows you to modify rotation using Euler angles but comes with a minor performance trade-off due to the additional synchronization required.

Example

In this example, each instance is rotated using the rotation property:

• app.ts
• index.ts

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

const geo = new TorusKnotGeometry();
const mat = new MeshStandardMaterial()
const options: Params = { createEntities: true, allowsEuler: true };
export const torusKnots = new InstancedMesh2(geo, mat, options);

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

torusKnots.on('animate', (e) => {
  for (const instance of torusKnots.instances) {
    instance.rotation.z += e.delta;
    instance.updateMatrix();
  }
});

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