JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.max.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);
}
...