BabylonJS -Remove parent BUG
The model should keep its transform in world space once its parent is removed
HTML
<script src="https://rawgithub.com/BabylonJS/Babylon.js/v1.8.5/babylon.1.8.5.js"></script>
<button id="removeParent">Remove Parent</button>
<div id="rootDiv">
<canvas id="renderCanvas"></canvas>
<canvas id="canvas_2D"></canvas>
</div>
CSS
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
button { height: 20px; }
#canvas_2D {
position: absolute;
top: 20px;
pointer-events: none;
}
JavaScript
document.getElementById("removeParent").onclick = function () {
parent.dispose(true);
};
var drawAxisFor = [];
// Get the Canvas element from our HTML below
var canvas = document.getElementById("renderCanvas");
// Load BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Create a camera
var camera = new BABYLON.ArcRotateCamera ("Camera", -1.6, 1.1, 200, BABYLON.Vector3.Zero(), scene);
// Attach the camera to the scene
scene.activeCamera.attachControl(canvas);
// Create meshes
var ground = new BABYLON.Mesh.CreatePlane("ground", 100, scene);
ground.rotation.x = Math.PI / 2;
var grandParent = BABYLON.Mesh.CreateBox("grandParent", 10, scene);
grandParent.position.x = 15;
var parent = BABYLON.Mesh.CreateBox("parent", 7, scene);
parent.position.x = 40;
var model = BABYLON.Mesh.CreateBox("model", 4, scene);
model.position.x = 40;
var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.5);
material.wireframe = true;
ground.material = material;
grandParent.material = material;
parent.material = material;
model.material = material;
var pvMatrix = BABYLON.Matrix.FromValues(1.5,0,0,0, 0,1.5,0,0, 0,0,1.5,0, 10,0,0,1);
grandParent.setPivotMatrix(pvMatrix);
parent.setPivotMatrix(pvMatrix);
grandParent.rotation.z = Math.PI / 4;
parent.rotation.z = Math.PI / 8;
model.parent = parent;
model.position.x = 10;
parent.parent = grandParent;
parent.position.x = 15;
drawAxisFor.push(model);
var canvas2D = document.getElementById("canvas_2D");
var context2D = canvas2D.getContext("2d");
//Add a placeholder function for browsers that don't have setLineDash()
if (!context2D.setLineDash) {
context.setLineDash = function () {}
}
var clearCanvas2D = function(){
canvas2D.width = window.innerWidth;
canvas2D.height = window.innerHeight;
};
var drawAxis = function(camera, mesh, drawAncestors, pivot){
context2D.lineWidth = 1;
...