Babylon-mapbox billboard

by Fabien Le Vavasseur

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

let scene;

function createEngine(glContext) {
	return new BABYLON.Engine(glContext, true);
}

function createScene(engine) {
	scene = new BABYLON.Scene(engine);
  scene.activeCamera = new BABYLON.Camera("mapbox-Camera", new BABYLON.Vector3(), scene);
  scene.autoClear = false;
  scene.detachControl();
  
  // from https://www.babylonjs-playground.com/#UJEIL#13
  
  var camera = scene.activeCamera;
 	var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(1, 1, 0), scene)

  var ground = BABYLON.Mesh.CreateGround('', 100, 100, 3, scene)
  ground.position.y = -3
  ground.material = new BABYLON.StandardMaterial('', scene)
  window.m = ground.material.specularColor = BABYLON.Color3.Black()
  ground.material.diffuseColor = BABYLON.Color3.FromInts(50, 100, 50)

  function makeMesh(x, z, mode, parent) {
    // var m = BABYLON.Mesh.CreatePlane('', 5, scene)
    var m = BABYLON.Mesh.CreateBox('', 5, scene)
    m.scaling.z = 0.5
    m.position.copyFromFloats(x, 0, z)
    m.billboardMode = mode
    m.material = new BABYLON.StandardMaterial('', scene)
    var c = mode ? 150 : 0
    m.material.diffuseColor = BABYLON.Color3.FromInts(100 + c, 100, 250 - c)
    if (parent) {
      m.parent = parent;
    }
    return m
  }

  var m1 = makeMesh(-20, 0, BABYLON.Mesh.BILLBOARDMODE_NONE)
  var m2 = makeMesh(-10, 0, BABYLON.Mesh.BILLBOARDMODE_X)
  var m3 = makeMesh(0, 0, BABYLON.Mesh.BILLBOARDMODE_Y)
  var m4 = makeMesh(10, 0, BABYLON.Mesh.BILLBOARDMODE_Z)
  var m5 = makeMesh(20, 0, BABYLON.Mesh.BILLBOARDMODE_ALL)

  var ref1 = makeMesh(-20, 10, BABYLON.Mesh.BILLBOARDMODE_NONE)
  var ref2 = makeMesh(-10, 10, BABYLON.Mesh.BILLBOARDMODE_NONE)
  var ref3 = makeMesh(0, 10, BABYLON.Mesh.BILLBOARDMODE_NONE)
  var ref4 = makeMesh(10, 10, BABYLON.Mesh.BILLBOARDMODE_NONE)
  var ref5 = makeMesh(20, 10, BABYLON.Mesh.BILLBOARDMODE_NONE)

  var parent = BABYLON.Mesh.CreateBox('parent', 0.5, scene);
  var m6 = makeMesh(-20, 0, BABYLON.Mesh.BILLBOARDMODE_NONE, parent)
  var m7 =...