@ohuoy/easymap 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/bundle.js +318 -290
  2. package/dist/example - /345/211/257/346/234/254/bundle.js" +318 -290
  3. package/dist/example - /345/211/257/346/234/254/index.html" +11 -11
  4. package/index.js +4 -0
  5. package/lib/threebox-plugin/CHANGELOG.md +665 -0
  6. package/lib/threebox-plugin/LICENSE.txt +97 -0
  7. package/lib/threebox-plugin/README.md +199 -0
  8. package/lib/threebox-plugin/exports.js +2 -0
  9. package/lib/threebox-plugin/main.js +8 -0
  10. package/lib/threebox-plugin/package.json +44 -0
  11. package/lib/threebox-plugin/server.stop.js +13 -0
  12. package/lib/threebox-plugin/src/Threebox.js +1216 -0
  13. package/lib/threebox-plugin/src/animation/AnimationManager.js +483 -0
  14. package/lib/threebox-plugin/src/camera/CameraSync.js +302 -0
  15. package/lib/threebox-plugin/src/objects/CSS2DRenderer.js +245 -0
  16. package/lib/threebox-plugin/src/objects/LabelRenderer.js +71 -0
  17. package/lib/threebox-plugin/src/objects/Object3D.js +34 -0
  18. package/lib/threebox-plugin/src/objects/effects/BuildingShadows.js +115 -0
  19. package/lib/threebox-plugin/src/objects/extrusion.js +61 -0
  20. package/lib/threebox-plugin/src/objects/fflate.min.js +15 -0
  21. package/lib/threebox-plugin/src/objects/label.js +29 -0
  22. package/lib/threebox-plugin/src/objects/line.js +1386 -0
  23. package/lib/threebox-plugin/src/objects/loadObj.js +142 -0
  24. package/lib/threebox-plugin/src/objects/loaders/ColladaLoader.js +3751 -0
  25. package/lib/threebox-plugin/src/objects/loaders/FBXLoader.js +3864 -0
  26. package/lib/threebox-plugin/src/objects/loaders/GLTFLoader.js +3857 -0
  27. package/lib/threebox-plugin/src/objects/loaders/MTLLoader.js +498 -0
  28. package/lib/threebox-plugin/src/objects/loaders/OBJLoader.js +818 -0
  29. package/lib/threebox-plugin/src/objects/objects.js +1113 -0
  30. package/lib/threebox-plugin/src/objects/sphere.js +28 -0
  31. package/lib/threebox-plugin/src/objects/tooltip.js +27 -0
  32. package/lib/threebox-plugin/src/objects/tube.js +35 -0
  33. package/lib/threebox-plugin/src/three.js +6 -0
  34. package/lib/threebox-plugin/src/three.module.js +54571 -0
  35. package/lib/threebox-plugin/src/utils/ValueGenerator.js +11 -0
  36. package/lib/threebox-plugin/src/utils/constants.js +21 -0
  37. package/lib/threebox-plugin/src/utils/material.js +52 -0
  38. package/lib/threebox-plugin/src/utils/suncalc.js +322 -0
  39. package/lib/threebox-plugin/src/utils/utils.js +424 -0
  40. package/lib/threebox-plugin/src/utils/validate.js +115 -0
  41. package/package.json +18 -18
  42. package/src/components/EasyMapMarker.js +8 -0
  43. package/src/components/control/DrawBar.js +5 -0
  44. package/src/components/control/TilesBar.js +116 -27
  45. package/src/components/control/Toobars.js +20 -1
  46. package/src/components/layer/AlarmLayer.js +4 -1
  47. package/src/components/layer/AnimationBarbsLayer.js +1 -1
  48. package/src/components/layer/AnimationLayer copy.js +1 -1
  49. package/src/components/layer/AnimationLayer.js +11 -3
  50. package/src/components/layer/CustomIconLayer.js +1 -1
  51. package/src/components/layer/ExtrusionLayer.js +1 -1
  52. package/src/components/layer/ExtrusionLayerold.js +2 -1
  53. package/src/components/layer/MarkerAreaLayer.js +1 -1
  54. package/src/components/layer/PathLineLayer.js +1 -1
  55. package/src/components/layer/ThreeScanLayer.js +51 -14
  56. package/src/components/layer/ThreeWallLayer.js +1 -1
  57. package/webpack.config.js +2 -1
@@ -0,0 +1,302 @@
1
+ /**
2
+ * @author peterqliu / https://github.com/peterqliu
3
+ * @author jscastro / https://github.com/jscastro76
4
+ */
5
+ //const THREE = require("../three.js");
6
+ import * as THREE from '../three.module.js'
7
+ import utils from '../utils/utils.js'
8
+ //const utils = require("../utils/utils.js");
9
+ import ThreeboxConstants from '../utils/constants.js'
10
+ //const ThreeboxConstants = require("../utils/constants.js");
11
+
12
+ function CameraSync(map, camera, world) {
13
+ // console.log("CameraSync constructor");
14
+ this.map = map;
15
+ this.camera = camera;
16
+ this.active = true;
17
+
18
+ this.camera.matrixAutoUpdate = false; // We're in charge of the camera now!
19
+
20
+ // Postion and configure the world group so we can scale it appropriately when the camera zooms
21
+ this.world = world || new THREE.Group();
22
+ this.world.position.x = this.world.position.y = ThreeboxConstants.WORLD_SIZE / 2
23
+ this.world.matrixAutoUpdate = false;
24
+
25
+ // set up basic camera state
26
+ this.state = {
27
+ translateCenter: new THREE.Matrix4().makeTranslation(ThreeboxConstants.WORLD_SIZE / 2, -ThreeboxConstants.WORLD_SIZE / 2, 0),
28
+ worldSizeRatio: ThreeboxConstants.TILE_SIZE / ThreeboxConstants.WORLD_SIZE,
29
+ worldSize: ThreeboxConstants.TILE_SIZE * this.map.transform.scale
30
+ };
31
+
32
+ // Listen for move events from the map and update the Three.js camera
33
+ let _this = this; // keep the function on _this
34
+ this.map
35
+ .on('move', function () {
36
+ _this.updateCamera();
37
+ })
38
+ .on('resize', function () {
39
+ _this.setupCamera();
40
+ })
41
+
42
+ this.setupCamera();
43
+ }
44
+
45
+ CameraSync.prototype = {
46
+ setupCamera: function () {
47
+ const t = this.map.transform;
48
+ this.camera.aspect = t.width / t.height; //bug fixed, if aspect is not reset raycast will fail on map resize
49
+ this.halfFov = t._fov / 2;
50
+ this.cameraToCenterDistance = 0.5 / Math.tan(this.halfFov) * t.height;
51
+ const maxPitch = t._maxPitch * Math.PI / 180;
52
+ this.acuteAngle = Math.PI / 2 - maxPitch;
53
+ this.updateCamera();
54
+ },
55
+
56
+ updateCamera: function (ev) {
57
+ if (!this.camera) {
58
+ console.log('nocamera')
59
+ return;
60
+ }
61
+
62
+ const t = this.map.transform;
63
+ this.camera.aspect = t.width / t.height; //bug fixed, if aspect is not reset raycast will fail on map resize
64
+ const offset = t.centerOffset || new THREE.Vector3(); //{ x: t.width / 2, y: t.height / 2 };
65
+ let farZ = 0;
66
+ let furthestDistance = 0;
67
+ this.halfFov = t._fov / 2;
68
+ const groundAngle = Math.PI / 2 + t._pitch;
69
+ const pitchAngle = Math.cos((Math.PI / 2) - t._pitch); //pitch seems to influence heavily the depth calculation and cannot be more than 60 = PI/3 < v1 and 85 > v2
70
+ this.cameraToCenterDistance = 0.5 / Math.tan(this.halfFov) * t.height;
71
+ let pixelsPerMeter = 1;
72
+ const worldSize = this.worldSize();
73
+
74
+ if (this.map.tb.mapboxVersion >= 2.0) {
75
+ // mapbox version >= 2.0
76
+ pixelsPerMeter = this.mercatorZfromAltitude(1, t.center.lat) * worldSize;
77
+ const fovAboveCenter = t._fov * (0.5 + t.centerOffset.y / t.height);
78
+
79
+ // Adjust distance to MSL by the minimum possible elevation visible on screen,
80
+ // this way the far plane is pushed further in the case of negative elevation.
81
+ const minElevationInPixels = t.elevation ? t.elevation.getMinElevationBelowMSL() * pixelsPerMeter : 0;
82
+ const cameraToSeaLevelDistance = ((t._camera.position[2] * worldSize) - minElevationInPixels) / Math.cos(t._pitch);
83
+ const topHalfSurfaceDistance = Math.sin(fovAboveCenter) * cameraToSeaLevelDistance / Math.sin(utils.clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01));
84
+
85
+ // Calculate z distance of the farthest fragment that should be rendered.
86
+ furthestDistance = pitchAngle * topHalfSurfaceDistance + cameraToSeaLevelDistance;
87
+
88
+ // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
89
+ const horizonDistance = cameraToSeaLevelDistance * (1 / t._horizonShift);
90
+ farZ = Math.min(furthestDistance * 1.01, horizonDistance);
91
+ } else {
92
+ // mapbox version < 2.0 or azure maps
93
+ // Furthest distance optimized by @jscastro76
94
+ const topHalfSurfaceDistance = Math.sin(this.halfFov) * this.cameraToCenterDistance / Math.sin(Math.PI - groundAngle - this.halfFov);
95
+
96
+ // Calculate z distance of the farthest fragment that should be rendered.
97
+ furthestDistance = pitchAngle * topHalfSurfaceDistance + this.cameraToCenterDistance;
98
+
99
+ // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance`
100
+ farZ = furthestDistance * 1.01;
101
+ }
102
+ this.cameraTranslateZ = new THREE.Matrix4().makeTranslation(0, 0, this.cameraToCenterDistance);
103
+
104
+ // someday @ansis set further near plane to fix precision for deckgl,so we should fix it to use mapbox-gl v1.3+ correctly
105
+ // https://github.com/mapbox/mapbox-gl-js/commit/5cf6e5f523611bea61dae155db19a7cb19eb825c#diff-5dddfe9d7b5b4413ee54284bc1f7966d
106
+ const nz = (t.height / 50); //min near z as coded by @ansis
107
+ const nearZ = Math.max(nz * pitchAngle, nz); //on changes in the pitch nz could be too low
108
+
109
+ const h = t.height;
110
+ const w = t.width;
111
+ if (this.camera instanceof THREE.OrthographicCamera) {
112
+ this.camera.projectionMatrix = utils.makeOrthographicMatrix(w / - 2, w / 2, h / 2, h / - 2, nearZ, farZ);
113
+ } else {
114
+ this.camera.projectionMatrix = utils.makePerspectiveMatrix(t._fov, w / h, nearZ, farZ);
115
+ }
116
+ this.camera.projectionMatrix.elements[8] = -offset.x * 2 / t.width;
117
+ this.camera.projectionMatrix.elements[9] = offset.y * 2 / t.height;
118
+
119
+ // Unlike the Mapbox GL JS camera, separate camera translation and rotation out into its world matrix
120
+ // If this is applied directly to the projection matrix, it will work OK but break raycasting
121
+ let cameraWorldMatrix = this.calcCameraMatrix(t._pitch, t.angle);
122
+ // When terrain layers are included, height of 3D layers must be modified from t_camera.z * worldSize
123
+ if (t.elevation) cameraWorldMatrix.elements[14] = t._camera.position[2] * worldSize;
124
+ //this.camera.matrixWorld.elements is equivalent to t._camera._transform
125
+ this.camera.matrixWorld.copy(cameraWorldMatrix);
126
+
127
+ let zoomPow = t.scale * this.state.worldSizeRatio;
128
+ // Handle scaling and translation of objects in the map in the world's matrix transform, not the camera
129
+ let scale = new THREE.Matrix4;
130
+ let translateMap = new THREE.Matrix4;
131
+ let rotateMap = new THREE.Matrix4;
132
+
133
+ scale.makeScale(zoomPow, zoomPow, zoomPow);
134
+
135
+ let x = t.x || t.point.x;
136
+ let y = t.y || t.point.y;
137
+ translateMap.makeTranslation(-x, y, 0);
138
+ rotateMap.makeRotationZ(Math.PI);
139
+
140
+ this.world.matrix = new THREE.Matrix4()
141
+ .premultiply(rotateMap)
142
+ .premultiply(this.state.translateCenter)
143
+ .premultiply(scale)
144
+ .premultiply(translateMap)
145
+
146
+ // utils.prettyPrintMatrix(this.camera.projectionMatrix.elements);
147
+ this.map.fire('CameraSynced', { detail: { nearZ: nearZ, farZ: farZ, pitch: t._pitch, angle: t.angle, furthestDistance: furthestDistance, cameraToCenterDistance: this.cameraToCenterDistance, t: this.map.transform, tbProjMatrix: this.camera.projectionMatrix.elements, tbWorldMatrix: this.world.matrix.elements, cameraSyn: CameraSync } });
148
+
149
+ },
150
+
151
+ worldSize() {
152
+ let t = this.map.transform;
153
+ return t.tileSize * t.scale;
154
+ },
155
+
156
+ worldSizeFromZoom() {
157
+ let t = this.map.transform;
158
+ return Math.pow(2.0, t.zoom) * t.tileSize;
159
+ },
160
+
161
+ mercatorZfromAltitude(altitude, lat) {
162
+ return altitude / this.circumferenceAtLatitude(lat);
163
+ },
164
+
165
+ mercatorZfromZoom() {
166
+ return this.cameraToCenterDistance / this.worldSizeFromZoom();
167
+ },
168
+
169
+ circumferenceAtLatitude(latitude) {
170
+ return ThreeboxConstants.EARTH_CIRCUMFERENCE * Math.cos(latitude * Math.PI / 180);
171
+ },
172
+
173
+ calcCameraMatrix(pitch, angle, trz) {
174
+ const t = this.map.transform;
175
+ const _pitch = (pitch === undefined) ? t._pitch : pitch;
176
+ const _angle = (angle === undefined) ? t.angle : angle;
177
+ const _trz = (trz === undefined) ? this.cameraTranslateZ : trz;
178
+
179
+ return new THREE.Matrix4()
180
+ .premultiply(_trz)
181
+ .premultiply(new THREE.Matrix4().makeRotationX(_pitch))
182
+ .premultiply(new THREE.Matrix4().makeRotationZ(_angle));
183
+ },
184
+
185
+ updateCameraState() {
186
+ let t = this.map.transform;
187
+ if (!t.height) return;
188
+
189
+ // Set camera orientation and move it to a proper distance from the map
190
+ //t._camera.setPitchBearing(t._pitch, t.angle);
191
+
192
+ const dir = t._camera.forward();
193
+ const distance = t.cameraToCenterDistance;
194
+ const center = t.point;
195
+
196
+ // Use camera zoom (if terrain is enabled) to maintain constant altitude to sea level
197
+ const zoom = t._cameraZoom ? t._cameraZoom : t._zoom;
198
+ const altitude = this.mercatorZfromZoom(t);
199
+ const height = altitude - this.mercatorZfromAltitude(t._centerAltitude, t.center.lat);
200
+
201
+ // simplified version of: this._worldSizeFromZoom(this._zoomFromMercatorZ(height))
202
+ const updatedWorldSize = t.cameraToCenterDistance / height;
203
+ return [
204
+ center.x / this.worldSize() - (dir[0] * distance) / updatedWorldSize,
205
+ center.y / this.worldSize() - (dir[1] * distance) / updatedWorldSize,
206
+ this.mercatorZfromAltitude(t._centerAltitude, t._center.lat) + (-dir[2] * distance) / updatedWorldSize
207
+ ];
208
+
209
+ },
210
+
211
+ getWorldToCamera(worldSize, pixelsPerMeter) {
212
+ // transformation chain from world space to camera space:
213
+ // 1. Height value (z) of renderables is in meters. Scale z coordinate by pixelsPerMeter
214
+ // 2. Transform from pixel coordinates to camera space with cameraMatrix^-1
215
+ // 3. flip Y if required
216
+
217
+ // worldToCamera: flip * cam^-1 * zScale
218
+ // cameraToWorld: (flip * cam^-1 * zScale)^-1 => (zScale^-1 * cam * flip^-1)
219
+ let t = this.map.transform;
220
+ const matrix = new THREE.Matrix4();
221
+ const matrixT = new THREE.Matrix4();
222
+
223
+ // Compute inverse of camera matrix and post-multiply negated translation
224
+ const o = t._camera._orientation;
225
+ const p = t._camera.position;
226
+ const invPosition = new THREE.Vector3(p[0], p[1], p[2]);
227
+
228
+ const quat = new THREE.Quaternion();
229
+ quat.set(o[0], o[1], o[2], o[3]);
230
+ const invOrientation = quat.conjugate();
231
+ invPosition.multiplyScalar(-worldSize);
232
+
233
+ matrixT.makeTranslation(invPosition.x, invPosition.y, invPosition.z);
234
+ matrix
235
+ .makeRotationFromQuaternion(invOrientation)
236
+ .premultiply(matrixT);
237
+ //this would make the matrix exact to getWorldToCamera but breaks
238
+ //this.translate(matrix.elements, matrix.elements, invPosition);
239
+
240
+ // Pre-multiply y (2nd row)
241
+ matrix.elements[1] *= -1.0;
242
+ matrix.elements[5] *= -1.0;
243
+ matrix.elements[9] *= -1.0;
244
+ matrix.elements[13] *= -1.0;
245
+
246
+ // Post-multiply z (3rd column)
247
+ matrix.elements[8] *= pixelsPerMeter;
248
+ matrix.elements[9] *= pixelsPerMeter;
249
+ matrix.elements[10] *= pixelsPerMeter;
250
+ matrix.elements[11] *= pixelsPerMeter;
251
+ //console.log(matrix.elements);
252
+ return matrix;
253
+ },
254
+
255
+ translate(out, a, v) {
256
+ let x = v[0] || v.x,
257
+ y = v[1] || v.y,
258
+ z = v[2] || v.z;
259
+ let a00, a01, a02, a03;
260
+ let a10, a11, a12, a13;
261
+ let a20, a21, a22, a23;
262
+ if (a === out) {
263
+ out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
264
+ out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
265
+ out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
266
+ out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
267
+ } else {
268
+ a00 = a[0];
269
+ a01 = a[1];
270
+ a02 = a[2];
271
+ a03 = a[3];
272
+ a10 = a[4];
273
+ a11 = a[5];
274
+ a12 = a[6];
275
+ a13 = a[7];
276
+ a20 = a[8];
277
+ a21 = a[9];
278
+ a22 = a[10];
279
+ a23 = a[11];
280
+ out[0] = a00;
281
+ out[1] = a01;
282
+ out[2] = a02;
283
+ out[3] = a03;
284
+ out[4] = a10;
285
+ out[5] = a11;
286
+ out[6] = a12;
287
+ out[7] = a13;
288
+ out[8] = a20;
289
+ out[9] = a21;
290
+ out[10] = a22;
291
+ out[11] = a23;
292
+ out[12] = a00 * x + a10 * y + a20 * z + a[12];
293
+ out[13] = a01 * x + a11 * y + a21 * z + a[13];
294
+ out[14] = a02 * x + a12 * y + a22 * z + a[14];
295
+ out[15] = a03 * x + a13 * y + a23 * z + a[15];
296
+ }
297
+ return out;
298
+ }
299
+ }
300
+
301
+ export default CameraSync
302
+ //module.exports = exports = CameraSync;
@@ -0,0 +1,245 @@
1
+ /**
2
+ * @author mrdoob / http://mrdoob.com/
3
+ */
4
+
5
+ import * as THREE from '../three.module.js'
6
+
7
+ // (function () {
8
+
9
+ class CSS2DObject extends THREE.Object3D {
10
+
11
+ constructor(element) {
12
+
13
+ super();
14
+ this.element = element || document.createElement('div');
15
+ this.element.style.position = 'absolute';
16
+ this.element.style.userSelect = 'none';
17
+ this.element.setAttribute('draggable', false);
18
+
19
+ //[jscastro] some labels must be always visible
20
+ this.alwaysVisible = false;
21
+
22
+ //[jscastro] layer is needed to be rendered/hidden based on layer visibility
23
+ Object.defineProperty(this, 'layer', {
24
+ get() { return (this.parent && this.parent.parent ? this.parent.parent.layer : null) }
25
+ });
26
+
27
+ //[jscastro] implement dispose
28
+ this.dispose = function () {
29
+ this.remove();
30
+ this.element = null;
31
+ }
32
+ //[jscastro] implement explicit method
33
+ this.remove = function () {
34
+ if (this.element instanceof Element && this.element.parentNode !== null) {
35
+ this.element.parentNode.removeChild(this.element);
36
+ }
37
+ }
38
+
39
+ this.addEventListener('removed', function () {
40
+
41
+ this.remove();
42
+
43
+ });
44
+
45
+ }
46
+
47
+ copy(source, recursive) {
48
+
49
+ super.copy(source, recursive);
50
+ this.element = source.element.cloneNode(true);
51
+ return this;
52
+
53
+ }
54
+
55
+ }
56
+
57
+ CSS2DObject.prototype.isCSS2DObject = true; //
58
+
59
+ const _vector = new THREE.Vector3();
60
+
61
+ const _viewMatrix = new THREE.Matrix4();
62
+
63
+ const _viewProjectionMatrix = new THREE.Matrix4();
64
+
65
+ const _a = new THREE.Vector3();
66
+
67
+ const _b = new THREE.Vector3();
68
+
69
+ class CSS2DRenderer {
70
+
71
+ constructor() {
72
+
73
+ const _this = this;
74
+
75
+ let _width, _height;
76
+
77
+ let _widthHalf, _heightHalf;
78
+
79
+ const cache = {
80
+ objects: new WeakMap(),
81
+ list: new Map()
82
+ };
83
+ this.cacheList = cache.list;
84
+ const domElement = document.createElement('div');
85
+ domElement.style.overflow = 'hidden';
86
+ this.domElement = domElement;
87
+
88
+ this.getSize = function () {
89
+
90
+ return {
91
+ width: _width,
92
+ height: _height
93
+ };
94
+
95
+ };
96
+
97
+ this.render = function (scene, camera) {
98
+
99
+ if (scene.autoUpdate === true) scene.updateMatrixWorld();
100
+ if (camera.parent === null) camera.updateMatrixWorld();
101
+
102
+ _viewMatrix.copy(camera.matrixWorldInverse);
103
+
104
+ _viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
105
+
106
+ renderObject(scene, scene, camera);
107
+ zOrder(scene);
108
+
109
+ };
110
+
111
+ this.setSize = function (width, height) {
112
+
113
+ _width = width;
114
+ _height = height;
115
+ _widthHalf = _width / 2;
116
+ _heightHalf = _height / 2;
117
+ domElement.style.width = width + 'px';
118
+ domElement.style.height = height + 'px';
119
+
120
+ };
121
+
122
+ function renderObject(object, scene, camera) {
123
+
124
+ if (object.isCSS2DObject) {
125
+
126
+ //[jscastro] optimize performance and don't update and remove the labels that are not visible
127
+ if (!object.visible) {
128
+ cache.objects.delete({ key: object.uuid });
129
+ cache.list.delete(object.uuid);
130
+ object.remove();
131
+ }
132
+ else {
133
+
134
+ object.onBeforeRender(_this, scene, camera);
135
+
136
+ _vector.setFromMatrixPosition(object.matrixWorld);
137
+
138
+ _vector.applyMatrix4(_viewProjectionMatrix);
139
+
140
+ const element = object.element;
141
+ var style;
142
+ if (/apple/i.test(navigator.vendor)) {
143
+
144
+ // https://github.com/mrdoob/three.js/issues/21415
145
+ style = 'translate(-50%,-50%) translate(' + Math.round(_vector.x * _widthHalf + _widthHalf) + 'px,' + Math.round(- _vector.y * _heightHalf + _heightHalf) + 'px)';
146
+
147
+ } else {
148
+
149
+ style = 'translate(-50%,-50%) translate(' + (_vector.x * _widthHalf + _widthHalf) + 'px,' + (- _vector.y * _heightHalf + _heightHalf) + 'px)';
150
+
151
+ }
152
+
153
+ element.style.WebkitTransform = style;
154
+ element.style.MozTransform = style;
155
+ element.style.oTransform = style;
156
+ element.style.transform = style;
157
+
158
+ element.style.display = object.visible && _vector.z >= - 1 && _vector.z <= 1 ? '' : 'none';
159
+
160
+ const objectData = {
161
+ distanceToCameraSquared: getDistanceToSquared(camera, object)
162
+ };
163
+
164
+ cache.objects.set({ key: object.uuid }, objectData);
165
+ cache.list.set(object.uuid, object);
166
+
167
+ if (element.parentNode !== domElement) {
168
+
169
+ domElement.appendChild(element);
170
+
171
+ }
172
+
173
+ object.onAfterRender(_this, scene, camera);
174
+
175
+ }
176
+ }
177
+
178
+ for (let i = 0, l = object.children.length; i < l; i++) {
179
+
180
+ renderObject(object.children[i], scene, camera);
181
+
182
+ }
183
+
184
+
185
+ }
186
+
187
+ function getDistanceToSquared(object1, object2) {
188
+
189
+ _a.setFromMatrixPosition(object1.matrixWorld);
190
+
191
+ _b.setFromMatrixPosition(object2.matrixWorld);
192
+
193
+ return _a.distanceToSquared(_b);
194
+
195
+ }
196
+
197
+ function filterAndFlatten(scene) {
198
+
199
+ const result = [];
200
+ scene.traverse(function (object) {
201
+
202
+ if (object.isCSS2DObject) result.push(object);
203
+
204
+ });
205
+ return result;
206
+
207
+ }
208
+
209
+ function zOrder(scene) {
210
+
211
+ const sorted = filterAndFlatten(scene).sort(function (a, b) {
212
+ //[jscastro] check the objects already exist in the cache
213
+ let cacheA = cache.objects.get({ key: a.uuid });
214
+ let cacheB = cache.objects.get({ key: b.uuid });
215
+
216
+ if (cacheA && cacheB) {
217
+ const distanceA = cacheA.distanceToCameraSquared;
218
+ const distanceB = cacheB.distanceToCameraSquared;
219
+ return distanceA - distanceB;
220
+ }
221
+
222
+ });
223
+
224
+ const zMax = sorted.length;
225
+
226
+ for (let i = 0, l = sorted.length; i < l; i++) {
227
+
228
+ sorted[i].element.style.zIndex = zMax - i;
229
+
230
+ }
231
+
232
+ }
233
+
234
+ }
235
+
236
+ }
237
+ let objTHREE = Object.assign({},THREE)
238
+ objTHREE.CSS2DObject = CSS2DObject;
239
+ objTHREE.CSS2DRenderer = CSS2DRenderer;
240
+
241
+ // })();
242
+
243
+ export default { CSS2DRenderer: objTHREE.CSS2DRenderer, CSS2DObject: objTHREE.CSS2DObject };
244
+ //module.exports = exports = { CSS2DRenderer: THREE.CSS2DRenderer, CSS2DObject: THREE.CSS2DObject };
245
+
@@ -0,0 +1,71 @@
1
+ /**
2
+ * @author jscastro / https://github.com/jscastro76
3
+ */
4
+
5
+ // const THREE = require("./CSS2DRenderer.js");
6
+ import THREE from './CSS2DRenderer.js'
7
+
8
+ function LabelRenderer(map) {
9
+
10
+ this.map = map;
11
+
12
+ this.renderer = new THREE.CSS2DRenderer();
13
+
14
+ this.renderer.setSize(this.map.getCanvas().clientWidth, this.map.getCanvas().clientHeight);
15
+ this.renderer.domElement.style.position = 'absolute';
16
+ this.renderer.domElement.id = 'labelCanvas'; //TODO: this value must come by parameter
17
+ this.renderer.domElement.style.top = 0;
18
+ //this.renderer.domElement.style.zIndex = "0";
19
+ this.map.getCanvasContainer().appendChild(this.renderer.domElement);
20
+
21
+ this.scene, this.camera;
22
+
23
+ this.dispose = function () {
24
+ this.map.getCanvasContainer().removeChild(this.renderer.domElement)
25
+ this.renderer.domElement.remove();
26
+ this.renderer = {};
27
+ }
28
+
29
+ this.setSize = function (width, height) {
30
+ this.renderer.setSize(width, height);
31
+ }
32
+
33
+ this.map.on('resize', function () {
34
+ this.renderer.setSize(this.map.getCanvas().clientWidth, this.map.getCanvas().clientHeight);
35
+ }.bind(this));
36
+
37
+ this.state = {
38
+ reset: function () {
39
+ //TODO: Implement a good state reset, check out what is made in WebGlRenderer
40
+ }
41
+ }
42
+
43
+ this.render = async function (scene, camera) {
44
+ this.scene = scene;
45
+ this.camera = camera;
46
+ return new Promise((resolve) => { resolve(this.renderer.render(scene, camera)) });
47
+ }
48
+
49
+ //[jscastro] method to toggle Layer visibility
50
+ this.toggleLabels = async function (layerId, visible) {
51
+ return new Promise((resolve) => {
52
+ resolve(this.setVisibility(layerId, visible, this.scene, this.camera, this.renderer));
53
+ })
54
+ };
55
+
56
+ //[jscastro] method to set visibility
57
+ this.setVisibility = function (layerId, visible, scene, camera, renderer) {
58
+ var cache = this.renderer.cacheList;
59
+ cache.forEach(function (l) {
60
+ if (l.visible != visible && l.layer === layerId) {
61
+ if ((visible && l.alwaysVisible) || !visible) {
62
+ l.visible = visible;
63
+ renderer.renderObject(l, scene, camera);
64
+ }
65
+ }
66
+ });
67
+ };
68
+
69
+ }
70
+ export default LabelRenderer
71
+ // module.exports = exports = LabelRenderer;
@@ -0,0 +1,34 @@
1
+ /**
2
+ * @author peterqliu / https://github.com/peterqliu
3
+ * @author jscastro / https://github.com/jscastro76
4
+ */
5
+ import Objects from './objects.js';
6
+ import utils from '../utils/utils.js';
7
+ import AnimationManager from '../animation/AnimationManager.js';
8
+ // const AnimationManager = require("../animation/AnimationManager.js");
9
+
10
+ function Object3D(opt,map) {
11
+ opt = utils._validate(opt, Objects.prototype._defaults.Object3D);
12
+ // [jscastro] full refactor of Object3D to behave exactly like 3D Models loadObj
13
+ let obj = opt.obj;
14
+ // [jscastro] options.rotation was wrongly used
15
+ const r = utils.types.rotation(opt.rotation, [0, 0, 0]);
16
+ const s = utils.types.scale(opt.scale, [1, 1, 1]);
17
+ obj.rotation.set(r[0], r[1], r[2]);
18
+ obj.scale.set(s[0], s[1], s[2]);
19
+ obj.name = "model";
20
+ let userScaleGroup = Objects.prototype._makeGroup(obj, opt);
21
+ Objects.prototype.animationManager = new AnimationManager(map)
22
+ opt.obj.name = "model";
23
+ Objects.prototype._addMethods(userScaleGroup);
24
+ //[jscastro] calculate automatically the pivotal center of the object
25
+ userScaleGroup.setAnchor(opt.anchor);
26
+ //[jscastro] override the center calculated if the object has adjustments
27
+ userScaleGroup.setCenter(opt.adjustment);
28
+ //[jscastro] if the object is excluded from raycasting
29
+ userScaleGroup.raycasted = opt.raycasted;
30
+ userScaleGroup.visibility = true;
31
+ return userScaleGroup
32
+ }
33
+ export default Object3D
34
+ //module.exports = exports = Object3D;