Matrix Utilities

Prerequisites

You should know about how matrices work mathematically. Here is a great resource where you can learn about them: https://www.youtube.com/watch?v=fNk_zzaMoSs&list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab

You should read Transform Utilities first to understand how rm.Transform objects work.

Utilities

"Matrices" in ReMapper use the Matrix4 class from threejs. This is mainly for it's functionality of being able to compose and decompose euler rotations from matrices.

---

• rm.getMatrixFromTransform will take in a rm.Transform and give the corresponding three.Matrix4 that represents that transformation.

rm.getMatrixFromTransform({
    position: [0, 10, 0],
    scale: [2, 2, 2]
})
/* 
2, 0, 0, 0
0, 2, 0, 10
0, 0, 2, 0,
0, 0, 0, 1
*/

• rm.getTransformFromMatrix will take in a three.Matrix4 and give the corresponding rm.Transform that represents that transformation. Do note that any non-orthogonal matrices will not translate correctly.

const matrix = new rm.three.Matrix4(
    2, 0, 0, 0,
    0, 2, 0, 10,
    0, 0, 2, 0,
    0, 0, 0, 1
)

rm.getTransformFromMatrix(matrix)
/*
{
    position: [0, 10, 0],
    rotation: [0, 0, 0],
    scale: [2, 2, 2]
}
*/

• rm.matrixFromBasisVectors will create a three.Matrix4 from 3 rm.Vec3s which represent the X, Y, and Z axis after the transformation.

// 90 degree rotation, 2x scale
const matrix = rm.matrixFromBasisVectors(
    [0, 0, -2],
    [0, 2, 0],
    [2, 0, 0]
)

rm.getTransformFromMatrix(matrix)
/*
{
    position: [0, 0, 0],
    rotation: [0, 90, 0],
    scale: [2, 2, 2]
}
*/

• rm.applyMatrixToPoint takes a three.Matrix4 and applies it's transformation to a rm.Vec3.

// 90 degree rotation, 2x scale
const matrix = rm.getMatrixFromTransform({
    rotation: [0, 90, 0],
    scale: [2, 2, 2]
})

rm.applyMatrixToPoint(matrix, [0, 0, 1]) // ~ [2, 0, 0]