- #167 Create a new event ObjectChanged every time the object has m…

…odified its position, rotation or scale.

  - Related to #163 request to get coordinates when the model follow path with line?
  - Modified example [05-logistics.html](https://github.com/jscastro76/threebox/blob/master/examples/05-logistics.html) to attach to the event `ObjectChanged`
  - Modified example [11-logistics.html](https://github.com/jscastro76/threebox/blob/master/examples/11-animation.html) to attach to the event `ObjectChanged`
 - Modified example [08-3dbuildings.html](https://github.com/jscastro76/threebox/blob/master/examples/08-3dbuildings.html) to adjust perspective and position to a more relevant zone (empire state building)

CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.1.7
+
+Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements and bugs. 
+
+#### :sparkles: Enhancements
+- #167 Create a new event `ObjectChanged` every time the object has modified its position, rotation or scale.
+  - Related to #163 request to get coordinates when the model follow path with line?
+  - Modified example [05-logistics.html](https://github.com/jscastro76/threebox/blob/master/examples/05-logistics.html) to attach to the event `ObjectChanged`
+  - Modified example [11-logistics.html](https://github.com/jscastro76/threebox/blob/master/examples/11-animation.html) to attach to the event `ObjectChanged`
+ - Modified example [08-3dbuildings.html](https://github.com/jscastro76/threebox/blob/master/examples/08-3dbuildings.html) to adjust perspective and position to a more relevant zone (empire state building) 
+
+#### :pencil: Documentation
+- Updated [documentation](/docs/Threebox.md) (`ObjectChanged` and other events)
+- Updated [README.md](/).
+- Updated [Examples](/examples) documentation. 
+
+<br>
+
+- - - 
+
 ## 2.1.6
 
 Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements and bugs. 

LICENSE.txt

@@ -1,4 +1,4 @@
-v.2.0.1 - v.2.1.6
+v.2.0.1 - v.2.1.7
 MIT License
 Copyright (c) 2020 Jesus Serrano
 

dist/threebox.js

@@ -1024,7 +1024,7 @@ Threebox.prototype = {
 
 	programs: function () { return this.renderer.info.programs.length },
 
-	version: '2.1.6',
+	version: '2.1.7',
 
 }
 
@@ -1257,22 +1257,35 @@ AnimationManager.prototype = {
 				this.translateX(c.x);
 				this.translateY(c.y);
 				this.translateZ(c.z);
+				options.position = this.coordinates;
 			}
 
-			if (r) this.rotation.set(r[0], r[1], r[2]);
+			if (r) {
+				this.rotation.set(r[0], r[1], r[2]);
+				options.rotation = new THREE.Vector3(r[0], r[1], r[2]);
+			}
 
-			if (s) this.scale.set(s[0], s[1], s[2]);
+			if (s) {
+				this.scale.set(s[0], s[1], s[2]);
+				options.scale = this.scale;
+			}
 
-			if (q) this.quaternion.setFromAxisAngle(q[0], q[1]);
+			if (q) {
+				this.quaternion.setFromAxisAngle(q[0], q[1]);
+				options.rotation = q[0].multiplyScalar(q[1]);
+			}
 
 			if (w) {
 				this.position.copy(w);
 				let p = utils.unprojectFromWorld(w);
-				this.coordinates = p;
+				this.coordinates = options.position = p;
 			} 
 
 			this.updateMatrixWorld();
-			tb.map.repaint = true
+			tb.map.repaint = true;
+			// fire the ObjectChanged event to notify UI object change
+			this.dispatchEvent(new CustomEvent('ObjectChanged', { detail: { object: this, action: { position: options.position, rotation: options.rotation, scale: options.scale } }, bubbles: true, cancelable: true }));
+
 		};
 
 		//[jscastro] play default animation
@@ -19332,7 +19345,6 @@ var utils = {
 	},
 
 	// retrieve object parameters from an options object
-
 	types: {
 
 		rotation: function (r, currentRotation) {
@@ -19402,6 +19414,36 @@ var utils = {
 		return object != null && typeof object === 'object';
 	},
 
+	curveToLine: (curve, params) => {
+		let { width, color } = params;
+		let geometry = new THREE.BufferGeometry().setFromPoints(
+			curve.getPoints(100)
+		);
+
+		let material = new THREE.LineBasicMaterial({
+			color: color,
+			linewidth: width,
+		});
+
+		let line = new THREE.Line(geometry, material);
+
+		return line;
+	},
+
+	curvesToLines: (curves) => {
+		var colors = [0xff0000, 0x1eff00, 0x2600ff];
+		var lines = curves.map((curve, i) => {
+			let params = {
+				width: 3,
+				color: colors[i] || 'purple',
+			};
+			let curveline = curveToLine(curve, params);
+
+			return curveline;
+		});
+		return lines;
+	},
+
 	_validate: function (userInputs, defaults) {
 
 		userInputs = userInputs || {};

docs/Threebox.md

@@ -12,7 +12,7 @@ Threebox works by adding a *Three.js* scene to *Mapbox GL*, creating a new *Mapb
 
 ## Examples
 
-Threebox contains [17 examples](https://github.com/jscastro76/threebox/blob/master/examples/readme.md) to showcase most of its features. Check them out to have a glance of what is possible.
+Threebox contains [18 examples](https://github.com/jscastro76/threebox/blob/master/examples/readme.md) to showcase most of its features. Check them out to have a glance of what is possible.
 - [01-basic.html](https://github.com/jscastro76/threebox/blob/master/examples/01-basic.html) 
 - [02-line.html](https://github.com/jscastro76/threebox/blob/master/examples/02-line.html) 
 - [03-tube.html](https://github.com/jscastro76/threebox/blob/master/examples/03-tube.html) 
@@ -1372,6 +1372,41 @@ function onIsPlayingChanged(eventArgs) {
 
 <br>
 
+#### ObjectChanged
+
+```js
+obj.addEventListener('ObjectChanged', onObjectChanged, false)
+```
+
+This event is fired when an object is changed by any method, including animations.  
+The event can be listened at any time once the `tb.loadObj` callback method is being executed.
+An instance of the object that changes is returned in `eventArgs.detail`, and the action made to the object that cound be one or more of the following:
+- `position`: defined as lnglat + alt coords (i.e. `[-122.43471544901193, 37.73719686062993, 0]`), `undefined` if the change doesn't affect position.
+- `rotation`: defined as radians in Vector3 format (i.e. `{x: 0, y: 0, z: -3.026900303641103}`), `undefined` if the change doesn't affect rotation.
+- `scale`: defined as a Vector3 (i.e. `{x: 1, y: 1, z: 1}`), , `undefined` if the change doesn't affect scale.
+
+```js
+map.addLayer({
+	...
+	tb.loadObj(options, function (model) {
+		model.setCoords(origin);
+		model.addEventListener('ObjectChanged', onObjectChanged, false);
+		tb.add(model);
+	})
+
+	...
+});
+...
+function onObjectChanged(e) {
+	let object = e.detail.object; // the object that has changed
+	let action = e.detail.action; // the action that defines the change
+	//do something in the UI such as changing a button state or updating the new position and rotation
+}
+```
+
+<br>
+
+
 #### ObjectDragged
 
 ```js
@@ -1397,7 +1432,7 @@ map.addLayer({
 	...
 });
 ...
-function onDraggedObject(eventArgs) {
+function onDraggedObject(e) {
 	let draggedObject = e.detail.draggedObject; // the object dragged
 	let draggedAction = e.detail.draggedAction; // the action during dragging
 
@@ -1433,7 +1468,7 @@ map.addLayer({
 	...
 });
 ...
-function onObjectMouseOver(eventArgs) {
+function onObjectMouseOver(e) {
 	//do something in the UI such as adding help or showing this object attributes
 }
 ```
@@ -1466,7 +1501,7 @@ map.addLayer({
 	...
 });
 ...
-function onObjectMouseOut(eventArgs) {
+function onObjectMouseOut(e) {
 	//do something in the UI such as removing help
 }
 ```
@@ -1497,8 +1532,8 @@ map.addLayer({
 	...
 });
 ...
-function onSelectedChange(eventArgs) {
-	let selectedObject = eventArgs.detail; //we get the object selected/unselected
+function onSelectedChange(e) {
+	let selectedObject = e.detail; //we get the object selected/unselected
 	let selectedValue = selectedObject.selected; //we get if the object is selected after the event
 }
 ```
@@ -1549,8 +1584,8 @@ map.addLayer({
 //selected extrusion feature event
 map.on('SelectedFeature', onSelectedFeature);
 ...
-function onSelectedFeature(eventArgs) {
-	let selectedObject = eventArgs.detail; //we get the object selected/unselected
+function onSelectedFeature(e) {
+	let selectedObject = e.detail; //we get the object selected/unselected
 	let selectedValue = selectedObject.selected; //we get if the object is selected after the event
 }
 ```
@@ -1582,7 +1617,7 @@ map.addLayer({
 	...
 });
 ...
-function onWireframed(eventArgs) {
+function onWireframed(e) {
 	if (e.detail.wireframe) {
 		//do something in the UI such as changing a button state
 	}

examples/05-logistics.html

@@ -93,6 +93,7 @@
 						tb.loadObj(options, function (model) {
 
 							truck = model.setCoords(origin);
+							truck.addEventListener('ObjectChanged', onObjectChanged, false);
 							tb.add(truck);
 						})
 
@@ -108,6 +109,11 @@
 				travelPath(pt);
 			})
 
+		function onObjectChanged(e) {
+			let model = e.detail.object; //here's the object already modified
+			let action = e.detail.action; //here's the action that changed the object
+			console.log(action);
+		}
 
 		function travelPath(destination) {
 

examples/08-3dbuildings.html

@@ -21,7 +21,7 @@
 		let popup;
 		let minZoom = 12;
 		let mapConfig = {
-			ALL: { center: [-73.983964, 40.759475, 0], zoom: 16.84, pitch: 46, bearing: 0 },
+			ALL: { center: [-73.985699, 40.750042, 0], zoom: 16.25, pitch: 45, bearing: 0 },
 			names: {
 				compositeSource: "composite",
 				compositeSourceLayer: "building",

examples/11-animation.html

@@ -175,12 +175,14 @@
 						soldier = model.setCoords(origin);
 
 						// Listening to the events
-						model.addEventListener('SelectedChange', onSelectedChange, false);
-						model.addEventListener('Wireframed', onWireframed, false);
-						model.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);
-						model.addEventListener('ObjectDragged', onDraggedObject, false);
-						model.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
-						model.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
+						soldier.addEventListener('SelectedChange', onSelectedChange, false);
+						soldier.addEventListener('Wireframed', onWireframed, false);
+						soldier.addEventListener('IsPlayingChanged', onIsPlayingChanged, false);
+						soldier.addEventListener('ObjectDragged', onDraggedObject, false);
+						soldier.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
+						soldier.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
+						soldier.addEventListener('ObjectChanged', onObjectChanged, false);
+
 
 						tb.add(soldier);
 					})
@@ -321,6 +323,12 @@
 			console.log("onObjectMouseOut");
 		}
 
+		function onObjectChanged(e) {
+			let model = e.detail.object; //here's the object already modified
+			let action = e.detail.action; //here's the action that changed the object
+			console.log(action);
+		}
+
 		//wire / unwire object
 		$('#wireButton').on('click', function () {
 			if (selectedObject) {

examples/README.md

@@ -29,6 +29,7 @@ These are the examples included in Threebox.
 #### [05-logistics.html](https://github.com/jscastro76/threebox/blob/master/examples/05-logistics.html) 
 <img alt="threebox" src="images/logistics.png" width="50%"><br/>
 - This sample loads a 3D `.obj` model of a truck that is animated following a path once a point in the map is clicked. 
+- The model is attached to the event `ObjectChanged`.
 - - - -
 
 #### [06-object3d.html](https://github.com/jscastro76/threebox/blob/master/examples/06-object3d.html) 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "threebox-plugin",
-    "version": "2.1.6",
+    "version": "2.1.7",
     "description": "A Three.js plugin for Mapbox GL JS, using the CustomLayerInterface feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.",
     "main": "main.js",
     "repository": {
@@ -39,6 +39,7 @@
         "three.js",
         "mapbox",
         "mapbox-gl-js",
+        "azure-maps",
         "3D"
     ]
 }

src/Threebox.js

@@ -1019,7 +1019,7 @@ Threebox.prototype = {
 
 	programs: function () { return this.renderer.info.programs.length },
 
-	version: '2.1.6',
+	version: '2.1.7',
 
 }
 

src/animation/AnimationManager.js

@@ -209,22 +209,35 @@ AnimationManager.prototype = {
 				this.translateX(c.x);
 				this.translateY(c.y);
 				this.translateZ(c.z);
+				options.position = this.coordinates;
 			}
 
-			if (r) this.rotation.set(r[0], r[1], r[2]);
+			if (r) {
+				this.rotation.set(r[0], r[1], r[2]);
+				options.rotation = new THREE.Vector3(r[0], r[1], r[2]);
+			}
 
-			if (s) this.scale.set(s[0], s[1], s[2]);
+			if (s) {
+				this.scale.set(s[0], s[1], s[2]);
+				options.scale = this.scale;
+			}
 
-			if (q) this.quaternion.setFromAxisAngle(q[0], q[1]);
+			if (q) {
+				this.quaternion.setFromAxisAngle(q[0], q[1]);
+				options.rotation = q[0].multiplyScalar(q[1]);
+			}
 
 			if (w) {
 				this.position.copy(w);
 				let p = utils.unprojectFromWorld(w);
-				this.coordinates = p;
+				this.coordinates = options.position = p;
 			} 
 
 			this.updateMatrixWorld();
-			tb.map.repaint = true
+			tb.map.repaint = true;
+			// fire the ObjectChanged event to notify UI object change
+			this.dispatchEvent(new CustomEvent('ObjectChanged', { detail: { object: this, action: { position: options.position, rotation: options.rotation, scale: options.scale } }, bubbles: true, cancelable: true }));
+
 		};
 
 		//[jscastro] play default animation