BabylonJS - spaces

by gwenaelhagenmuller

HTML

<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 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, 140, 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 = 30;

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