Edit in JSFiddle

html, body, canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<canvas id="renderCanvas"></canvas>

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
scene.createDefaultEnvironment();

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -4), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;

var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
sphere.position.y = 1;

//PBR test
let mat = new BABYLON.PBRMaterial("mat", scene);
mat.albedoColor = new BABYLON.Color3(0, 0, 0);
mat.metallic = 0;
mat.roughness = 0.125;
sphere.material = mat;

// Render loop
var renderLoop = function () {
  scene.render();
};

// Launch render loop
engine.runRenderLoop(renderLoop);