hart-estate-widget 0.0.9 → 0.0.12

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 (42) hide show
  1. package/README.md +1 -0
  2. package/build/api/index.js +33 -0
  3. package/build/assets/img/bricks.jpeg +0 -0
  4. package/build/assets/img/door-texture.jpeg +0 -0
  5. package/build/assets/img/door.jpeg +0 -0
  6. package/build/assets/img/exterior-wall-texture.jpeg +0 -0
  7. package/build/assets/img/floor-bathroom.jpg +0 -0
  8. package/build/assets/img/floor-dark.png +0 -0
  9. package/build/assets/img/floor-white.png +0 -0
  10. package/build/assets/img/floor.jpg +0 -0
  11. package/build/assets/img/grass.png +0 -0
  12. package/build/assets/img/ground.svg +9 -0
  13. package/build/assets/img/wall-texture.jpg +0 -0
  14. package/build/assets/sass/animation.sass +5 -0
  15. package/build/assets/sass/components/instructions.sass +3 -0
  16. package/build/assets/sass/components/loader.sass +2 -0
  17. package/build/assets/sass/components/model.sass +26 -0
  18. package/build/assets/sass/components/panorama.sass +4 -35
  19. package/build/assets/sass/components/tabs.sass +66 -0
  20. package/build/assets/sass/index.sass +1 -0
  21. package/build/components/Application.js +18 -4
  22. package/build/components/ImageTab.js +3 -2
  23. package/build/components/Instructions.js +2 -0
  24. package/build/components/Loader.js +3 -2
  25. package/build/components/ModelTab.js +148 -0
  26. package/build/components/PanoramaTab.js +36 -24
  27. package/build/components/TabPanes.js +7 -2
  28. package/build/components/TabWrapper.js +2 -0
  29. package/build/components/Widget.js +17 -3
  30. package/build/config/defaultConfig.js +7 -8
  31. package/build/index.css +1 -1
  32. package/build/index.css.map +1 -1
  33. package/build/index.js +24 -0
  34. package/build/store/apiStore.js +63 -0
  35. package/build/store/houseStore.js +679 -0
  36. package/build/store/modelStore.js +228 -0
  37. package/build/utils/csg/csg-lib.js +387 -0
  38. package/build/utils/csg/csg-worker.js +94 -0
  39. package/build/utils/csg/three-csg.js +280 -0
  40. package/build/utils/modelHelpers.js +151 -0
  41. package/build/utils/{helpers.js → panoramaHelpers.js} +8 -0
  42. package/package.json +13 -2
@@ -0,0 +1,679 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+
10
+ require("core-js/modules/es.array.reduce.js");
11
+
12
+ require("core-js/modules/es.promise.js");
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _mobx = require("mobx");
17
+
18
+ var _apiStore = _interopRequireDefault(require("../store/apiStore"));
19
+
20
+ var _store = _interopRequireDefault(require("../store"));
21
+
22
+ var THREE = _interopRequireWildcard(require("three"));
23
+
24
+ var _FBXLoader = require("three/examples/jsm/loaders/FBXLoader");
25
+
26
+ var _modelHelpers = require("../utils/modelHelpers");
27
+
28
+ var _threeCsg = _interopRequireDefault(require("../utils/csg/three-csg"));
29
+
30
+ var _wallTexture = _interopRequireDefault(require("../assets/img/wall-texture.jpg"));
31
+
32
+ var _doorTexture = _interopRequireDefault(require("../assets/img/door-texture.jpeg"));
33
+
34
+ var _exteriorWallTexture = _interopRequireDefault(require("../assets/img/exterior-wall-texture.jpeg"));
35
+
36
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
+
38
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
+
40
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
41
+
42
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
43
+
44
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
45
+
46
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
47
+
48
+ (0, _mobx.configure)({
49
+ useProxies: 'never'
50
+ });
51
+ const clippedBuildingConstant = 0.4;
52
+ const doorMaterialOptions = {
53
+ color: '#DADADA',
54
+ side: THREE.DoubleSide
55
+ };
56
+ const modelLoader = new _FBXLoader.FBXLoader();
57
+
58
+ class HouseStore {
59
+ constructor(modelStore) {
60
+ _defineProperty(this, "modelStore", null);
61
+
62
+ _defineProperty(this, "apiStore", new _apiStore.default(_store.default.config.env));
63
+
64
+ _defineProperty(this, "houseGroup", new THREE.Group());
65
+
66
+ _defineProperty(this, "wallsGroup", new THREE.Group());
67
+
68
+ _defineProperty(this, "doorsGroup", new THREE.Group());
69
+
70
+ _defineProperty(this, "doorMaterial", null);
71
+
72
+ _defineProperty(this, "wallsMaterial", null);
73
+
74
+ _defineProperty(this, "wallsColor", '#FFFFFF');
75
+
76
+ _defineProperty(this, "exteriorWallsMaterial", null);
77
+
78
+ _defineProperty(this, "wallsTextures", []);
79
+
80
+ _defineProperty(this, "isDoorsVisible", true);
81
+
82
+ _defineProperty(this, "isFullBuildingVisible", true);
83
+
84
+ _defineProperty(this, "wallsMaterialType", 'texture');
85
+
86
+ _defineProperty(this, "globalPlane", null);
87
+
88
+ _defineProperty(this, "clippingPlanes", []);
89
+
90
+ _defineProperty(this, "furnitureData", {});
91
+
92
+ _defineProperty(this, "loadedModels", {});
93
+
94
+ _defineProperty(this, "loadedTextures", {});
95
+
96
+ (0, _mobx.makeAutoObservable)(this);
97
+ this.modelStore = modelStore;
98
+ this.globalPlane = new THREE.Plane(new THREE.Vector3(0, -this.wallsHeight - 0.5, 0), 1);
99
+ this.clippingPlanes = [this.globalPlane];
100
+ this.setCenterPosition().loadTextures().then(() => {
101
+ this.createFloors().createSpaceBetweenWalls().createWalls().createDoors();
102
+ });
103
+ this.apiStore.loadFurnitureData(this.furniture).then(resp => {
104
+ this.furnitureData = resp;
105
+ this.loadFurniture(0);
106
+ });
107
+ }
108
+
109
+ get textureLoader() {
110
+ return this.modelStore.textureLoader;
111
+ }
112
+
113
+ get sceneScale() {
114
+ return this.modelStore.sceneScale;
115
+ }
116
+
117
+ get wallsHeight() {
118
+ return this.modelStore.wallsHeight;
119
+ }
120
+
121
+ get json() {
122
+ return this.modelStore.json;
123
+ }
124
+
125
+ get vertices() {
126
+ return this.json.Vertices;
127
+ }
128
+
129
+ get rooms() {
130
+ return this.json.Floors[0].Units[0].Rooms;
131
+ }
132
+
133
+ get walls() {
134
+ return this.json.Floors[0].Walls;
135
+ }
136
+
137
+ get exteriorWalls() {
138
+ return this.json.Floors[0].ExteriorWalls;
139
+ }
140
+
141
+ get doors() {
142
+ return this.json.Floors[0].Doors.map(door => this.getParsedAperture(door, 'Door'));
143
+ }
144
+
145
+ get windows() {
146
+ return this.json.Floors[0].Windows.map(window => this.getParsedAperture(window, 'Window'));
147
+ }
148
+
149
+ get apertures() {
150
+ return [...this.doors, ...this.windows];
151
+ }
152
+
153
+ get doorsHeight() {
154
+ return this.wallsHeight / 2 + this.wallsHeight / 4;
155
+ }
156
+
157
+ get wallMaterialOptions() {
158
+ return {
159
+ clippingPlanes: this.clippingPlanes,
160
+ color: this.wallsColor,
161
+ side: THREE.DoubleSide
162
+ };
163
+ }
164
+
165
+ get furniture() {
166
+ return this.rooms.reduce((acc, _ref) => {
167
+ let {
168
+ Furniture
169
+ } = _ref;
170
+ if (!Furniture || !Furniture.length) return acc;
171
+ return [...acc, ...Furniture];
172
+ }, []);
173
+ }
174
+
175
+ getVertexById(vertexId) {
176
+ return this.vertices.find(_ref2 => {
177
+ let {
178
+ ID
179
+ } = _ref2;
180
+ return ID === vertexId;
181
+ });
182
+ }
183
+
184
+ getWallById(wallId) {
185
+ return this.walls.find(_ref3 => {
186
+ let {
187
+ ID
188
+ } = _ref3;
189
+ return ID === wallId;
190
+ });
191
+ }
192
+
193
+ getParsedAperture(aperture, type) {
194
+ const {
195
+ Location,
196
+ Walls
197
+ } = aperture;
198
+ const position = new THREE.Vector3(Location.X, Location.Y, Location.Z);
199
+ const secondWall = this.getParsedWallById(Walls[1], 1);
200
+ const line = new THREE.Line3(secondWall.start, secondWall.end);
201
+ const positionOnFirstWall = new THREE.Vector3();
202
+ line.closestPointToPoint(position, true, positionOnFirstWall);
203
+ const lineBetweenWalls = new THREE.Line3(position, positionOnFirstWall);
204
+ const distanceBetweenWalls = lineBetweenWalls.distance();
205
+ const positionBetweenWalls = lineBetweenWalls.getCenter(positionOnFirstWall);
206
+
207
+ const parsedAperture = _objectSpread(_objectSpread({}, aperture), {}, {
208
+ Type: type,
209
+ Depth: distanceBetweenWalls,
210
+ Location: {
211
+ X: positionBetweenWalls.x,
212
+ Y: positionBetweenWalls.y,
213
+ Z: positionBetweenWalls.z
214
+ }
215
+ });
216
+
217
+ return parsedAperture;
218
+ }
219
+
220
+ getParsedWallById(wallId) {
221
+ let scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.sceneScale;
222
+ const currentWall = this.getWallById(wallId);
223
+ const [coord1, coord2] = currentWall.Vertices.map(vertexId => this.getVertexById(vertexId).Location);
224
+ return {
225
+ id: wallId,
226
+ start: {
227
+ x: coord1.X * scale,
228
+ y: coord1.Y * scale,
229
+ z: 0
230
+ },
231
+ end: {
232
+ x: coord2.X * scale,
233
+ y: coord2.Y * scale,
234
+ z: 0
235
+ }
236
+ };
237
+ }
238
+
239
+ getVerticesFromParsedWalls(walls) {
240
+ return walls.reduce((acc, _ref4) => {
241
+ let {
242
+ start,
243
+ end
244
+ } = _ref4;
245
+ acc.push(new THREE.Vector2(start.x, start.y), new THREE.Vector2(end.x, end.y));
246
+ return acc;
247
+ }, []);
248
+ }
249
+
250
+ createFloors() {
251
+ this.rooms.forEach(_ref5 => {
252
+ let {
253
+ Walls,
254
+ Type
255
+ } = _ref5;
256
+ const walls = Walls.map(wallId => this.getParsedWallById(wallId));
257
+ const params = (0, _modelHelpers.getFloorParams)(Type);
258
+ const vertices = this.getVerticesFromParsedWalls(walls);
259
+ const shape = new THREE.Shape(vertices);
260
+ const geometry = new THREE.ShapeGeometry(shape);
261
+ const material = new THREE.MeshBasicMaterial({
262
+ color: params.color,
263
+ side: THREE.DoubleSide
264
+ });
265
+ const mesh = new THREE.Mesh(geometry, material);
266
+ mesh.name = 'FloorMesh';
267
+ this.loadTexture(params.texture, [0.5, 0.5], texture => {
268
+ const textureMaterial = new THREE.MeshBasicMaterial({
269
+ color: params.color,
270
+ side: THREE.DoubleSide,
271
+ map: texture
272
+ });
273
+ mesh.material = textureMaterial;
274
+ this.houseGroup.add(mesh);
275
+ });
276
+ });
277
+ return this;
278
+ }
279
+
280
+ createSpaceBetweenWalls() {
281
+ const walls = this.exteriorWalls.map(wallId => this.getParsedWallById(wallId));
282
+ const vertices = this.getVerticesFromParsedWalls(walls);
283
+ const clippedDepth = (this.wallsHeight + 0.5) * clippedBuildingConstant + 0.006;
284
+ const depth = this.wallsHeight + 0.002;
285
+ const shapeWithHoles = new THREE.Shape(vertices);
286
+ const shape = new THREE.Shape(vertices);
287
+ this.rooms.forEach(_ref6 => {
288
+ let {
289
+ Walls
290
+ } = _ref6;
291
+ const roomWalls = Walls.map(wallId => this.getParsedWallById(wallId));
292
+ const roomVertices = this.getVerticesFromParsedWalls(roomWalls);
293
+ shapeWithHoles.holes.push(new THREE.Shape(roomVertices));
294
+ });
295
+ const clippedGeometry = new THREE.ExtrudeGeometry(shapeWithHoles, {
296
+ depth: clippedDepth,
297
+ bevelEnabled: false
298
+ });
299
+ const flatGeometry = new THREE.ExtrudeGeometry(shape, {
300
+ depth: 0.001,
301
+ bevelEnabled: false
302
+ });
303
+ const geometry = new THREE.ExtrudeGeometry(shapeWithHoles, {
304
+ depth,
305
+ bevelEnabled: false
306
+ });
307
+ const clippedMaterial = new THREE.MeshBasicMaterial({
308
+ side: THREE.DoubleSide,
309
+ color: '#5C5C5C'
310
+ });
311
+ const material = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
312
+ color: '#5C5C5C'
313
+ }));
314
+ const clippedMesh = new THREE.Mesh(clippedGeometry, clippedMaterial);
315
+ const flatMesh = new THREE.Mesh(flatGeometry, material);
316
+ const mesh = new THREE.Mesh(geometry, material);
317
+ clippedMesh.position.z = -0.005;
318
+ flatMesh.position.z = -0.005;
319
+ mesh.position.z = -0.001;
320
+ const additionalApertureWidth = 0.25;
321
+ const clippedMeshWithApertures = this.subtractApertures(clippedMesh, this.apertures, additionalApertureWidth);
322
+ const meshWithApertures = this.subtractApertures(mesh, this.apertures, additionalApertureWidth);
323
+ clippedMeshWithApertures.name = 'ClippedSpaceBetweenWalls';
324
+ meshWithApertures.name = 'SpaceBetweenWalls';
325
+ flatMesh.name = 'FlatSpaceBetweenWalls';
326
+ this.houseGroup.add(flatMesh, clippedMeshWithApertures, meshWithApertures);
327
+ return this;
328
+ }
329
+
330
+ createWalls() {
331
+ const createWall = (wallId, isExterior) => {
332
+ const {
333
+ start,
334
+ end
335
+ } = this.getParsedWallById(wallId);
336
+ const wallHalfWidth = 0.005;
337
+ const wallShape = new THREE.Shape([new THREE.Vector2(start.x + wallHalfWidth, start.y - wallHalfWidth), new THREE.Vector2(end.x + wallHalfWidth, end.y - wallHalfWidth), new THREE.Vector2(end.x - wallHalfWidth, end.y + wallHalfWidth), new THREE.Vector2(start.x - wallHalfWidth, start.y + wallHalfWidth)]);
338
+ const wallGeometry = new THREE.ExtrudeGeometry(wallShape, {
339
+ depth: this.wallsHeight,
340
+ bevelEnabled: false
341
+ });
342
+ const wallPadGeometry = new THREE.ExtrudeGeometry(wallShape, {
343
+ depth: 0.001,
344
+ bevelEnabled: false
345
+ });
346
+ const wallMaterial = isExterior ? this.exteriorWallsMaterial : this.wallsMaterial;
347
+ const wallPadMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
348
+ color: '#5C5C5C'
349
+ }));
350
+ const wallClippedPadMaterial = new THREE.MeshBasicMaterial({
351
+ side: THREE.DoubleSide,
352
+ color: '#5C5C5C'
353
+ });
354
+ const apertures = this.apertures.filter(aperture => aperture.Walls.some(id => wallId === id));
355
+ const wallMesh = this.subtractApertures(new THREE.Mesh(wallGeometry, wallMaterial), apertures);
356
+ const wallPadMesh = new THREE.Mesh(wallPadGeometry, wallPadMaterial);
357
+ const wallClippedPadMesh = new THREE.Mesh(wallPadGeometry, wallClippedPadMaterial);
358
+ wallPadMesh.position.z = this.wallsHeight;
359
+ wallClippedPadMesh.position.z = (this.wallsHeight + 0.5) * clippedBuildingConstant + 0.001;
360
+ const wallClippedPadMeshWithApertures = this.subtractApertures(wallClippedPadMesh, apertures);
361
+ wallClippedPadMeshWithApertures.visible = false;
362
+ const wallGroup = new THREE.Group();
363
+ wallGroup.name = 'Wall';
364
+ wallGroup.buildingId = wallId;
365
+ wallGroup.isExterior = isExterior;
366
+ wallGroup.add(wallMesh, wallPadMesh, wallClippedPadMeshWithApertures);
367
+ this.wallsGroup.add(wallGroup);
368
+ };
369
+
370
+ this.rooms.forEach(_ref7 => {
371
+ let {
372
+ Walls
373
+ } = _ref7;
374
+ return Walls.forEach(wallId => createWall(wallId, false));
375
+ });
376
+ this.exteriorWalls.forEach(wallId => createWall(wallId, true));
377
+ this.houseGroup.add(this.wallsGroup);
378
+ return this;
379
+ }
380
+
381
+ createDoors() {
382
+ this.doors.forEach(_ref8 => {
383
+ let {
384
+ Width,
385
+ Location,
386
+ Rotation
387
+ } = _ref8;
388
+ const geometry = new THREE.BoxGeometry(Width * this.sceneScale, 0.1, this.doorsHeight);
389
+ let mesh = new THREE.Mesh(geometry, this.doorMaterial);
390
+ mesh.position.x = Location.X * this.sceneScale;
391
+ mesh.position.y = Location.Y * this.sceneScale;
392
+ mesh.position.z = this.doorsHeight / 2;
393
+ mesh.rotation.z = THREE.Math.degToRad(Rotation.Yaw);
394
+ this.doorsGroup.add(mesh);
395
+ });
396
+ this.houseGroup.add(this.doorsGroup);
397
+ return this;
398
+ }
399
+
400
+ subtractApertures(mesh, apertures) {
401
+ let additionalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
402
+ let resultMesh = mesh;
403
+ apertures.forEach(_ref9 => {
404
+ let {
405
+ Width,
406
+ Depth,
407
+ Location,
408
+ Rotation,
409
+ Type
410
+ } = _ref9;
411
+ const isDoor = Type === 'Door';
412
+ const apertureGeometry = new THREE.BoxGeometry((Width + additionalWidth) * this.sceneScale, Depth * this.sceneScale + 1, (isDoor ? this.doorsHeight : this.wallsHeight / 2) + additionalWidth * this.sceneScale);
413
+ const apertureMaterial = new THREE.MeshBasicMaterial({
414
+ color: '#00B4F7'
415
+ });
416
+ const apertureMesh = new THREE.Mesh(apertureGeometry, apertureMaterial);
417
+ apertureMesh.rotation.z = THREE.Math.degToRad(Rotation.Yaw);
418
+ apertureMesh.position.x = Location.X * this.sceneScale;
419
+ apertureMesh.position.y = Location.Y * this.sceneScale;
420
+ apertureMesh.position.z = isDoor ? this.doorsHeight / 2 : this.wallsHeight / 2;
421
+ apertureMesh.updateMatrix();
422
+ resultMesh.updateMatrix();
423
+
424
+ const apertureBSP = _threeCsg.default.fromMesh(apertureMesh);
425
+
426
+ const wallBSP = _threeCsg.default.fromMesh(resultMesh);
427
+
428
+ const resultBSP = wallBSP.subtract(apertureBSP);
429
+ resultMesh = _threeCsg.default.toMesh(resultBSP, mesh.matrix, resultMesh.material);
430
+ });
431
+ return resultMesh;
432
+ }
433
+
434
+ setCenterPosition() {
435
+ const walls = this.exteriorWalls.map(wallId => this.getParsedWallById(wallId));
436
+ const {
437
+ maxX,
438
+ minX,
439
+ maxY,
440
+ minY
441
+ } = (0, _modelHelpers.getMinMaxCoordinates)(walls);
442
+ this.houseGroup.position.set(-(maxX + minX) / 2, -(maxY + minY) / 2);
443
+ return this;
444
+ }
445
+
446
+ loadTexture(img) {
447
+ let repeat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
448
+ let callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
449
+ this.textureLoader.load(img, texture => {
450
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
451
+ texture.repeat.set(repeat[0], repeat[1]);
452
+ texture.flipY = false;
453
+ callback(texture);
454
+ });
455
+ }
456
+
457
+ loadTextures() {
458
+ const assets = [{
459
+ img: _wallTexture.default,
460
+ repeat: [0.5, 0.5],
461
+ callback: texture => {
462
+ this.wallsTextures.push({
463
+ image: _wallTexture.default,
464
+ texture: texture
465
+ });
466
+ this.wallsMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
467
+ map: texture
468
+ }));
469
+ }
470
+ }, {
471
+ img: _exteriorWallTexture.default,
472
+ repeat: [1, 1],
473
+ callback: texture => {
474
+ this.wallsTextures.push({
475
+ image: _exteriorWallTexture.default,
476
+ texture: texture
477
+ });
478
+ this.exteriorWallsMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
479
+ map: texture,
480
+ color: '#FFFFFF'
481
+ }));
482
+ }
483
+ }, {
484
+ img: _doorTexture.default,
485
+ repeat: [1, 1],
486
+ callback: texture => {
487
+ this.doorMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, doorMaterialOptions), {}, {
488
+ map: texture
489
+ }));
490
+ }
491
+ }];
492
+ return Promise.all(assets.map(_ref10 => {
493
+ let {
494
+ img,
495
+ repeat,
496
+ callback
497
+ } = _ref10;
498
+ return new Promise(resolve => {
499
+ this.loadTexture(img, repeat, texture => {
500
+ callback(texture);
501
+ resolve();
502
+ });
503
+ });
504
+ }));
505
+ }
506
+
507
+ loadFurniture(index) {
508
+ const furniture = this.furniture[index];
509
+ if (!furniture) return;
510
+ const furnitureData = this.furnitureData[furniture.Model];
511
+
512
+ if (!furnitureData) {
513
+ this.loadFurniture(index + 1);
514
+ return;
515
+ }
516
+
517
+ const {
518
+ mesh,
519
+ textures
520
+ } = furnitureData;
521
+ const modelPath = "".concat(this.apiStore.API_URL, "/storage/furniture/").concat(mesh);
522
+ const {
523
+ Location,
524
+ Rotation,
525
+ Model: ModelName
526
+ } = furniture;
527
+ const {
528
+ X,
529
+ Y,
530
+ Z
531
+ } = Location;
532
+ const promises = textures.map(url => {
533
+ const texturePath = "".concat(this.apiStore.API_URL, "/storage/furniture/").concat(url);
534
+ return new Promise(resolve => {
535
+ this.textureLoader.load(texturePath, texture => resolve(texture));
536
+ });
537
+ });
538
+
539
+ const onTexturesLoaded = (result, model) => {
540
+ const materials = result.map(texture => new THREE.MeshBasicMaterial({
541
+ map: texture,
542
+ opacity: 0,
543
+ transparent: true
544
+ }));
545
+ model.traverse(node => {
546
+ if (node.isMesh) node.material = materials;
547
+ });
548
+ this.houseGroup.add(model);
549
+ this.loadFurniture(index + 1);
550
+ const opacityInterval = setInterval(() => {
551
+ model.children[0].material.forEach(material => {
552
+ material.opacity += 0.01;
553
+
554
+ if (material.opacity >= 1) {
555
+ clearInterval(opacityInterval);
556
+ material.opacity = 1;
557
+ }
558
+ });
559
+ }, 1);
560
+ };
561
+
562
+ const onModelLoaded = originalModel => {
563
+ const model = originalModel.clone();
564
+ model.scale.set(this.sceneScale, this.sceneScale, this.sceneScale);
565
+ model.position.set(X * this.sceneScale, Y * this.sceneScale, Z * this.sceneScale);
566
+ model.rotation.set(Math.PI / 2, THREE.Math.degToRad(Rotation.Yaw), 0);
567
+ const loadedTextures = this.loadedTextures[ModelName];
568
+
569
+ if (loadedTextures) {
570
+ onTexturesLoaded(loadedTextures, model);
571
+ return;
572
+ }
573
+
574
+ Promise.all(promises).then(result => {
575
+ onTexturesLoaded(result, model);
576
+ this.loadedTextures[ModelName] = result;
577
+ });
578
+ };
579
+
580
+ const loadedModel = this.loadedModels[ModelName];
581
+
582
+ if (loadedModel) {
583
+ onModelLoaded(loadedModel);
584
+ return;
585
+ }
586
+
587
+ modelLoader.load(modelPath, model => {
588
+ this.loadedModels[ModelName] = model;
589
+ onModelLoaded(model);
590
+ });
591
+ } // Actions
592
+
593
+
594
+ setDoorsVisibility(value) {
595
+ this.isDoorsVisible = value;
596
+ this.doorsGroup.children.forEach(door => door.visible = value);
597
+ }
598
+
599
+ setCurrentWallsMaterialType(value) {
600
+ this.wallsMaterialType = value;
601
+ this.wallsGroup.children.forEach(_ref11 => {
602
+ let {
603
+ children,
604
+ isExterior
605
+ } = _ref11;
606
+ const wall = children[0];
607
+
608
+ if (value === 'texture') {
609
+ wall.material = isExterior ? this.exteriorWallsMaterial : this.wallsMaterial;
610
+ return;
611
+ }
612
+
613
+ const color = isExterior ? '#FFFFFF' : this.wallsColor;
614
+ wall.material = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
615
+ color
616
+ }));
617
+ });
618
+ this.doorsGroup.children.forEach(door => {
619
+ if (value === 'texture') {
620
+ door.material = this.doorMaterial;
621
+ return;
622
+ }
623
+
624
+ door.material = new THREE.MeshBasicMaterial(doorMaterialOptions);
625
+ });
626
+ }
627
+
628
+ setCurrentWallColor(color) {
629
+ this.wallsColor = color;
630
+ this.wallsMaterial.color.set(color);
631
+ this.wallsGroup.children.forEach(_ref12 => {
632
+ let {
633
+ children,
634
+ isExterior
635
+ } = _ref12;
636
+ if (isExterior) return;
637
+ const wall = children[0];
638
+ wall.material.color.set(color);
639
+ });
640
+ }
641
+
642
+ setCurrentWallTexture(texture) {
643
+ this.wallsMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
644
+ map: texture
645
+ }));
646
+ this.setCurrentWallsMaterialType('texture');
647
+ }
648
+
649
+ addWallTexture(image) {
650
+ this.loadTexture(image, [0.5, 0.5], texture => {
651
+ this.wallsTextures.push({
652
+ image,
653
+ texture
654
+ });
655
+ this.setCurrentWallTexture(texture);
656
+ });
657
+ }
658
+
659
+ setFullBuildingVisibility(value) {
660
+ this.isFullBuildingVisible = value;
661
+ this.globalPlane.constant = this.isFullBuildingVisible ? 1 : clippedBuildingConstant;
662
+ this.wallsGroup.children.forEach(_ref13 => {
663
+ let {
664
+ children
665
+ } = _ref13;
666
+ return children[2].visible = !value;
667
+ });
668
+ }
669
+
670
+ setPlanMode() {
671
+ this.setDoorsVisibility(false);
672
+ this.setFullBuildingVisibility(false);
673
+ this.setCurrentWallsMaterialType('color');
674
+ }
675
+
676
+ }
677
+
678
+ var _default = HouseStore;
679
+ exports.default = _default;