How to apply matrix to mesh?

Hi, guys!

I’m rewriting an old project from three.js to babylon.js, in which the server side only stores vertices data and matrix, the browser side need to use both to re-assemble to a final mesh.

in three.js they just use:


and it worked!

This function in Three.js actually modified the vertices data, as the same in babylon.js, firstly I tried to use


but the result is totally a mess.

Then I turned to

let scaling = new BABYLON.Vector3()
let rotationQuaternion = new BABYLON.Quaternion()
let position = new BABYLON.Vector3()

matrix.decompose(scaling, rotationQuaternion, position)

mesh.scaling = scaling
mesh.rotationQuaternion = rotationQuaternion
mesh.position = position

But it doesn’t work neither.

I also tried


which doesn’t work neither.

So, in babylon.js how to do the same thing as in three.js for applying matrix to a mesh?


once vertexData.applyToMesh(mesh), does this vertexData being bounded to the mesh? if so, how could I deeply clone a copy of a BABYLON.VertexData before applyToMesh()?

The issue might be about the space the matrix has been defined in. Babylon is left handed whilst three is left handed. Also the operation in the matrix could differ in order (but I doubt so for this part).

Could you create a Playground with an hardcoded matrix so that we could see how to rearrange the code to make it work.

Your second approach would be the way to go to prevent re uploading the full buffer to the gpu.

yeah @sebavan is right, you may end up having to invert 2nd and 3rd column

then mesh.BakeTransformIntoVertices(matrix) will do the work

problem solved, thank you very much!

1 Like