JSFiddle - React, Tailwind, and code Playground

by MaxenceBrasselet

HTML

<script src="https://rawgithub.com/BabylonJS/Babylon.js/master/babylon.1.11.js"></script>
<canvas id="renderCanvas"></canvas>
<button name="applyParent">applyParent</button>

CSS

html, body, div, canvas {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

button {
    position: absolute;
    top: 10px;
    left: 10px;
}
}

JavaScript

// Here my own code, I was working on decomposing matrix for babylonJs, but I have no time to finish it so it works partially (may be it could work with your simple case).
var decomposeTranslationRotationScalingMatrix = function (matrix) {
            var innerMatrix = matrix.clone();

            // Translation
            var positionX = innerMatrix.m[12];
            var positionY = innerMatrix.m[13];
            var positionZ = innerMatrix.m[14];

            var translation = new BABYLON.Vector3(positionX, positionY, positionZ);
            var translationMatrixInv = BABYLON.Matrix.Translation(-positionX, -positionY, -positionZ);

            //
            // Scaling
            var scalingX = Math.sqrt(innerMatrix.m[0] * innerMatrix.m[0] + innerMatrix.m[1] * innerMatrix.m[1] + innerMatrix.m[2] * innerMatrix.m[2]);
            var scalingY = Math.sqrt(innerMatrix.m[4] * innerMatrix.m[4] + innerMatrix.m[5] * innerMatrix.m[5] + innerMatrix.m[6] * innerMatrix.m[6]);
            var scalingZ = Math.sqrt(innerMatrix.m[8] * innerMatrix.m[8] + innerMatrix.m[9] * innerMatrix.m[9] + innerMatrix.m[10] * innerMatrix.m[10]);

            var scaling = new BABYLON.Vector3(scalingX, scalingY, scalingZ);

            //
            // Rotation
            var rotationMatrix = innerMatrix.multiply(translationMatrixInv);

            // Normalize to remove scaling.
            if (scalingX) {
                rotationMatrix.m[0] /= scalingX;
                rotationMatrix.m[1] /= scalingX;
                rotationMatrix.m[2] /= scalingX;
            }
            if (scalingY) {
                rotationMatrix.m[4] /= scalingY;
                rotationMatrix.m[5] /= scalingY;
                rotationMatrix.m[6] /= scalingY;
            }
            if (scalingZ) {
                rotationMatrix.m[8] /= scalingZ;
                rotationMatrix.m[9] /= scalingZ;
                rotationMatrix.m[10] /= scalingZ;
            }

            //
            var rotationX =...