@things-factory/scene-visualizer 6.0.1 → 6.0.5

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.
@@ -1,461 +0,0 @@
1
- /*
2
- * @author Daosheng Mu / https://github.com/DaoshengMu/
3
- * @author mrdoob / http://mrdoob.com/
4
- * @author takahirox / https://github.com/takahirox/
5
- */
6
-
7
- import * as THREE from 'three'
8
-
9
- function TGALoader(manager) {
10
- this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager
11
- }
12
-
13
- TGALoader.prototype = {
14
- constructor: TGALoader,
15
-
16
- load: function(url, onLoad, onProgress, onError) {
17
- var scope = this
18
-
19
- var texture = new THREE.Texture()
20
-
21
- var loader = new THREE.FileLoader(this.manager)
22
- loader.setResponseType('arraybuffer')
23
- loader.setPath(this.path)
24
-
25
- loader.load(
26
- url,
27
- function(buffer) {
28
- texture.image = scope.parse(buffer)
29
- texture.needsUpdate = true
30
-
31
- if (onLoad !== undefined) {
32
- onLoad(texture)
33
- }
34
- },
35
- onProgress,
36
- onError
37
- )
38
-
39
- return texture
40
- },
41
-
42
- parse: function(buffer) {
43
- // reference from vthibault, https://github.com/vthibault/roBrowser/blob/master/src/Loaders/Targa.js
44
-
45
- function tgaCheckHeader(header) {
46
- switch (header.image_type) {
47
- // check indexed type
48
-
49
- case TGA_TYPE_INDEXED:
50
- case TGA_TYPE_RLE_INDEXED:
51
- if (header.colormap_length > 256 || header.colormap_size !== 24 || header.colormap_type !== 1) {
52
- console.error('THREE.TGALoader: Invalid type colormap data for indexed type.')
53
- }
54
- break
55
-
56
- // check colormap type
57
-
58
- case TGA_TYPE_RGB:
59
- case TGA_TYPE_GREY:
60
- case TGA_TYPE_RLE_RGB:
61
- case TGA_TYPE_RLE_GREY:
62
- if (header.colormap_type) {
63
- console.error('THREE.TGALoader: Invalid type colormap data for colormap type.')
64
- }
65
- break
66
-
67
- // What the need of a file without data ?
68
-
69
- case TGA_TYPE_NO_DATA:
70
- console.error('THREE.TGALoader: No data.')
71
-
72
- // Invalid type ?
73
-
74
- default:
75
- console.error('THREE.TGALoader: Invalid type "%s".', header.image_type)
76
- }
77
-
78
- // check image width and height
79
-
80
- if (header.width <= 0 || header.height <= 0) {
81
- console.error('THREE.TGALoader: Invalid image size.')
82
- }
83
-
84
- // check image pixel size
85
-
86
- if (header.pixel_size !== 8 && header.pixel_size !== 16 && header.pixel_size !== 24 && header.pixel_size !== 32) {
87
- console.error('THREE.TGALoader: Invalid pixel size "%s".', header.pixel_size)
88
- }
89
- }
90
-
91
- // parse tga image buffer
92
-
93
- function tgaParse(use_rle, use_pal, header, offset, data) {
94
- var pixel_data, pixel_size, pixel_total, palettes
95
-
96
- pixel_size = header.pixel_size >> 3
97
- pixel_total = header.width * header.height * pixel_size
98
-
99
- // read palettes
100
-
101
- if (use_pal) {
102
- palettes = data.subarray(offset, (offset += header.colormap_length * (header.colormap_size >> 3)))
103
- }
104
-
105
- // read RLE
106
-
107
- if (use_rle) {
108
- pixel_data = new Uint8Array(pixel_total)
109
-
110
- var c, count, i
111
- var shift = 0
112
- var pixels = new Uint8Array(pixel_size)
113
-
114
- while (shift < pixel_total) {
115
- c = data[offset++]
116
- count = (c & 0x7f) + 1
117
-
118
- // RLE pixels
119
-
120
- if (c & 0x80) {
121
- // bind pixel tmp array
122
-
123
- for (i = 0; i < pixel_size; ++i) {
124
- pixels[i] = data[offset++]
125
- }
126
-
127
- // copy pixel array
128
-
129
- for (i = 0; i < count; ++i) {
130
- pixel_data.set(pixels, shift + i * pixel_size)
131
- }
132
-
133
- shift += pixel_size * count
134
- } else {
135
- // raw pixels
136
-
137
- count *= pixel_size
138
- for (i = 0; i < count; ++i) {
139
- pixel_data[shift + i] = data[offset++]
140
- }
141
- shift += count
142
- }
143
- }
144
- } else {
145
- // raw pixels
146
-
147
- pixel_data = data.subarray(offset, (offset += use_pal ? header.width * header.height : pixel_total))
148
- }
149
-
150
- return {
151
- pixel_data: pixel_data,
152
- palettes: palettes
153
- }
154
- }
155
-
156
- function tgaGetImageData8bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image, palettes) {
157
- var colormap = palettes
158
- var color,
159
- i = 0,
160
- x,
161
- y
162
- var width = header.width
163
-
164
- for (y = y_start; y !== y_end; y += y_step) {
165
- for (x = x_start; x !== x_end; x += x_step, i++) {
166
- color = image[i]
167
- imageData[(x + width * y) * 4 + 3] = 255
168
- imageData[(x + width * y) * 4 + 2] = colormap[color * 3 + 0]
169
- imageData[(x + width * y) * 4 + 1] = colormap[color * 3 + 1]
170
- imageData[(x + width * y) * 4 + 0] = colormap[color * 3 + 2]
171
- }
172
- }
173
-
174
- return imageData
175
- }
176
-
177
- function tgaGetImageData16bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
178
- var color,
179
- i = 0,
180
- x,
181
- y
182
- var width = header.width
183
-
184
- for (y = y_start; y !== y_end; y += y_step) {
185
- for (x = x_start; x !== x_end; x += x_step, i += 2) {
186
- color = image[i + 0] + (image[i + 1] << 8) // Inversed ?
187
- imageData[(x + width * y) * 4 + 0] = (color & 0x7c00) >> 7
188
- imageData[(x + width * y) * 4 + 1] = (color & 0x03e0) >> 2
189
- imageData[(x + width * y) * 4 + 2] = (color & 0x001f) >> 3
190
- imageData[(x + width * y) * 4 + 3] = color & 0x8000 ? 0 : 255
191
- }
192
- }
193
-
194
- return imageData
195
- }
196
-
197
- function tgaGetImageData24bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
198
- var i = 0,
199
- x,
200
- y
201
- var width = header.width
202
-
203
- for (y = y_start; y !== y_end; y += y_step) {
204
- for (x = x_start; x !== x_end; x += x_step, i += 3) {
205
- imageData[(x + width * y) * 4 + 3] = 255
206
- imageData[(x + width * y) * 4 + 2] = image[i + 0]
207
- imageData[(x + width * y) * 4 + 1] = image[i + 1]
208
- imageData[(x + width * y) * 4 + 0] = image[i + 2]
209
- }
210
- }
211
-
212
- return imageData
213
- }
214
-
215
- function tgaGetImageData32bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
216
- var i = 0,
217
- x,
218
- y
219
- var width = header.width
220
-
221
- for (y = y_start; y !== y_end; y += y_step) {
222
- for (x = x_start; x !== x_end; x += x_step, i += 4) {
223
- imageData[(x + width * y) * 4 + 2] = image[i + 0]
224
- imageData[(x + width * y) * 4 + 1] = image[i + 1]
225
- imageData[(x + width * y) * 4 + 0] = image[i + 2]
226
- imageData[(x + width * y) * 4 + 3] = image[i + 3]
227
- }
228
- }
229
-
230
- return imageData
231
- }
232
-
233
- function tgaGetImageDataGrey8bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
234
- var color,
235
- i = 0,
236
- x,
237
- y
238
- var width = header.width
239
-
240
- for (y = y_start; y !== y_end; y += y_step) {
241
- for (x = x_start; x !== x_end; x += x_step, i++) {
242
- color = image[i]
243
- imageData[(x + width * y) * 4 + 0] = color
244
- imageData[(x + width * y) * 4 + 1] = color
245
- imageData[(x + width * y) * 4 + 2] = color
246
- imageData[(x + width * y) * 4 + 3] = 255
247
- }
248
- }
249
-
250
- return imageData
251
- }
252
-
253
- function tgaGetImageDataGrey16bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
254
- var i = 0,
255
- x,
256
- y
257
- var width = header.width
258
-
259
- for (y = y_start; y !== y_end; y += y_step) {
260
- for (x = x_start; x !== x_end; x += x_step, i += 2) {
261
- imageData[(x + width * y) * 4 + 0] = image[i + 0]
262
- imageData[(x + width * y) * 4 + 1] = image[i + 0]
263
- imageData[(x + width * y) * 4 + 2] = image[i + 0]
264
- imageData[(x + width * y) * 4 + 3] = image[i + 1]
265
- }
266
- }
267
-
268
- return imageData
269
- }
270
-
271
- function getTgaRGBA(data, width, height, image, palette) {
272
- var x_start, y_start, x_step, y_step, x_end, y_end
273
-
274
- switch ((header.flags & TGA_ORIGIN_MASK) >> TGA_ORIGIN_SHIFT) {
275
- default:
276
- case TGA_ORIGIN_UL:
277
- x_start = 0
278
- x_step = 1
279
- x_end = width
280
- y_start = 0
281
- y_step = 1
282
- y_end = height
283
- break
284
-
285
- case TGA_ORIGIN_BL:
286
- x_start = 0
287
- x_step = 1
288
- x_end = width
289
- y_start = height - 1
290
- y_step = -1
291
- y_end = -1
292
- break
293
-
294
- case TGA_ORIGIN_UR:
295
- x_start = width - 1
296
- x_step = -1
297
- x_end = -1
298
- y_start = 0
299
- y_step = 1
300
- y_end = height
301
- break
302
-
303
- case TGA_ORIGIN_BR:
304
- x_start = width - 1
305
- x_step = -1
306
- x_end = -1
307
- y_start = height - 1
308
- y_step = -1
309
- y_end = -1
310
- break
311
- }
312
-
313
- if (use_grey) {
314
- switch (header.pixel_size) {
315
- case 8:
316
- tgaGetImageDataGrey8bits(data, y_start, y_step, y_end, x_start, x_step, x_end, image)
317
- break
318
-
319
- case 16:
320
- tgaGetImageDataGrey16bits(data, y_start, y_step, y_end, x_start, x_step, x_end, image)
321
- break
322
-
323
- default:
324
- console.error('THREE.TGALoader: Format not supported.')
325
- break
326
- }
327
- } else {
328
- switch (header.pixel_size) {
329
- case 8:
330
- tgaGetImageData8bits(data, y_start, y_step, y_end, x_start, x_step, x_end, image, palette)
331
- break
332
-
333
- case 16:
334
- tgaGetImageData16bits(data, y_start, y_step, y_end, x_start, x_step, x_end, image)
335
- break
336
-
337
- case 24:
338
- tgaGetImageData24bits(data, y_start, y_step, y_end, x_start, x_step, x_end, image)
339
- break
340
-
341
- case 32:
342
- tgaGetImageData32bits(data, y_start, y_step, y_end, x_start, x_step, x_end, image)
343
- break
344
-
345
- default:
346
- console.error('THREE.TGALoader: Format not supported.')
347
- break
348
- }
349
- }
350
-
351
- // Load image data according to specific method
352
- // var func = 'tgaGetImageData' + (use_grey ? 'Grey' : '') + (header.pixel_size) + 'bits';
353
- // func(data, y_start, y_step, y_end, x_start, x_step, x_end, width, image, palette );
354
- return data
355
- }
356
-
357
- // TGA constants
358
-
359
- var TGA_TYPE_NO_DATA = 0,
360
- TGA_TYPE_INDEXED = 1,
361
- TGA_TYPE_RGB = 2,
362
- TGA_TYPE_GREY = 3,
363
- TGA_TYPE_RLE_INDEXED = 9,
364
- TGA_TYPE_RLE_RGB = 10,
365
- TGA_TYPE_RLE_GREY = 11,
366
- TGA_ORIGIN_MASK = 0x30,
367
- TGA_ORIGIN_SHIFT = 0x04,
368
- TGA_ORIGIN_BL = 0x00,
369
- TGA_ORIGIN_BR = 0x01,
370
- TGA_ORIGIN_UL = 0x02,
371
- TGA_ORIGIN_UR = 0x03
372
-
373
- if (buffer.length < 19) console.error('THREE.TGALoader: Not enough data to contain header.')
374
-
375
- var content = new Uint8Array(buffer),
376
- offset = 0,
377
- header = {
378
- id_length: content[offset++],
379
- colormap_type: content[offset++],
380
- image_type: content[offset++],
381
- colormap_index: content[offset++] | (content[offset++] << 8),
382
- colormap_length: content[offset++] | (content[offset++] << 8),
383
- colormap_size: content[offset++],
384
- origin: [content[offset++] | (content[offset++] << 8), content[offset++] | (content[offset++] << 8)],
385
- width: content[offset++] | (content[offset++] << 8),
386
- height: content[offset++] | (content[offset++] << 8),
387
- pixel_size: content[offset++],
388
- flags: content[offset++]
389
- }
390
-
391
- // check tga if it is valid format
392
-
393
- tgaCheckHeader(header)
394
-
395
- if (header.id_length + offset > buffer.length) {
396
- console.error('THREE.TGALoader: No data.')
397
- }
398
-
399
- // skip the needn't data
400
-
401
- offset += header.id_length
402
-
403
- // get targa information about RLE compression and palette
404
-
405
- var use_rle = false,
406
- use_pal = false,
407
- use_grey = false
408
-
409
- switch (header.image_type) {
410
- case TGA_TYPE_RLE_INDEXED:
411
- use_rle = true
412
- use_pal = true
413
- break
414
-
415
- case TGA_TYPE_INDEXED:
416
- use_pal = true
417
- break
418
-
419
- case TGA_TYPE_RLE_RGB:
420
- use_rle = true
421
- break
422
-
423
- case TGA_TYPE_RGB:
424
- break
425
-
426
- case TGA_TYPE_RLE_GREY:
427
- use_rle = true
428
- use_grey = true
429
- break
430
-
431
- case TGA_TYPE_GREY:
432
- use_grey = true
433
- break
434
- }
435
-
436
- //
437
-
438
- var useOffscreen = typeof OffscreenCanvas !== 'undefined'
439
-
440
- var canvas = useOffscreen ? new OffscreenCanvas(header.width, header.height) : document.createElement('canvas')
441
- canvas.width = header.width
442
- canvas.height = header.height
443
-
444
- var context = canvas.getContext('2d')
445
- var imageData = context.createImageData(header.width, header.height)
446
-
447
- var result = tgaParse(use_rle, use_pal, header, offset, content)
448
- var rgbaData = getTgaRGBA(imageData.data, header.width, header.height, result.pixel_data, result.palettes)
449
-
450
- context.putImageData(imageData, 0, 0)
451
-
452
- return useOffscreen ? canvas.transferToImageBitmap() : canvas
453
- },
454
-
455
- setPath: function(value) {
456
- this.path = value
457
- return this
458
- }
459
- }
460
-
461
- export default TGALoader
@@ -1,185 +0,0 @@
1
- export default superclass => {
2
- var A = class extends superclass {
3
- constructor(model, canvasSize, visualizer) {
4
- super()
5
-
6
- this._model = model
7
-
8
- this._visualizer = visualizer
9
- this._canvasSize = canvasSize
10
-
11
- this.name = this.model.id
12
-
13
- this.createObject()
14
-
15
- this.setPosition()
16
- this.setRotation()
17
- }
18
-
19
- get model() {
20
- return this._model
21
- }
22
-
23
- get type() {
24
- return this.model.type || this._type
25
- }
26
- set type(type) {
27
- this._type = type
28
- }
29
-
30
- get cx() {
31
- if (!this._cx) {
32
- var { left = 0, width = 0 } = this.model
33
- var canvasSize = this._canvasSize
34
-
35
- this._cx = left + width / 2 - canvasSize.width / 2
36
- }
37
- return this._cx
38
- }
39
-
40
- get cy() {
41
- if (!this._cy) {
42
- var { top = 0, height = 0 } = this.model
43
- var canvasSize = this._canvasSize
44
-
45
- this._cy = top + height / 2 - canvasSize.height / 2
46
- }
47
- return this._cy
48
- }
49
-
50
- get cz() {
51
- if (!this._cz) {
52
- var { zPos = 0, depth = 1 } = this.model
53
-
54
- this._cz = zPos + depth / 2
55
- }
56
-
57
- return this._cz
58
- }
59
-
60
- dispose() {
61
- this.children.slice().forEach(child => {
62
- if (child.dispose) child.dispose()
63
- if (child.geometry && child.geometry.dispose) child.geometry.dispose()
64
- if (child.material && child.material.dispose) child.material.dispose()
65
- if (child.texture && child.texture.dispose) child.texture.dispose()
66
- this.remove(child)
67
- })
68
- }
69
-
70
- onBeforeRender() {
71
- super.onBeforeRender()
72
- }
73
-
74
- async createObject() {}
75
-
76
- setPosition() {
77
- this.position.set(this.cx, this.cz, this.cy)
78
- }
79
-
80
- setRotation() {
81
- var { rotationX = 0, rotationY = 0, rotation = 0 } = this.model
82
-
83
- this.rotation.x = -rotationX
84
- this.rotation.y = -rotation
85
- this.rotation.z = -rotationY
86
- }
87
-
88
- onUserDataChanged() {
89
- if (!this.userData) return
90
-
91
- if (this.userData.hasOwnProperty('position')) {
92
- if (!this._visualizer) return
93
-
94
- this._setPosition(this._visualizer.transcoord2dTo3d(this.userData.position))
95
- }
96
-
97
- if (this.userData.hasOwnProperty('euler')) {
98
- this._setEuler({
99
- yaw: this.userData.euler.yaw,
100
- pitch: this.userData.euler.pitch,
101
- roll: this.userData.euler.roll
102
- })
103
- }
104
-
105
- if (this.userData.hasOwnProperty('quaternion')) {
106
- this._setQuaternion({
107
- x: this.userData.quaternion.qx,
108
- y: this.userData.quaternion.qy,
109
- z: this.userData.quaternion.qz,
110
- w: this.userData.quaternion.qw
111
- })
112
- }
113
- }
114
-
115
- _setPosition(location) {
116
- var { x, y } = location
117
-
118
- var index = this._visualizer.mixers.indexOf(this._mixer)
119
- if (index >= 0) {
120
- this._visualizer.mixers.splice(index, 1)
121
- }
122
-
123
- this._mixer = new THREE.AnimationMixer(this)
124
- this._visualizer.mixers.push(this._mixer)
125
-
126
- var positionKF = new THREE.VectorKeyframeTrack(
127
- '.position',
128
- [0, 1],
129
- [this.position.x, this.position.y, this.position.z, x, this.position.y, y]
130
- )
131
- var clip = new THREE.AnimationClip('Move', 2, [positionKF])
132
-
133
- // create a ClipAction and set it to play
134
- var clipAction = this._mixer.clipAction(clip)
135
- clipAction.clampWhenFinished = true
136
- clipAction.loop = THREE.LoopOnce
137
- clipAction.play()
138
- }
139
-
140
- _setQuaternion(quaternion) {
141
- var { x, y, z, w } = quaternion
142
-
143
- // var euler = new THREE.Euler();
144
-
145
- // // var currentRotation = this.rotation;
146
-
147
- // // console.log(currentRotation)
148
-
149
- var q = new THREE.Quaternion()
150
-
151
- q.set(x, y, z, w)
152
-
153
- // euler.setFromQuaternion(q, 'ZYX');
154
-
155
- // // euler.z -= Math.PI / 2;
156
- // euler.z -= Math.PI / 2;
157
-
158
- // var mat = new THREE.Matrix4();
159
- // mat.makeRotationFromQuaternion(q);
160
- // mat.transpose();
161
-
162
- // q.setFromRotationMatrix(mat);
163
-
164
- // this.setRotationFromEuler(euler);
165
-
166
- this.setRotationFromQuaternion(q)
167
- this.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI)
168
- this.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI)
169
- this.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2)
170
- // this.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI);
171
- // this.updateMatrix()
172
- }
173
-
174
- _setEuler(euler) {
175
- var { yaw, pitch, roll } = euler
176
- var e = new THREE.Euler()
177
-
178
- e.set(yaw, pitch, roll, 'ZYX')
179
-
180
- this.setRotationFromEuler(e)
181
- }
182
- }
183
-
184
- return A
185
- }