JSFiddle - React, Tailwind, and code Playground

by Andy Beaulieu

HTML

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

<body>
    <div id="opacityMask" class="hidden"></div>
    <button id="btnCopyBones" >Copy Bones</button>
    <button id="btnMoveToBones" >Move to Bones</button> &lt;-- first click Copy Bones, then Move to Bones
    <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;

  

THEGAME.Engine = function (babylonEngine) {

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

    var that = this;

    // ********************
    // moveSkeletonToBones
    //
    // this is where I need help... 
    //
    // I want to iterate through each bone in the skeleton,
    // and orient that bone with an existing mesh in the
    // scene. 
    //
    // ********************
    THEGAME.Engine.prototype.moveSkeletonToBones = function () {
        for (var x = 0; x < that._skeletonRegularGuy.bones.length; x++) {

            // for each bone...
            var bone = (that._skeletonRegularGuy.bones[x]);

            // find the "copy" of the bone mesh...
            var boneDebugBox = "debugBox_" + bone.name;
            var mesh = that._scene.getMeshByName(boneDebugBox);

            // now I want to orient the bone to the location
            // and rotation of the mesh:
            // * this isn't working *
            var meshMatrix = mesh.getWorldMatrix().clone();
            meshMatrix.invert();

            var boneMatrix = bone.getAbsoluteMatrix().clone();
            boneMatrix = boneMatrix.multiply(meshMatrix);

            if (bone._parent) {
                var parentMatrix = bone._parent.getAbsoluteMatrix().clone();
                parentMatrix.invert();

                boneMatrix = boneMatrix.multiply(parentMatrix);
            }

            bone.updateMatrix(boneMatrix);

            that._scene.beginAnimation(bone._skeleton, 0, 1, true, 1);
        }
    }

    THEGAME.Engine.prototype.createScene = function () {

        // create the Scene
        var scene = new BABYLON.Scene(this._babylonEngine);
        this._scene = scene;

        // add a light
        var light = new BABYLON.DirectionalLight("dir01", new...