zincjs 3.0.0 → 3.0.1
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.
- package/README.md +27 -22
- package/build/zinc.js +2 -2
- package/build/zinc.js.map +1 -1
- package/package.json +4 -1
- package/src/controls.js +1332 -1241
- package/src/geometryCSG.js +111 -115
- package/src/glyphsetCSG.js +51 -55
- package/src/loaders/GLTFToZincJSLoader.js +31 -33
- package/src/loaders/JSONLoader.js +339 -449
- package/src/loaders/OBJLoader.js +654 -851
- package/src/loaders/STLLoader.js +271 -329
- package/src/loaders/niftiReader.js +90 -59
- package/src/loaders/primitivesLoader.js +55 -52
- package/src/minimap.js +63 -43
- package/src/primitives/geometry.js +40 -44
- package/src/primitives/glyph.js +16 -19
- package/src/primitives/glyphset.js +229 -185
- package/src/primitives/label.js +29 -31
- package/src/primitives/lines.js +20 -20
- package/src/primitives/lines2.js +33 -39
- package/src/primitives/lod.js +43 -43
- package/src/primitives/marker.js +31 -32
- package/src/primitives/markerCluster.js +32 -35
- package/src/primitives/pointset.js +86 -83
- package/src/primitives/texturePrimitive.js +9 -10
- package/src/primitives/textureSlides.js +84 -97
- package/src/primitives/textureVolume.js +46 -49
- package/src/primitives/tubeLines.js +108 -108
- package/src/primitives/zincObject.js +176 -184
- package/src/region.js +145 -155
- package/src/renderRequests.js +3 -3
- package/src/renderer.js +635 -620
- package/src/scene.js +479 -419
- package/src/sceneExporter.js +22 -17
- package/src/sceneLoader.js +542 -296
- package/src/shaders/rgbVolumeRender.js +11 -18
- package/src/shaders/textureArray.js +5 -12
- package/src/shaders/textureSlide.js +10 -17
- package/src/shaders/volumeRender.js +11 -18
- package/src/shaders/volumeRender_old.js +11 -18
- package/src/shaders/volumeTexture.js +7 -14
- package/src/textSprite.js +23 -19
- package/src/texture/texture.js +14 -15
- package/src/texture/textureArray.js +14 -16
- package/src/three/InstancedPoints.js +2 -9
- package/src/three/Loader.js +334 -315
- package/src/three/line/Line.js +165 -215
- package/src/three/line/LineSegments.js +40 -55
- package/src/three/line/LineSegments2.js +322 -366
- package/src/three/line/LineSegmentsGeometry.js +239 -280
- package/src/three-js-csg.js +260 -252
- package/src/tsl/glyphRenderMaterial.js +12 -3
- package/src/tsl/glyphTransform.js +51 -29
- package/src/tsl/textureSlides.js +23 -24
- package/src/utilities.js +309 -371
- package/src/videoHandler.js +76 -83
- package/src/workers/geometryCSG.worker.js +33 -36
- package/src/workers/geometryCSGInternal.js +39 -44
- package/src/zinc.js +4 -7
- package/vite.config.js +7 -7
package/src/primitives/lod.js
CHANGED
|
@@ -47,13 +47,13 @@ const LOD = function (parent) {
|
|
|
47
47
|
morph: object,
|
|
48
48
|
loaded: true,
|
|
49
49
|
loading: false,
|
|
50
|
-
url:
|
|
50
|
+
url: '',
|
|
51
51
|
};
|
|
52
52
|
this.levels.splice(l, 0, levelObject);
|
|
53
53
|
object.renderOrder = this._renderOrder;
|
|
54
54
|
//this.add( object );
|
|
55
55
|
}
|
|
56
|
-
}
|
|
56
|
+
};
|
|
57
57
|
|
|
58
58
|
/*
|
|
59
59
|
* This is called once an ondemand level is loaded
|
|
@@ -74,7 +74,7 @@ const LOD = function (parent) {
|
|
|
74
74
|
this.checkTransparentMesh();
|
|
75
75
|
this._parent?.requestRender?.();
|
|
76
76
|
}
|
|
77
|
-
}
|
|
77
|
+
};
|
|
78
78
|
|
|
79
79
|
this.addLevelFromURL = (loader, level, url, index, preload) => {
|
|
80
80
|
this._loader = loader;
|
|
@@ -97,34 +97,33 @@ const LOD = function (parent) {
|
|
|
97
97
|
if (preload) {
|
|
98
98
|
this.loadLevel(l);
|
|
99
99
|
}
|
|
100
|
-
}
|
|
100
|
+
};
|
|
101
101
|
|
|
102
102
|
//load the mesh at index, return true if morph is not ready
|
|
103
103
|
this.loadLevel = (index) => {
|
|
104
104
|
const level = this.levels[index];
|
|
105
|
-
if (!level.morph && !level.loaded &&
|
|
106
|
-
!level.loading) {
|
|
105
|
+
if (!level.morph && !level.loaded && !level.loading) {
|
|
107
106
|
level.loading = true;
|
|
108
|
-
this._loader.load(level.url, this.lodLoader(level.distance),
|
|
109
|
-
|
|
107
|
+
this._loader.load(level.url, this.lodLoader(level.distance), undefined, undefined, {
|
|
108
|
+
index: level.index,
|
|
109
|
+
});
|
|
110
110
|
}
|
|
111
|
-
return
|
|
112
|
-
}
|
|
113
|
-
|
|
111
|
+
return level.morph === undefined;
|
|
112
|
+
};
|
|
114
113
|
|
|
115
114
|
this.calculateDistance = function (level) {
|
|
116
115
|
this._parent.getBoundingBox();
|
|
117
116
|
const radius = this._parent.radius;
|
|
118
117
|
let distance = 0;
|
|
119
|
-
if (level ===
|
|
118
|
+
if (level === 'far') {
|
|
120
119
|
distance = radius * 4.5;
|
|
121
|
-
} else if (level ===
|
|
120
|
+
} else if (level === 'medium') {
|
|
122
121
|
distance = radius * 2.5;
|
|
123
|
-
} else if (level ===
|
|
122
|
+
} else if (level === 'close') {
|
|
124
123
|
distance = 0;
|
|
125
124
|
}
|
|
126
125
|
return distance;
|
|
127
|
-
}
|
|
126
|
+
};
|
|
128
127
|
|
|
129
128
|
/**
|
|
130
129
|
* Check if there are multiple levels.
|
|
@@ -134,7 +133,7 @@ const LOD = function (parent) {
|
|
|
134
133
|
return true;
|
|
135
134
|
}
|
|
136
135
|
return false;
|
|
137
|
-
}
|
|
136
|
+
};
|
|
138
137
|
|
|
139
138
|
/**
|
|
140
139
|
* Check if material is transparent, create secondary mesh
|
|
@@ -156,8 +155,7 @@ const LOD = function (parent) {
|
|
|
156
155
|
// THREE.Mesh - for utilities purpose such as rendering
|
|
157
156
|
// transparent surfaces - one for front face and one for back face.
|
|
158
157
|
if (!level.secondaryMesh) {
|
|
159
|
-
level.secondaryMesh = new THREE.Mesh(level.morph.geometry,
|
|
160
|
-
this._secondaryMaterial);
|
|
158
|
+
level.secondaryMesh = new THREE.Mesh(level.morph.geometry, this._secondaryMaterial);
|
|
161
159
|
level.secondaryMesh.renderOrder = level.morph.renderOrder + 1;
|
|
162
160
|
level.secondaryMesh.userData = level.morph.userData;
|
|
163
161
|
level.secondaryMesh.name = level.morph.name;
|
|
@@ -184,7 +182,7 @@ const LOD = function (parent) {
|
|
|
184
182
|
this._material.needsUpdate = true;
|
|
185
183
|
}
|
|
186
184
|
}
|
|
187
|
-
}
|
|
185
|
+
};
|
|
188
186
|
|
|
189
187
|
this.dispose = () => {
|
|
190
188
|
this._disposed = true;
|
|
@@ -199,11 +197,11 @@ const LOD = function (parent) {
|
|
|
199
197
|
if (this._secondaryMaterial) {
|
|
200
198
|
this._secondaryMaterial.dispose();
|
|
201
199
|
}
|
|
202
|
-
}
|
|
200
|
+
};
|
|
203
201
|
|
|
204
202
|
this.getCurrentLevel = () => {
|
|
205
203
|
return this._currentLevel;
|
|
206
|
-
}
|
|
204
|
+
};
|
|
207
205
|
|
|
208
206
|
this.getCurrentMorph = () => {
|
|
209
207
|
const level = this.levels[this._currentLevel];
|
|
@@ -211,11 +209,11 @@ const LOD = function (parent) {
|
|
|
211
209
|
return level.morph;
|
|
212
210
|
}
|
|
213
211
|
return this._parent.morph;
|
|
214
|
-
}
|
|
212
|
+
};
|
|
215
213
|
|
|
216
214
|
/**
|
|
217
|
-
|
|
218
|
-
|
|
215
|
+
* Loader for lod object
|
|
216
|
+
*/
|
|
219
217
|
this.lodLoader = function (distance) {
|
|
220
218
|
return (geometryIn) => {
|
|
221
219
|
if (this._disposed) {
|
|
@@ -227,7 +225,7 @@ const LOD = function (parent) {
|
|
|
227
225
|
localTimeEnabled: this._parent.timeEnabled,
|
|
228
226
|
localMorphColour: this._parent.morphColour,
|
|
229
227
|
isLines: this._parent.isLines,
|
|
230
|
-
}
|
|
228
|
+
};
|
|
231
229
|
const geometry = toBufferGeometry(geometryIn, options);
|
|
232
230
|
let mesh = undefined;
|
|
233
231
|
if (this._parent.isGeometry) {
|
|
@@ -240,7 +238,7 @@ const LOD = function (parent) {
|
|
|
240
238
|
geometryIn.dispose();
|
|
241
239
|
this.levelLoaded(mesh, distance);
|
|
242
240
|
};
|
|
243
|
-
}
|
|
241
|
+
};
|
|
244
242
|
|
|
245
243
|
this.updateMorphColorAttribute = (currentOnly) => {
|
|
246
244
|
//Multilayers - set all
|
|
@@ -250,8 +248,11 @@ const LOD = function (parent) {
|
|
|
250
248
|
//morph colour materials now (see applyMorphColorNode's callers), so
|
|
251
249
|
//NodeMaterial doesn't multiply the blend by the static 'color'
|
|
252
250
|
//attribute on top of it.
|
|
253
|
-
if (
|
|
254
|
-
this._material.userData
|
|
251
|
+
if (
|
|
252
|
+
this._material.userData &&
|
|
253
|
+
this._material.userData.uniforms &&
|
|
254
|
+
this._material.userData.uniforms.morphColorMix
|
|
255
|
+
) {
|
|
255
256
|
if (currentOnly) {
|
|
256
257
|
const morph = this.getCurrentMorph();
|
|
257
258
|
updateMorphColorAttribute(morph.geometry, morph);
|
|
@@ -264,7 +265,7 @@ const LOD = function (parent) {
|
|
|
264
265
|
}
|
|
265
266
|
}
|
|
266
267
|
}
|
|
267
|
-
}
|
|
268
|
+
};
|
|
268
269
|
|
|
269
270
|
this.setColour = (colour) => {
|
|
270
271
|
this._material.color = colour;
|
|
@@ -272,7 +273,7 @@ const LOD = function (parent) {
|
|
|
272
273
|
this._secondaryMaterial.color = colour;
|
|
273
274
|
}
|
|
274
275
|
updateGeometryColour();
|
|
275
|
-
}
|
|
276
|
+
};
|
|
276
277
|
|
|
277
278
|
this.setFrustumCulled = (flag) => {
|
|
278
279
|
this.levels.forEach((level) => {
|
|
@@ -283,18 +284,18 @@ const LOD = function (parent) {
|
|
|
283
284
|
level.secondaryMesh.frustumCulled = flag;
|
|
284
285
|
}
|
|
285
286
|
});
|
|
286
|
-
}
|
|
287
|
+
};
|
|
287
288
|
|
|
288
289
|
this.setMaterial = (material) => {
|
|
289
290
|
if (material) {
|
|
290
|
-
if (!this._material ||
|
|
291
|
+
if (!this._material || this._material.id !== material.id) {
|
|
291
292
|
this._material = material;
|
|
292
293
|
if (this._secondaryMaterial) {
|
|
293
294
|
this._secondaryMaterial.dispose();
|
|
294
295
|
this._secondaryMaterial = undefined;
|
|
295
296
|
}
|
|
296
297
|
if (material.transparent || this.levels.some((level) => level.secondaryMesh)) {
|
|
297
|
-
this._secondaryMaterial = material.clone()
|
|
298
|
+
this._secondaryMaterial = material.clone();
|
|
298
299
|
this._secondaryMaterial.side = THREE.FrontSide;
|
|
299
300
|
this._secondaryMaterial.transparent = true;
|
|
300
301
|
}
|
|
@@ -311,7 +312,7 @@ const LOD = function (parent) {
|
|
|
311
312
|
});
|
|
312
313
|
}
|
|
313
314
|
}
|
|
314
|
-
}
|
|
315
|
+
};
|
|
315
316
|
|
|
316
317
|
this.setName = (name) => {
|
|
317
318
|
this.levels.forEach((level) => {
|
|
@@ -322,7 +323,7 @@ const LOD = function (parent) {
|
|
|
322
323
|
level.secondaryMesh.name = name;
|
|
323
324
|
}
|
|
324
325
|
});
|
|
325
|
-
}
|
|
326
|
+
};
|
|
326
327
|
|
|
327
328
|
this.setRenderOrder = (order) => {
|
|
328
329
|
this._renderOrder = order;
|
|
@@ -334,7 +335,7 @@ const LOD = function (parent) {
|
|
|
334
335
|
level.secondaryMesh.renderOrder = order;
|
|
335
336
|
}
|
|
336
337
|
});
|
|
337
|
-
}
|
|
338
|
+
};
|
|
338
339
|
|
|
339
340
|
this.setVertexColors = (vertexColors) => {
|
|
340
341
|
this._material.vertexColors = vertexColors;
|
|
@@ -342,7 +343,7 @@ const LOD = function (parent) {
|
|
|
342
343
|
if (this._secondaryMaterial) {
|
|
343
344
|
this._secondaryMaterial.vertexColors = vertexColors;
|
|
344
345
|
}
|
|
345
|
-
}
|
|
346
|
+
};
|
|
346
347
|
|
|
347
348
|
/* Update layers based on the */
|
|
348
349
|
this.update = (camera, center) => {
|
|
@@ -363,8 +364,7 @@ const LOD = function (parent) {
|
|
|
363
364
|
visibleIndex = i;
|
|
364
365
|
levels[i].morph.visible = true;
|
|
365
366
|
optimalIndex = -1;
|
|
366
|
-
}
|
|
367
|
-
else {
|
|
367
|
+
} else {
|
|
368
368
|
optimalIndex = i;
|
|
369
369
|
}
|
|
370
370
|
} else {
|
|
@@ -393,7 +393,7 @@ const LOD = function (parent) {
|
|
|
393
393
|
this._parent?.requestRender?.();
|
|
394
394
|
}
|
|
395
395
|
}
|
|
396
|
-
}
|
|
396
|
+
};
|
|
397
397
|
|
|
398
398
|
this.toggleMarker = (marker, flag) => {
|
|
399
399
|
this.levels.forEach((level) => {
|
|
@@ -405,7 +405,7 @@ const LOD = function (parent) {
|
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
407
|
});
|
|
408
|
-
}
|
|
408
|
+
};
|
|
409
409
|
|
|
410
410
|
const updateGeometryColour = () => {
|
|
411
411
|
this.levels.forEach((level) => {
|
|
@@ -413,7 +413,7 @@ const LOD = function (parent) {
|
|
|
413
413
|
level.morph.geometry.colorsNeedUpdate = true;
|
|
414
414
|
}
|
|
415
415
|
});
|
|
416
|
-
}
|
|
417
|
-
}
|
|
416
|
+
};
|
|
417
|
+
};
|
|
418
418
|
|
|
419
419
|
export { LOD };
|
package/src/primitives/marker.js
CHANGED
|
@@ -15,7 +15,7 @@ const spriteMaterial = new THREE.SpriteMaterial({
|
|
|
15
15
|
transparent: true,
|
|
16
16
|
depthTest: false,
|
|
17
17
|
depthWrite: false,
|
|
18
|
-
sizeAttenuation: false
|
|
18
|
+
sizeAttenuation: false,
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -27,7 +27,7 @@ const spriteMaterial = new THREE.SpriteMaterial({
|
|
|
27
27
|
* @author Alan Wu
|
|
28
28
|
* @return {Marker}
|
|
29
29
|
*/
|
|
30
|
-
const Marker = function(zincObject) {
|
|
30
|
+
const Marker = function (zincObject) {
|
|
31
31
|
if (Object.getPrototypeOf(this) !== ZincObject.prototype) {
|
|
32
32
|
Object.setPrototypeOf(Marker.prototype, ZincObject.prototype);
|
|
33
33
|
}
|
|
@@ -49,7 +49,7 @@ const Marker = function(zincObject) {
|
|
|
49
49
|
let number = undefined;
|
|
50
50
|
let label = undefined;
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
let initialise = () => {
|
|
53
53
|
sprite = new THREE.Sprite(spriteMaterial);
|
|
54
54
|
sprite.center.set(0.5, 0);
|
|
55
55
|
this.morph.add(sprite);
|
|
@@ -57,24 +57,24 @@ const Marker = function(zincObject) {
|
|
|
57
57
|
this.morph.renderOrder = 10000;
|
|
58
58
|
sprite.scale.set(size[0], size[1], size[2]);
|
|
59
59
|
sprite.userData = this;
|
|
60
|
-
}
|
|
60
|
+
};
|
|
61
61
|
|
|
62
62
|
this.updateVisual = (min, max) => {
|
|
63
63
|
let scale = 1;
|
|
64
64
|
let porportion = 0;
|
|
65
65
|
if (min !== max) {
|
|
66
|
-
porportion =
|
|
67
|
-
scale = 0.6 +
|
|
66
|
+
porportion = 1 - (this.ndc.z - min) / (max - min);
|
|
67
|
+
scale = 0.6 + porportion * 0.4;
|
|
68
68
|
}
|
|
69
69
|
this.setSpriteSize(scale);
|
|
70
|
-
}
|
|
70
|
+
};
|
|
71
71
|
|
|
72
|
-
this.updateNDC = camera => {
|
|
72
|
+
this.updateNDC = (camera) => {
|
|
73
73
|
this.ndc.copy(this.morph.position);
|
|
74
74
|
this.ndc.project(camera);
|
|
75
75
|
this.ndc.z = Math.min(Math.max(this.ndc.z, 0), 1);
|
|
76
76
|
return this.ndc;
|
|
77
|
-
}
|
|
77
|
+
};
|
|
78
78
|
|
|
79
79
|
/**
|
|
80
80
|
* Set the position of the marker.
|
|
@@ -85,17 +85,17 @@ const Marker = function(zincObject) {
|
|
|
85
85
|
*/
|
|
86
86
|
this.setPosition = (x, y, z) => {
|
|
87
87
|
this.morph.position.set(x, y, z);
|
|
88
|
-
}
|
|
88
|
+
};
|
|
89
89
|
|
|
90
90
|
/**
|
|
91
91
|
* Set the size of the marker.
|
|
92
92
|
*
|
|
93
93
|
* @param {Number} size - size to be set.
|
|
94
94
|
*/
|
|
95
|
-
this.setSpriteSize = size => {
|
|
95
|
+
this.setSpriteSize = (size) => {
|
|
96
96
|
sprite.scale.set(0.015, 0.02, 1);
|
|
97
97
|
sprite.scale.multiplyScalar(size);
|
|
98
|
-
}
|
|
98
|
+
};
|
|
99
99
|
|
|
100
100
|
this.setUserSprite = () => {
|
|
101
101
|
if (userSprite) {
|
|
@@ -108,7 +108,7 @@ const Marker = function(zincObject) {
|
|
|
108
108
|
defaultDisplay = false;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
}
|
|
111
|
+
};
|
|
112
112
|
|
|
113
113
|
this.setImageForUserSprite = (image, size) => {
|
|
114
114
|
if (userSprite) {
|
|
@@ -126,17 +126,17 @@ const Marker = function(zincObject) {
|
|
|
126
126
|
transparent: true,
|
|
127
127
|
depthTest: false,
|
|
128
128
|
depthWrite: false,
|
|
129
|
-
sizeAttenuation: false
|
|
129
|
+
sizeAttenuation: false,
|
|
130
130
|
});
|
|
131
131
|
if (!size) {
|
|
132
|
-
size =
|
|
132
|
+
size = [0.05, 0.05, 1];
|
|
133
133
|
}
|
|
134
134
|
userSprite = new THREE.Sprite(userMaterial);
|
|
135
135
|
userSprite.center.set(0.5, 0);
|
|
136
136
|
userSprite.scale.set(size[0], size[1], size[2]);
|
|
137
137
|
userSprite.userData = this;
|
|
138
138
|
this.setUserSprite();
|
|
139
|
-
}
|
|
139
|
+
};
|
|
140
140
|
|
|
141
141
|
this.setDefaultSprite = () => {
|
|
142
142
|
if (!defaultDisplay) {
|
|
@@ -145,14 +145,14 @@ const Marker = function(zincObject) {
|
|
|
145
145
|
if (userSprite) this.morph.remove(userSprite);
|
|
146
146
|
if (label) this.morph.add(label);
|
|
147
147
|
}
|
|
148
|
-
}
|
|
148
|
+
};
|
|
149
149
|
|
|
150
150
|
this.loadUserSprite = (url, size) => {
|
|
151
151
|
if (url) {
|
|
152
152
|
if (url !== userUrl) {
|
|
153
153
|
userUrl = url;
|
|
154
154
|
const userImage = new Image(128, 128);
|
|
155
|
-
userImage.crossOrigin =
|
|
155
|
+
userImage.crossOrigin = 'anonymous';
|
|
156
156
|
userImage.onload = () => {
|
|
157
157
|
this.setImageForUserSprite(userImage, size);
|
|
158
158
|
this.parent?.requestRender?.();
|
|
@@ -162,7 +162,7 @@ const Marker = function(zincObject) {
|
|
|
162
162
|
this.setUserSprite();
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
|
-
}
|
|
165
|
+
};
|
|
166
166
|
|
|
167
167
|
/**
|
|
168
168
|
* Clean up this object,
|
|
@@ -181,14 +181,14 @@ const Marker = function(zincObject) {
|
|
|
181
181
|
label.material.dispose();
|
|
182
182
|
label = undefined;
|
|
183
183
|
}
|
|
184
|
-
}
|
|
184
|
+
};
|
|
185
185
|
|
|
186
186
|
this.isEnabled = () => {
|
|
187
187
|
return enabled;
|
|
188
|
-
}
|
|
188
|
+
};
|
|
189
189
|
|
|
190
190
|
this.setNumber = (numberIn) => {
|
|
191
|
-
if (!numberIn ||
|
|
191
|
+
if (!numberIn || number != numberIn) {
|
|
192
192
|
//remove label
|
|
193
193
|
if (label) {
|
|
194
194
|
this.morph.remove(label);
|
|
@@ -199,29 +199,29 @@ const Marker = function(zincObject) {
|
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
if (!label && numberIn) {
|
|
202
|
-
label = createNewSpriteText(numberIn, 0.012,
|
|
202
|
+
label = createNewSpriteText(numberIn, 0.012, 'black', 'Asap', 120, 700);
|
|
203
203
|
label.renderOrder = 10001;
|
|
204
204
|
this.morph.add(label);
|
|
205
205
|
}
|
|
206
206
|
number = numberIn;
|
|
207
|
-
}
|
|
207
|
+
};
|
|
208
208
|
|
|
209
209
|
this.getNumber = () => {
|
|
210
210
|
return number ? number : 1;
|
|
211
|
-
}
|
|
211
|
+
};
|
|
212
212
|
|
|
213
213
|
/**
|
|
214
214
|
* Set the visibility of this Geometry.
|
|
215
215
|
*
|
|
216
216
|
* @param {Boolean} visible - a boolean flag indicate the visibility to be set
|
|
217
217
|
*/
|
|
218
|
-
this.setVisibility = function(visible) {
|
|
218
|
+
this.setVisibility = function (visible) {
|
|
219
219
|
if (visible !== this.visible) {
|
|
220
220
|
this.visible = visible;
|
|
221
221
|
this.group.visible = visible;
|
|
222
222
|
if (this.parent.region) this.parent.region.pickableUpdateRequired = true;
|
|
223
223
|
}
|
|
224
|
-
}
|
|
224
|
+
};
|
|
225
225
|
|
|
226
226
|
/**
|
|
227
227
|
* Enable and visualise the marker.
|
|
@@ -230,7 +230,7 @@ const Marker = function(zincObject) {
|
|
|
230
230
|
enabled = true;
|
|
231
231
|
this.morph.visible = true;
|
|
232
232
|
this.visible = true;
|
|
233
|
-
}
|
|
233
|
+
};
|
|
234
234
|
|
|
235
235
|
/**
|
|
236
236
|
* Disable and hide the marker.
|
|
@@ -239,10 +239,9 @@ const Marker = function(zincObject) {
|
|
|
239
239
|
enabled = false;
|
|
240
240
|
this.morph.visible = false;
|
|
241
241
|
this.visible = false;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
initialise();
|
|
242
|
+
};
|
|
245
243
|
|
|
246
|
-
|
|
244
|
+
initialise();
|
|
245
|
+
};
|
|
247
246
|
|
|
248
247
|
export { Marker };
|
|
@@ -15,7 +15,7 @@ const spriteMaterial = new THREE.SpriteMaterial({
|
|
|
15
15
|
transparent: true,
|
|
16
16
|
depthTest: false,
|
|
17
17
|
depthWrite: false,
|
|
18
|
-
sizeAttenuation: false
|
|
18
|
+
sizeAttenuation: false,
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -26,7 +26,7 @@ const spriteMaterial = new THREE.SpriteMaterial({
|
|
|
26
26
|
* @author Alan Wu
|
|
27
27
|
* @return {Marker}
|
|
28
28
|
*/
|
|
29
|
-
const MarkerCluster = function(sceneIn) {
|
|
29
|
+
const MarkerCluster = function (sceneIn) {
|
|
30
30
|
ZincObject.call(this);
|
|
31
31
|
this.texture = texture;
|
|
32
32
|
let sprite = undefined;
|
|
@@ -47,15 +47,15 @@ const MarkerCluster = function(sceneIn) {
|
|
|
47
47
|
*
|
|
48
48
|
* @param {Number} size - size to be set.
|
|
49
49
|
*/
|
|
50
|
-
this.setSpriteSize = sizeIn => {
|
|
50
|
+
this.setSpriteSize = (sizeIn) => {
|
|
51
51
|
sprite.scale.set(0.015, 0.02, 1);
|
|
52
52
|
sprite.scale.multiplyScalar(sizeIn);
|
|
53
|
-
}
|
|
53
|
+
};
|
|
54
54
|
|
|
55
55
|
this.clear = () => {
|
|
56
56
|
this.group.clear();
|
|
57
57
|
this.markers = {};
|
|
58
|
-
}
|
|
58
|
+
};
|
|
59
59
|
|
|
60
60
|
/**
|
|
61
61
|
* Clean up this object,
|
|
@@ -65,7 +65,7 @@ const MarkerCluster = function(sceneIn) {
|
|
|
65
65
|
if (this.morph) {
|
|
66
66
|
this.morph.clear();
|
|
67
67
|
}
|
|
68
|
-
}
|
|
68
|
+
};
|
|
69
69
|
|
|
70
70
|
const createNewSprite = (index) => {
|
|
71
71
|
//Group is needed to set the position after scaling
|
|
@@ -81,35 +81,33 @@ const MarkerCluster = function(sceneIn) {
|
|
|
81
81
|
localGroup.add(sprite);
|
|
82
82
|
this.group.add(localGroup);
|
|
83
83
|
return {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
84
|
+
group: localGroup,
|
|
85
|
+
marker: sprite,
|
|
86
|
+
label: undefined,
|
|
87
|
+
number: 0,
|
|
88
|
+
min: [0, 0, 0],
|
|
89
|
+
max: [1, 1, 1],
|
|
90
90
|
};
|
|
91
|
-
}
|
|
91
|
+
};
|
|
92
92
|
|
|
93
93
|
const activateSpriteForCluster = (sprite, cluster, number) => {
|
|
94
94
|
sprite.group.visible = true;
|
|
95
|
-
sprite.group.position.set(
|
|
96
|
-
|
|
97
|
-
);
|
|
98
|
-
if (sprite.label === undefined || (number !== sprite.number)) {
|
|
95
|
+
sprite.group.position.set(cluster.coords[0], cluster.coords[1], cluster.coords[2]);
|
|
96
|
+
if (sprite.label === undefined || number !== sprite.number) {
|
|
99
97
|
if (sprite.label) {
|
|
100
98
|
sprite.group.remove(sprite.label);
|
|
101
99
|
releaseTextSprite(sprite.label);
|
|
102
100
|
sprite.label.material.map.dispose();
|
|
103
101
|
sprite.label.material.dispose();
|
|
104
102
|
}
|
|
105
|
-
sprite.label = createNewSpriteText(number, 0.012,
|
|
103
|
+
sprite.label = createNewSpriteText(number, 0.012, 'black', 'Asap', 120, 700);
|
|
106
104
|
sprite.label.renderOrder = 10001;
|
|
107
105
|
sprite.number = number;
|
|
108
106
|
sprite.group.add(sprite.label);
|
|
109
107
|
}
|
|
110
108
|
sprite.min = cluster.min;
|
|
111
109
|
sprite.max = cluster.max;
|
|
112
|
-
}
|
|
110
|
+
};
|
|
113
111
|
|
|
114
112
|
const drawClusters = (clusters) => {
|
|
115
113
|
let currentIndex = 0;
|
|
@@ -133,13 +131,13 @@ const MarkerCluster = function(sceneIn) {
|
|
|
133
131
|
for (currentIndex; currentIndex < sprites.length; currentIndex++) {
|
|
134
132
|
sprites[currentIndex].group.visible = false;
|
|
135
133
|
}
|
|
136
|
-
}
|
|
134
|
+
};
|
|
137
135
|
|
|
138
136
|
//Get clusters based on the ndc coordinate for each cluster.
|
|
139
137
|
const getCluster = (markersObj, clusters) => {
|
|
140
138
|
let first = true;
|
|
141
|
-
let newCluster = {members: [], coords: [0,0,0], min: [0, 0, 0], max: [1, 1, 1]};
|
|
142
|
-
let dist = 0
|
|
139
|
+
let newCluster = { members: [], coords: [0, 0, 0], min: [0, 0, 0], max: [1, 1, 1] };
|
|
140
|
+
let dist = 0;
|
|
143
141
|
for (let prop in markersObj) {
|
|
144
142
|
if (first) {
|
|
145
143
|
_v21.set(markersObj[prop].ndc.x, markersObj[prop].ndc.y);
|
|
@@ -150,7 +148,7 @@ const MarkerCluster = function(sceneIn) {
|
|
|
150
148
|
markersObj[prop].morph.position.x,
|
|
151
149
|
markersObj[prop].morph.position.y,
|
|
152
150
|
markersObj[prop].morph.position.z,
|
|
153
|
-
]
|
|
151
|
+
];
|
|
154
152
|
clusters.push(newCluster);
|
|
155
153
|
delete markersObj[prop];
|
|
156
154
|
} else {
|
|
@@ -172,25 +170,25 @@ const MarkerCluster = function(sceneIn) {
|
|
|
172
170
|
if (first !== true) {
|
|
173
171
|
getCluster(markersObj, clusters);
|
|
174
172
|
}
|
|
175
|
-
}
|
|
173
|
+
};
|
|
176
174
|
|
|
177
175
|
this.calculate = () => {
|
|
178
176
|
if (enabled) {
|
|
179
177
|
const current = Date.now();
|
|
180
|
-
if (
|
|
178
|
+
if (current - start > 500) {
|
|
181
179
|
let clusters = [];
|
|
182
|
-
getCluster({...this.markers}, clusters);
|
|
180
|
+
getCluster({ ...this.markers }, clusters);
|
|
183
181
|
drawClusters(clusters);
|
|
184
182
|
scene?.invalidate?.();
|
|
185
183
|
start = Date.now();
|
|
186
184
|
this.markerUpdateRequired = false;
|
|
187
185
|
}
|
|
188
186
|
}
|
|
189
|
-
}
|
|
187
|
+
};
|
|
190
188
|
|
|
191
189
|
this.isEnabled = () => {
|
|
192
190
|
return enabled;
|
|
193
|
-
}
|
|
191
|
+
};
|
|
194
192
|
|
|
195
193
|
/**
|
|
196
194
|
* Enable and visualise the marker.
|
|
@@ -198,7 +196,7 @@ const MarkerCluster = function(sceneIn) {
|
|
|
198
196
|
this.enable = () => {
|
|
199
197
|
enabled = true;
|
|
200
198
|
this.morph.visible = true;
|
|
201
|
-
}
|
|
199
|
+
};
|
|
202
200
|
|
|
203
201
|
/**
|
|
204
202
|
* Disable and hide the marker.
|
|
@@ -208,12 +206,11 @@ const MarkerCluster = function(sceneIn) {
|
|
|
208
206
|
this.morph.visible = false;
|
|
209
207
|
//turn all markers back on
|
|
210
208
|
for (let prop in this.markers) {
|
|
211
|
-
if (this.markers[prop]?.isMarker &&
|
|
212
|
-
this.markers[prop].isEnabled()) {
|
|
209
|
+
if (this.markers[prop]?.isMarker && this.markers[prop].isEnabled()) {
|
|
213
210
|
this.markers[prop].setVisibility(true);
|
|
214
211
|
}
|
|
215
212
|
}
|
|
216
|
-
}
|
|
213
|
+
};
|
|
217
214
|
|
|
218
215
|
this.zoomToCluster = (index) => {
|
|
219
216
|
if (index !== undefined && index > -1) {
|
|
@@ -227,7 +224,7 @@ const MarkerCluster = function(sceneIn) {
|
|
|
227
224
|
}
|
|
228
225
|
}
|
|
229
226
|
return false;
|
|
230
|
-
}
|
|
227
|
+
};
|
|
231
228
|
|
|
232
229
|
this.clusterIsVisible = (index) => {
|
|
233
230
|
if (index !== undefined && index > -1) {
|
|
@@ -236,8 +233,8 @@ const MarkerCluster = function(sceneIn) {
|
|
|
236
233
|
}
|
|
237
234
|
}
|
|
238
235
|
return false;
|
|
239
|
-
}
|
|
240
|
-
}
|
|
236
|
+
};
|
|
237
|
+
};
|
|
241
238
|
|
|
242
239
|
MarkerCluster.prototype = Object.create(ZincObject.prototype);
|
|
243
240
|
export { MarkerCluster };
|