three.js, 이동, 회전, 스케일에 대한 행렬 만들기

2가지 방식이 있습니다. 먼저 Object3D의 position, scale, rotation을 지정해 행렬을 뽑아내는 다음의 방식입니다.

const matrixArray = new Float32Array(count * 16);
const matrixBuffer = new THREE.InstancedBufferAttribute(matrixArray, 16);

const dummy = new THREE.Object3D();

for (let i = 0; i < count; i++) {
  dummy.position.set(i * 2, 0, 0);
  dummy.rotation.y = Math.PI * 0.25 * i;
  dummy.updateMatrix();

  // Matrix4 데이터를 Float32Array의 i * 16 위치에 복사
  dummy.matrix.toArray(matrixArray, i * 16);
}

2번째는 직접 행렬을 통해서 얻는 아래의 방식입니다.

const matricesArray = new Float32Array(count * 16)
const matricesBuffer = new THREE.InstancedBufferAttribute(matricesArray, 16)

for (let i = 0; i < count; i++) {
    const progress = i / (count - 1)
    const position = new THREE.Vector3((progress - 0.5) * 4, 0, 0)
    const scale = new THREE.Vector3(1, 1, 1)
    const rotation = new THREE.Quaternion()
        .setFromEuler(new THREE.Euler(0, progress * 3, 0))

    const matrix = new THREE.Matrix4().compose(position, rotation, scale)
    matrix.toArray(matricesArray, i * 16)
}