JSFiddle - React, Tailwind, and code Playground

by Andy Beaulieu

HTML

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/cannon.js"></script>
<script src="http://babylonplayground.azurewebsites.net/scripts/modelloader.js"></script>

<body>
    <div id="opacityMask" class="hidden"></div>
    <button id="btnCopyBones" >*** CLICK HERE FOR FUNKY RAG DOLL ***</button>
    <canvas id="canvas"></canvas>
    <div id="notSupported" class="hidden">Your browser does not support WebGL</div>
    
</body>

CSS

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

JavaScript

"use strict";

var THEGAME = THEGAME || {};
var _gameEngine;


function degreeToRadians(deg) {
    return deg * (Math.PI / 180);
}

THEGAME.Engine = function (babylonEngine) {

    this._babylonEngine = babylonEngine;
    this._scene = null;
    this._meshRegularGuy = null;
    this._camera = null;
    this._currentDebugBoxToDisplay = 0;
    this._debugBoneBoxes = [];
    this._ragDollReady = false;

    var that = this;

    THEGAME.Engine.prototype.updateRagDoll = function () {
        for (var x = 0; x < that._skeletonRegularGuy.bones.length; x++) {

            // for each "test" bone (we'll try just a couple bones)
            var bone = (that._skeletonRegularGuy.bones[x]);
            if (bone.name != "rHand" && bone.name != "rForeArm" && bone.name != "lHand" && bone.name != "lForeArm") {
                continue;
            }
       
            // get the bone's absolute matrix
            var boneMatrix = bone.getAbsoluteMatrix().clone();

            // now find the mesh with the physics enabled...
            var boneDebugBox = "debugBox_" + bone.name;
            var boneMesh = that._scene.getMeshByName(boneDebugBox);
            var boneMeshParent = null;
            if (bone._parent) {
                var boneParentDebugBox = "debugBox_" + bone._parent.name;
                boneMeshParent = that._scene.getMeshByName(boneParentDebugBox);
            }

            // now I want to orient the bone to the LOCATION of the mesh
            // I do this by taking the difference in start and current mesh position
            // and apply the Translation to the matrix (this works)
            var startPosition = boneMesh.saveStartPosition;
            var vectorDiff = boneMesh.position.subtract(boneMesh.saveStartPosition);
            if (boneMeshParent) {
                var vectorDiffParent = boneMeshParent.position.subtract(boneMeshParent.saveStartPosition);
                vectorDiff = vectorDiff.subtract(vectorDiffParent);
            }
           ...