Jong & Klasse Demo

by Richard van Zon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>
<canvas id="renderCanvas"></canvas>

CSS

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

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

JavaScript

var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);

var createScene = function() {
  var scene = new BABYLON.Scene(engine);
  var camera = new BABYLON.ArcRotateCamera("Camera", 0, 2.0, -10, new BABYLON.Vector3(0, 5, -10), scene);
  camera.attachControl(canvas, false);

  scene.clearColor = new BABYLON.Color3(0.13, 0.13, 0.13);
  camera.setTarget(new BABYLON.Vector3.Zero());
  camera.attachControl(canvas, false);

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

  var sphere = new BABYLON.Mesh.CreateBox('box1', 5, scene);
  sphere.position.y = 1;

  return scene;
};

var scene = createScene();

engine.runRenderLoop(function() {
  scene.render();
});

var animate = function() {
  var scene = engine.scenes[0]
  var tb = scene.getMeshByName('box1');
  tb.rotation.y += 0.02;
};

scene.registerBeforeRender(animate);

window.addEventListener('resize', function() {
  engine.resize();
});