@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.
- package/package.json +2 -2
- package/src/index.js +2 -6
- package/src/mesh.js +1 -7
- package/src/object3d.js +1 -7
- package/src/rack-table-cell.js +4 -4
- package/src/visualizer.js +4 -49
- package/assets/canvasicon-cj-truck-small.png +0 -0
- package/assets/canvasicon-cj-truck.png +0 -0
- package/assets/canvasicon-conveyor.png +0 -0
- package/assets/canvasicon-inspection-desk.png +0 -0
- package/assets/canvasicon-pallet-jockey.png +0 -0
- package/assets/canvasicon-pallet.png +0 -0
- package/assets/canvasicon-worker-1.png +0 -0
- package/assets/canvasicon-worker-2.png +0 -0
- package/assets/canvasicon-worker-3.png +0 -0
- package/assets/cj-truck-small.png +0 -0
- package/assets/cj-truck.png +0 -0
- package/assets/glTF_100px.png +0 -0
- package/assets/inspection-desk.png +0 -0
- package/assets/pallet-jockey.png +0 -0
- package/assets/pallet.png +0 -0
- package/assets/pallet_symbol.png +0 -0
- package/assets/roller-conveyor.png +0 -0
- package/assets/worker-2.png +0 -0
- package/assets/worker-3.png +0 -0
- package/assets/worker.png +0 -0
- package/src/cone.js +0 -88
- package/src/door.js +0 -52
- package/src/floor.js +0 -162
- package/src/humidity-sensor.js +0 -267
- package/src/loaders/ColladaLoader.js +0 -3166
- package/src/loaders/TGALoader.js +0 -461
- package/src/mixins/visible.js +0 -185
- package/src/path.js +0 -167
- package/src/video-player-360.js +0 -460
- package/src/webgl-3d-viewer.js +0 -349
- package/templates/pallet-jockey.js +0 -20
- package/templates/roller-conveyor.js +0 -20
package/src/loaders/TGALoader.js
DELETED
|
@@ -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
|
package/src/mixins/visible.js
DELETED
|
@@ -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
|
-
}
|