dav74 sample with axis

I added axis to see what happens

by gwenaelhagenmuller

HTML

<script src="https://rawgithub.com/BabylonJS/Babylon.js/v1.8.0/cannon.js"></script>
<script src="https://rawgithub.com/BabylonJS/Babylon.js/v1.8.0/babylon.1.8.0.js"></script>
<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;
}

#canvas_2D {
    position: absolute;   
    top: 0;
    pointer-events: none;
}

JavaScript

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera",0,1.3,100, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas);
var light = new BABYLON.PointLight("pointLumineux1", new BABYLON.Vector3(100, 100, 0), scene); 
var ground=BABYLON.Mesh.CreateBox("sol",100,scene);
ground.scaling.y=0.001
var sphere=BABYLON.Mesh.CreateSphere("sph",20,6,scene);
sphere.position=new BABYLON.Vector3(0,4,0);
scene.enablePhysics();
scene.setGravity(new BABYLON.Vector3(0,-10,0)); 
sphere.setPhysicsState({ impostor: BABYLON.PhysicsEngine.SphereImpostor, mass: 1 });
ground.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0, friction: 0.5, restitution: 0 });
sphere.applyImpulse(new BABYLON.Vector3(0,0,5),new BABYLON.Vector3(0,0,0));

var drawAxisFor = [];
drawAxisFor.push(sphere);

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;
    context2D.shadowColor = '#000000';
    context2D.lineCap = "square";
    context2D.shadowBlur = 10;
    context2D.shadowOffsetX = 0;
    context2D.shadowOffsetY = 0;

    //////////////////////// update camera view matrix
    var viewMatrix = camera.getViewMatrix();
    //////////////////////////
    
    var originInLocalSpace = BABYLON.Vector3.Zero();
    var xInLocalSpace = new BABYLON.Vector3(1,0,0);
    var yInLocalSpace = new BABYLON.Vector3(0,1,0);
    var zInLocalSpace = new BABYLON.Vector3(0,0,1);
    
    var cameraPositionInLocalSpace = camera.position.clone();
 
    //...