#119 Create an Azure Maps example

Updated builds

CHANGELOG.md

@@ -10,6 +10,7 @@ Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements
 - [**#109**](https://github.com/jscastro76/threebox/issues/109) add speed param to animations #109
 - [**#114**](https://github.com/jscastro76/threebox/issues/114) `tb.setSunlight` must accept LngLatLike coords #114
 - [**#117**](https://github.com/jscastro76/threebox/issues/117) cache functions must be 100% async #117
+- [**#119**](https://github.com/jscastro76/threebox/issues/119) Create a sample with azure maps #119. Added added [17-azuremaps.html](https://github.com/jscastro76/threebox/blob/master/examples/17-azuremaps.html) 
 
 #### :beetle: Bug fixes
 

examples/17-azuremaps.html

@@ -17,6 +17,8 @@
 	<script>
 
 		if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
+		/// Seattle Space Needle from here https://3dwarehouse.sketchup.com/model/d4c52391dfaa912d9a1f861ea5945001/Space-Needle?hl=en&login=true
+		/// Soldier model from here Skeletal Animation Blending= https://www.mixamo.com/ 
 
 		//Instantiate a map object
 		var map;
@@ -68,10 +70,10 @@
 					type: 'custom',
 					renderingMode: '3d',
 					onAdd: function (map, mbxContext) {
-						let options = { obj: './models/landmarks/spaceneedle.glb', type: 'gltf', scale: 368.82, units: 'meters', rotation: { x: 90, y: 180, z: 0 }, anchor: 'center' }
+						let options = { obj: './models/landmarks/spaceneedle.glb', type: 'gltf', scale: 368.82, units: 'meters', rotation: { x: 90, y: 0, z: 0 }, anchor: 'center' }
 
 						tb.loadObj(options, function (model) {
-							model.setCoords([-122.349293, 47.620439]);
+							model.setCoords([-122.34928, 47.620569]);
 							model.castShadow = true;
 							model.addTooltip("This is the Space Needle!!");
 							tb.add(model);

examples/README.md

@@ -108,8 +108,16 @@ These are the examples included in Threebox.
 <img alt="threebox" src="images/multilayer.png" width="50%"><br/>
 - This sample shows how to create multiple layers dynamically with Threebox and manage different zoom ranges for each one. 
 - Create multiple 3D layers in Mapbox is a heavy consumer of resources because every layer is rendered separately.
-- Enabled built-in multilayer support through `multiLayer` param, this param will create an embedded internal layer in Threebox that will manage the render with a single call to tb.update so it's not needed in each layer definition. This saves a lot of resources as it's mapbox render loop only calls once to three.js render.
+- Enabled built-in multilayer support through `multiLayer` param, this param will create an embedded internal layer in Threebox that will manage the render with a single call to tb.update so it's not needed in each layer definition. This saves a lot of resources as mapbox render loop only calls once to three.js render.
 - Each layer can be hidden explicitly with a button, but also each layer has a different zoom range through `tb.setLayoutZoomRange` so the layers will hide depending on zoom level. 
 - Added performance stats indicator.
 
 - - - -
+
+#### [17-azuremaps.html](https://github.com/jscastro76/threebox/blob/master/examples/17-azuremaps.html) 
+<img alt="threebox" src="images/azuremaps.png" width="50%"><br/>
+- This sample shows how to create an Azure Maps sample through threebox using the satellite Azure Maps style.
+- It adds two models, one with the Space Needle in real size and other with a Giant Soldier.
+- This sample shows how to  add real sunlight position and shadows over this two models. 
+
+- - - -

tests/threebox-tests-bundle.js

@@ -9052,10 +9052,14 @@ Threebox.prototype = {
 		this.enableTooltips = this.options.enableTooltips || false;
 		this.multiLayer = this.options.multiLayer || false;
 
+		this.map.on('style.load', function () {
+			this.tb.zoomLayers = [];
+			//[jscastro] if multiLayer, create a by default layer in the map, so tb.update won't be needed in client side to avoid duplicating calls to render
+			if (this.tb.options.multiLayer) this.addLayer({ id: "threebox_layer", type: 'custom', renderingMode: '3d', map: this, onAdd: function (map, gl) { }, render: function (gl, matrix) { this.map.tb.update(); } })
+		});
+
 		//[jscastro] new event map on load
 		this.map.on('load', function () {
-			//[jscastro] if multiLayer, create a by default layer in the map, so tb.update won't be needed in client side to avoid duplicating calls to render
-			if (this.tb.options.multiLayer) this.addLayer({ id: "threebox_layer", type: 'custom', renderingMode: '3d', map: this, onAdd: function (map, gl) { }, render: function (gl, matrix) { this.map.tb.update(); }})
 			//[jscastro] new fields to manage events on map
 			let selectedObject; //selected object through click
 			let draggedObject; //dragged object through mousedown + mousemove
@@ -10713,6 +10717,7 @@ function LabelRenderer(map) {
 	this.renderer.domElement.style.position = 'absolute';
 	this.renderer.domElement.id = 'labelCanvas'; //TODO: this value must come by parameter
 	this.renderer.domElement.style.top = 0;
+	this.renderer.domElement.style.zIndex = "0";
 	this.map.getCanvasContainer().appendChild(this.renderer.domElement);
 
 	this.scene, this.camera;
@@ -25531,12 +25536,12 @@ Objects.prototype = {
 					const size = box.getSize(new THREE.Vector3());
 					let bottomLeft = { x: box.max.x, y: box.max.y, z: box.min.z };
 					obj.removeCSS2D(objName);
-					let help = new CSS2D.CSS2DObject(element);
-					help.name = objName;
-					help.position.set(((-size.x * 0.5) - obj.model.position.x - center.x + bottomLeft.x), ((-size.y * 0.5) - obj.model.position.y - center.y + bottomLeft.y), size.z * height); 
-					help.visible = false; //only visible on mouseover or selected
-					obj.scaleGroup.add(help);
-					return help;
+					let c = new CSS2D.CSS2DObject(element);
+					c.name = objName;
+					c.position.set(((-size.x * 0.5) - obj.model.position.x - center.x + bottomLeft.x), ((-size.y * 0.5) - obj.model.position.y - center.y + bottomLeft.y), size.z * height); 
+					c.visible = false; //only visible on mouseover or selected
+					obj.scaleGroup.add(c);
+					return c;
 				}
 			}