hart-estate-widget 0.0.20 → 0.0.23
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/build/assets/img/Concrete_D.png +0 -0
- package/build/assets/img/Concrete_N.png +0 -0
- package/build/assets/img/Concrete_RMO.png +0 -0
- package/build/assets/img/Grass_D.png +0 -0
- package/build/assets/img/Grass_N.png +0 -0
- package/build/assets/img/Grass_RMO.png +0 -0
- package/build/assets/img/exterior-wall-texture-roughness /320/272/320/276/320/277/320/270/321/217.jpg +0 -0
- package/build/assets/img/exterior-wall-texture-roughness.jpg +0 -0
- package/build/assets/img/exterior-wall-texture-roughness.psd +0 -0
- package/build/assets/img/floor-dark-roughness.jpg +0 -0
- package/build/components/ModelTab.js +2 -0
- package/build/store/houseStore.js +211 -44
- package/build/store/modelStore.js +31 -11
- package/build/utils/modelHelpers.js +4 -0
- package/package.json +1 -1
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -109,6 +109,8 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
|
|
109
109
|
}, "View from above"), /*#__PURE__*/_react.default.createElement("li", {
|
110
110
|
onClick: () => _modelStore.default.setCurrentControlsType('orbit')
|
111
111
|
}, "Free camera"), /*#__PURE__*/_react.default.createElement("li", {
|
112
|
+
onClick: () => houseStore.setShadowsVisibility(!houseStore.isShadowsVisible)
|
113
|
+
}, "Shadows: ", houseStore.isShadowsVisible ? 'On' : 'Off'), /*#__PURE__*/_react.default.createElement("li", {
|
112
114
|
onClick: () => houseStore.setPlanMode()
|
113
115
|
}, "Plan"), /*#__PURE__*/_react.default.createElement("li", {
|
114
116
|
onClick: () => houseStore.setFullBuildingVisibility(!houseStore.isFullBuildingVisible)
|
@@ -11,6 +11,8 @@ require("core-js/modules/es.array.reduce.js");
|
|
11
11
|
|
12
12
|
require("core-js/modules/es.promise.js");
|
13
13
|
|
14
|
+
require("core-js/modules/es.string.includes.js");
|
15
|
+
|
14
16
|
var _react = _interopRequireDefault(require("react"));
|
15
17
|
|
16
18
|
var _mobx = require("mobx");
|
@@ -33,6 +35,8 @@ var _doorTexture = _interopRequireDefault(require("../assets/img/door-texture.jp
|
|
33
35
|
|
34
36
|
var _exteriorWallTexture = _interopRequireDefault(require("../assets/img/exterior-wall-texture.jpeg"));
|
35
37
|
|
38
|
+
var _exteriorWallTextureRoughness = _interopRequireDefault(require("../assets/img/exterior-wall-texture-roughness.jpg"));
|
39
|
+
|
36
40
|
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
41
|
|
38
42
|
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; }
|
@@ -55,6 +59,11 @@ const doorMaterialOptions = {
|
|
55
59
|
};
|
56
60
|
const modelLoader = new _FBXLoader.FBXLoader();
|
57
61
|
|
62
|
+
const createDefaultMaterial = options => new THREE.MeshStandardMaterial(_objectSpread({
|
63
|
+
roughness: 1,
|
64
|
+
metalness: 0
|
65
|
+
}, options));
|
66
|
+
|
58
67
|
class HouseStore {
|
59
68
|
constructor(modelStore) {
|
60
69
|
_defineProperty(this, "modelStore", null);
|
@@ -73,6 +82,11 @@ class HouseStore {
|
|
73
82
|
|
74
83
|
_defineProperty(this, "wallsColor", '#FFFFFF');
|
75
84
|
|
85
|
+
_defineProperty(this, "exteriorWallsMaps", {
|
86
|
+
map: null,
|
87
|
+
roughnessMap: null
|
88
|
+
});
|
89
|
+
|
76
90
|
_defineProperty(this, "exteriorWallsMaterial", null);
|
77
91
|
|
78
92
|
_defineProperty(this, "wallsTextures", []);
|
@@ -93,6 +107,8 @@ class HouseStore {
|
|
93
107
|
|
94
108
|
_defineProperty(this, "loadedTextures", {});
|
95
109
|
|
110
|
+
_defineProperty(this, "isShadowsVisible", true);
|
111
|
+
|
96
112
|
(0, _mobx.makeAutoObservable)(this);
|
97
113
|
this.modelStore = modelStore;
|
98
114
|
this.houseGroup.name = 'House-Group';
|
@@ -259,20 +275,33 @@ class HouseStore {
|
|
259
275
|
const vertices = this.getVerticesFromParsedWalls(walls);
|
260
276
|
const shape = new THREE.Shape(vertices);
|
261
277
|
const geometry = new THREE.ShapeGeometry(shape);
|
262
|
-
const material =
|
278
|
+
const material = createDefaultMaterial({
|
263
279
|
color: params.color,
|
264
280
|
side: THREE.DoubleSide
|
265
281
|
});
|
266
282
|
const mesh = new THREE.Mesh(geometry, material);
|
283
|
+
mesh.receiveShadow = true;
|
284
|
+
mesh.castShadow = false;
|
267
285
|
mesh.name = 'FloorMesh';
|
268
|
-
|
269
|
-
|
286
|
+
|
287
|
+
const callback = (texture, roughnessMap) => {
|
288
|
+
const textureMaterial = createDefaultMaterial({
|
270
289
|
color: params.color,
|
271
290
|
side: THREE.DoubleSide,
|
272
291
|
map: texture
|
273
292
|
});
|
274
293
|
mesh.material = textureMaterial;
|
294
|
+
if (roughnessMap) mesh.material.roughnessMap = roughnessMap;
|
275
295
|
this.houseGroup.add(mesh);
|
296
|
+
};
|
297
|
+
|
298
|
+
this.loadTexture(params.texture, [0.5, 0.5], texture => {
|
299
|
+
if (!params.roughnessMap) {
|
300
|
+
callback(texture);
|
301
|
+
return;
|
302
|
+
}
|
303
|
+
|
304
|
+
this.loadTexture(params.roughnessMap, [0.5, 0.5], roughnessMap => callback(texture, roughnessMap));
|
276
305
|
});
|
277
306
|
});
|
278
307
|
return this;
|
@@ -305,16 +334,18 @@ class HouseStore {
|
|
305
334
|
depth,
|
306
335
|
bevelEnabled: false
|
307
336
|
});
|
308
|
-
const clippedMaterial =
|
337
|
+
const clippedMaterial = createDefaultMaterial({
|
309
338
|
side: THREE.DoubleSide,
|
310
339
|
color: '#5C5C5C'
|
311
340
|
});
|
312
|
-
const material =
|
341
|
+
const material = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
|
313
342
|
color: '#5C5C5C'
|
314
343
|
}));
|
315
344
|
const clippedMesh = new THREE.Mesh(clippedGeometry, clippedMaterial);
|
316
345
|
const flatMesh = new THREE.Mesh(flatGeometry, material);
|
317
346
|
const mesh = new THREE.Mesh(geometry, material);
|
347
|
+
flatMesh.receiveShadow = false;
|
348
|
+
flatMesh.castShadow = false;
|
318
349
|
clippedMesh.position.z = -0.005;
|
319
350
|
flatMesh.position.z = -0.005;
|
320
351
|
mesh.position.z = -0.001;
|
@@ -324,6 +355,10 @@ class HouseStore {
|
|
324
355
|
clippedMeshWithApertures.name = 'ClippedSpaceBetweenWalls';
|
325
356
|
meshWithApertures.name = 'SpaceBetweenWalls';
|
326
357
|
flatMesh.name = 'FlatSpaceBetweenWalls';
|
358
|
+
clippedMeshWithApertures.receiveShadow = false;
|
359
|
+
clippedMeshWithApertures.castShadow = false;
|
360
|
+
meshWithApertures.receiveShadow = false;
|
361
|
+
meshWithApertures.castShadow = false;
|
327
362
|
this.houseGroup.add(flatMesh, clippedMeshWithApertures, meshWithApertures);
|
328
363
|
return this;
|
329
364
|
}
|
@@ -345,10 +380,10 @@ class HouseStore {
|
|
345
380
|
bevelEnabled: false
|
346
381
|
});
|
347
382
|
const wallMaterial = isExterior ? this.exteriorWallsMaterial : this.wallsMaterial;
|
348
|
-
const wallPadMaterial =
|
383
|
+
const wallPadMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
|
349
384
|
color: '#5C5C5C'
|
350
385
|
}));
|
351
|
-
const wallClippedPadMaterial =
|
386
|
+
const wallClippedPadMaterial = createDefaultMaterial({
|
352
387
|
side: THREE.DoubleSide,
|
353
388
|
color: '#5C5C5C'
|
354
389
|
});
|
@@ -356,10 +391,18 @@ class HouseStore {
|
|
356
391
|
const wallMesh = this.subtractApertures(new THREE.Mesh(wallGeometry, wallMaterial), apertures);
|
357
392
|
const wallPadMesh = new THREE.Mesh(wallPadGeometry, wallPadMaterial);
|
358
393
|
const wallClippedPadMesh = new THREE.Mesh(wallPadGeometry, wallClippedPadMaterial);
|
394
|
+
wallMesh.castShadow = true;
|
395
|
+
wallMesh.receiveShadow = !isExterior;
|
396
|
+
wallPadMesh.castShadow = false;
|
397
|
+
wallPadMesh.receiveShadow = false;
|
398
|
+
wallClippedPadMesh.castShadow = false;
|
399
|
+
wallClippedPadMesh.receiveShadow = false;
|
359
400
|
wallPadMesh.position.z = this.wallsHeight;
|
360
401
|
wallClippedPadMesh.position.z = (this.wallsHeight + 0.5) * clippedBuildingConstant + 0.001;
|
361
402
|
const wallClippedPadMeshWithApertures = this.subtractApertures(wallClippedPadMesh, apertures);
|
362
403
|
wallClippedPadMeshWithApertures.visible = false;
|
404
|
+
wallClippedPadMeshWithApertures.castShadow = false;
|
405
|
+
wallClippedPadMeshWithApertures.receiveShadow = false;
|
363
406
|
const wallGroup = new THREE.Group();
|
364
407
|
wallGroup.name = 'Wall';
|
365
408
|
wallGroup.buildingId = wallId;
|
@@ -368,6 +411,11 @@ class HouseStore {
|
|
368
411
|
this.wallsGroup.add(wallGroup);
|
369
412
|
};
|
370
413
|
|
414
|
+
this.exteriorWallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
|
415
|
+
map: this.exteriorWallsMaps.map,
|
416
|
+
roughnessMap: this.exteriorWallsMaps.roughnessMap,
|
417
|
+
color: '#FFFFFF'
|
418
|
+
}));
|
371
419
|
this.rooms.forEach(_ref7 => {
|
372
420
|
let {
|
373
421
|
Walls
|
@@ -392,6 +440,8 @@ class HouseStore {
|
|
392
440
|
mesh.position.y = Location.Y * this.sceneScale;
|
393
441
|
mesh.position.z = this.doorsHeight / 2;
|
394
442
|
mesh.rotation.z = THREE.Math.degToRad(Rotation.Yaw);
|
443
|
+
mesh.receiveShadow = true;
|
444
|
+
mesh.castShadow = true;
|
395
445
|
this.doorsGroup.add(mesh);
|
396
446
|
});
|
397
447
|
this.houseGroup.add(this.doorsGroup);
|
@@ -411,7 +461,7 @@ class HouseStore {
|
|
411
461
|
} = _ref9;
|
412
462
|
const isDoor = Type === 'Door';
|
413
463
|
const apertureGeometry = new THREE.BoxGeometry((Width + additionalWidth) * this.sceneScale, Depth * this.sceneScale + 1, (isDoor ? this.doorsHeight : this.wallsHeight / 2) + additionalWidth * this.sceneScale);
|
414
|
-
const apertureMaterial =
|
464
|
+
const apertureMaterial = createDefaultMaterial({
|
415
465
|
color: '#00B4F7'
|
416
466
|
});
|
417
467
|
const apertureMesh = new THREE.Mesh(apertureGeometry, apertureMaterial);
|
@@ -440,7 +490,60 @@ class HouseStore {
|
|
440
490
|
maxY,
|
441
491
|
minY
|
442
492
|
} = (0, _modelHelpers.getMinMaxCoordinates)(walls);
|
443
|
-
|
493
|
+
const centerX = (maxX + minX) / 2;
|
494
|
+
const centerY = (maxY + minY) / 2;
|
495
|
+
const lightsOffset = 25;
|
496
|
+
this.houseGroup.position.set(-centerX, -centerY);
|
497
|
+
const lights = [{
|
498
|
+
x: centerX - lightsOffset,
|
499
|
+
y: centerY - lightsOffset,
|
500
|
+
z: this.wallsHeight * 3,
|
501
|
+
power: 0.4,
|
502
|
+
castShadow: true
|
503
|
+
}, {
|
504
|
+
x: centerX - lightsOffset,
|
505
|
+
y: centerY - lightsOffset,
|
506
|
+
z: this.wallsHeight * 2,
|
507
|
+
power: 1,
|
508
|
+
castShadow: false
|
509
|
+
}, {
|
510
|
+
x: centerX + lightsOffset,
|
511
|
+
y: centerY + lightsOffset,
|
512
|
+
z: this.wallsHeight * 2,
|
513
|
+
power: 1.1,
|
514
|
+
castShadow: false
|
515
|
+
}, {
|
516
|
+
x: centerX,
|
517
|
+
y: centerY,
|
518
|
+
z: this.wallsHeight * 5,
|
519
|
+
power: 0.1,
|
520
|
+
castShadow: false
|
521
|
+
}];
|
522
|
+
const targetObject = new THREE.Object3D();
|
523
|
+
targetObject.position.set(centerX, centerY, 0);
|
524
|
+
this.houseGroup.add(targetObject);
|
525
|
+
lights.forEach(_ref10 => {
|
526
|
+
let {
|
527
|
+
x,
|
528
|
+
y,
|
529
|
+
z,
|
530
|
+
power,
|
531
|
+
castShadow
|
532
|
+
} = _ref10;
|
533
|
+
const light = new THREE.DirectionalLight(0xffffff, power);
|
534
|
+
light.position.set(x, y, z);
|
535
|
+
light.shadowLight = castShadow;
|
536
|
+
light.castShadow = castShadow;
|
537
|
+
light.shadow.camera.left = -centerX * 2;
|
538
|
+
light.shadow.camera.right = centerX * 2;
|
539
|
+
light.shadow.camera.top = centerY * 2;
|
540
|
+
light.shadow.camera.bottom = -centerY * 2;
|
541
|
+
light.shadow.camera.zoom = 1;
|
542
|
+
light.shadow.mapSize = new THREE.Vector2(2048, 2048);
|
543
|
+
light.shadow.normalBias = 1;
|
544
|
+
light.target = targetObject;
|
545
|
+
this.houseGroup.add(light);
|
546
|
+
});
|
444
547
|
return this;
|
445
548
|
}
|
446
549
|
|
@@ -464,7 +567,7 @@ class HouseStore {
|
|
464
567
|
image: _wallTexture.default,
|
465
568
|
texture: texture
|
466
569
|
});
|
467
|
-
this.wallsMaterial =
|
570
|
+
this.wallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
|
468
571
|
map: texture
|
469
572
|
}));
|
470
573
|
}
|
@@ -476,26 +579,33 @@ class HouseStore {
|
|
476
579
|
image: _exteriorWallTexture.default,
|
477
580
|
texture: texture
|
478
581
|
});
|
479
|
-
this.
|
480
|
-
|
481
|
-
|
482
|
-
|
582
|
+
this.exteriorWallsMaps.map = texture;
|
583
|
+
}
|
584
|
+
}, {
|
585
|
+
img: _exteriorWallTextureRoughness.default,
|
586
|
+
repeat: [1, 1],
|
587
|
+
callback: texture => {
|
588
|
+
this.wallsTextures.push({
|
589
|
+
image: _exteriorWallTextureRoughness.default,
|
590
|
+
texture: texture
|
591
|
+
});
|
592
|
+
this.exteriorWallsMaps.roughnessMap = texture;
|
483
593
|
}
|
484
594
|
}, {
|
485
595
|
img: _doorTexture.default,
|
486
596
|
repeat: [1, 1],
|
487
597
|
callback: texture => {
|
488
|
-
this.doorMaterial =
|
598
|
+
this.doorMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, doorMaterialOptions), {}, {
|
489
599
|
map: texture
|
490
600
|
}));
|
491
601
|
}
|
492
602
|
}];
|
493
|
-
return Promise.all(assets.map(
|
603
|
+
return Promise.all(assets.map(_ref11 => {
|
494
604
|
let {
|
495
605
|
img,
|
496
606
|
repeat,
|
497
607
|
callback
|
498
|
-
} =
|
608
|
+
} = _ref11;
|
499
609
|
return new Promise(resolve => {
|
500
610
|
this.loadTexture(img, repeat, texture => {
|
501
611
|
callback(texture);
|
@@ -522,7 +632,7 @@ class HouseStore {
|
|
522
632
|
const modelPath = "".concat(this.apiStore.API_URL, "/storage/furniture/").concat(mesh);
|
523
633
|
const {
|
524
634
|
Location,
|
525
|
-
|
635
|
+
WEB_Rotation,
|
526
636
|
Model: ModelName
|
527
637
|
} = furniture;
|
528
638
|
const {
|
@@ -538,33 +648,80 @@ class HouseStore {
|
|
538
648
|
});
|
539
649
|
|
540
650
|
const onTexturesLoaded = (result, model) => {
|
541
|
-
const
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
651
|
+
const materialsCount = result.reduce((acc, _ref12) => {
|
652
|
+
let {
|
653
|
+
image
|
654
|
+
} = _ref12;
|
655
|
+
if (!image.currentSrc.includes('_D.') && !image.currentSrc.includes('_DA.')) return acc;
|
656
|
+
return acc += 1;
|
657
|
+
}, 0);
|
658
|
+
|
659
|
+
const createMaterial = num => {
|
660
|
+
const map = result.find(_ref13 => {
|
661
|
+
let {
|
662
|
+
image
|
663
|
+
} = _ref13;
|
664
|
+
return image.currentSrc.includes("".concat(num, "_D.")) || image.currentSrc.includes("".concat(num, "_DA."));
|
665
|
+
});
|
666
|
+
const envMap = result.find(_ref14 => {
|
667
|
+
let {
|
668
|
+
image
|
669
|
+
} = _ref14;
|
670
|
+
return image.currentSrc.includes("".concat(num, "_RMO."));
|
671
|
+
});
|
672
|
+
const normalMap = result.find(_ref15 => {
|
673
|
+
let {
|
674
|
+
image
|
675
|
+
} = _ref15;
|
676
|
+
return image.currentSrc.includes("".concat(num, "_N."));
|
677
|
+
});
|
678
|
+
const material = new THREE.MeshStandardMaterial({
|
679
|
+
roughness: 1,
|
680
|
+
transparent: true
|
681
|
+
});
|
682
|
+
material.depthWrite = !(ModelName === 'Flower' && num === '01');
|
683
|
+
if (map) material.map = map;
|
684
|
+
if (envMap) material.envMap = envMap;
|
685
|
+
if (normalMap) material.normalMap = normalMap;
|
686
|
+
return material;
|
687
|
+
};
|
688
|
+
|
689
|
+
let materials = new THREE.MeshPhysicalMaterial({
|
690
|
+
roughness: 1,
|
691
|
+
clearcoat: 1,
|
692
|
+
clearcoatRoughness: 1,
|
693
|
+
reflectivity: 0,
|
694
|
+
fog: false
|
695
|
+
});
|
696
|
+
|
697
|
+
if (materialsCount === 1) {
|
698
|
+
materials = createMaterial('');
|
699
|
+
}
|
700
|
+
|
701
|
+
if (materialsCount > 1) {
|
702
|
+
materials = [...Array(materialsCount).keys()].map(i => {
|
703
|
+
const num = i + 1;
|
704
|
+
const realNum = num < 10 ? "0".concat(num) : num;
|
705
|
+
return createMaterial(realNum);
|
706
|
+
});
|
707
|
+
}
|
708
|
+
|
546
709
|
model.traverse(node => {
|
547
|
-
if (node.isMesh)
|
710
|
+
if (node.isMesh) {
|
711
|
+
node.material = materials;
|
712
|
+
node.receiveShadow = true;
|
713
|
+
node.castShadow = true;
|
714
|
+
}
|
548
715
|
});
|
549
716
|
this.houseGroup.add(model);
|
550
717
|
this.loadFurniture(index + 1);
|
551
|
-
const opacityInterval = setInterval(() => {
|
552
|
-
model.children[0].material.forEach(material => {
|
553
|
-
material.opacity += 0.01;
|
554
|
-
|
555
|
-
if (material.opacity >= 1) {
|
556
|
-
clearInterval(opacityInterval);
|
557
|
-
material.opacity = 1;
|
558
|
-
}
|
559
|
-
});
|
560
|
-
}, 1);
|
561
718
|
};
|
562
719
|
|
563
720
|
const onModelLoaded = originalModel => {
|
564
721
|
const model = originalModel.clone();
|
565
722
|
model.scale.set(this.sceneScale, this.sceneScale, this.sceneScale);
|
566
723
|
model.position.set(X * this.sceneScale, Y * this.sceneScale, Z * this.sceneScale);
|
567
|
-
model.rotation.set(Math.PI / 2, THREE.Math.degToRad(
|
724
|
+
model.rotation.set(Math.PI / 2, THREE.Math.degToRad(WEB_Rotation.Yaw), 0);
|
568
725
|
const loadedTextures = this.loadedTextures[ModelName];
|
569
726
|
|
570
727
|
if (loadedTextures) {
|
@@ -592,6 +749,16 @@ class HouseStore {
|
|
592
749
|
} // Actions
|
593
750
|
|
594
751
|
|
752
|
+
setShadowsVisibility(value) {
|
753
|
+
this.isShadowsVisible = value;
|
754
|
+
this.houseGroup.children.forEach(node => {
|
755
|
+
const isLight = node instanceof THREE.DirectionalLight;
|
756
|
+
if (!isLight) return;
|
757
|
+
if (!node.shadowLight) return;
|
758
|
+
node.castShadow = value;
|
759
|
+
});
|
760
|
+
}
|
761
|
+
|
595
762
|
setDoorsVisibility(value) {
|
596
763
|
this.isDoorsVisible = value;
|
597
764
|
this.doorsGroup.children.forEach(door => door.visible = value);
|
@@ -599,11 +766,11 @@ class HouseStore {
|
|
599
766
|
|
600
767
|
setCurrentWallsMaterialType(value) {
|
601
768
|
this.wallsMaterialType = value;
|
602
|
-
this.wallsGroup.children.forEach(
|
769
|
+
this.wallsGroup.children.forEach(_ref16 => {
|
603
770
|
let {
|
604
771
|
children,
|
605
772
|
isExterior
|
606
|
-
} =
|
773
|
+
} = _ref16;
|
607
774
|
const wall = children[0];
|
608
775
|
|
609
776
|
if (value === 'texture') {
|
@@ -612,7 +779,7 @@ class HouseStore {
|
|
612
779
|
}
|
613
780
|
|
614
781
|
const color = isExterior ? '#FFFFFF' : this.wallsColor;
|
615
|
-
wall.material =
|
782
|
+
wall.material = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
|
616
783
|
color
|
617
784
|
}));
|
618
785
|
});
|
@@ -622,18 +789,18 @@ class HouseStore {
|
|
622
789
|
return;
|
623
790
|
}
|
624
791
|
|
625
|
-
door.material =
|
792
|
+
door.material = createDefaultMaterial(doorMaterialOptions);
|
626
793
|
});
|
627
794
|
}
|
628
795
|
|
629
796
|
setCurrentWallColor(color) {
|
630
797
|
this.wallsColor = color;
|
631
798
|
this.wallsMaterial.color.set(color);
|
632
|
-
this.wallsGroup.children.forEach(
|
799
|
+
this.wallsGroup.children.forEach(_ref17 => {
|
633
800
|
let {
|
634
801
|
children,
|
635
802
|
isExterior
|
636
|
-
} =
|
803
|
+
} = _ref17;
|
637
804
|
if (isExterior) return;
|
638
805
|
const wall = children[0];
|
639
806
|
wall.material.color.set(color);
|
@@ -641,7 +808,7 @@ class HouseStore {
|
|
641
808
|
}
|
642
809
|
|
643
810
|
setCurrentWallTexture(texture) {
|
644
|
-
this.wallsMaterial =
|
811
|
+
this.wallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
|
645
812
|
map: texture
|
646
813
|
}));
|
647
814
|
this.setCurrentWallsMaterialType('texture');
|
@@ -660,10 +827,10 @@ class HouseStore {
|
|
660
827
|
setFullBuildingVisibility(value) {
|
661
828
|
this.isFullBuildingVisible = value;
|
662
829
|
this.globalPlane.constant = this.isFullBuildingVisible ? 1 : clippedBuildingConstant;
|
663
|
-
this.wallsGroup.children.forEach(
|
830
|
+
this.wallsGroup.children.forEach(_ref18 => {
|
664
831
|
let {
|
665
832
|
children
|
666
|
-
} =
|
833
|
+
} = _ref18;
|
667
834
|
return children[2].visible = !value;
|
668
835
|
});
|
669
836
|
}
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
7
|
|
8
|
+
require("core-js/modules/es.promise.js");
|
9
|
+
|
8
10
|
require("core-js/modules/web.dom-collections.iterator.js");
|
9
11
|
|
10
12
|
var _react = _interopRequireDefault(require("react"));
|
@@ -92,25 +94,30 @@ class ModelStore {
|
|
92
94
|
|
93
95
|
_defineProperty(this, "createScene", () => {
|
94
96
|
this.scene = new THREE.Scene();
|
95
|
-
const light = new THREE.AmbientLight(0xffffff);
|
96
97
|
this.scene.rotation.x = -Math.PI / 2;
|
97
98
|
this.scene.scale.y = -1;
|
98
|
-
this.scene.background = new THREE.Color('#
|
99
|
-
this.scene.
|
99
|
+
this.scene.background = new THREE.Color('#E7E7E7');
|
100
|
+
this.scene.fog = new THREE.Fog('#E7E7E7', 5, 200);
|
100
101
|
this.createGround();
|
101
102
|
return this;
|
102
103
|
});
|
103
104
|
|
104
105
|
_defineProperty(this, "createGround", () => {
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
106
|
+
const textures = {};
|
107
|
+
const assets = [new Promise(resolve => this.loadTexture(_grass.default, [75, 75], texture => {
|
108
|
+
textures.map = texture;
|
109
|
+
resolve();
|
110
|
+
}))];
|
111
|
+
Promise.all(assets).then(() => {
|
112
|
+
let groundMaterial = new THREE.MeshStandardMaterial({
|
113
|
+
map: textures.map,
|
114
|
+
normalMap: textures.normalMap,
|
115
|
+
envMap: textures.envMap,
|
116
|
+
color: 0xe7e7e7
|
111
117
|
});
|
112
|
-
let groundMesh = new THREE.Mesh(new THREE.
|
118
|
+
let groundMesh = new THREE.Mesh(new THREE.CircleGeometry(250, 100), groundMaterial);
|
113
119
|
groundMesh.position.z = -0.01;
|
120
|
+
groundMesh.receiveShadow = true;
|
114
121
|
this.scene.add(groundMesh);
|
115
122
|
});
|
116
123
|
return this;
|
@@ -121,6 +128,8 @@ class ModelStore {
|
|
121
128
|
this.renderer.setPixelRatio(window.devicePixelRatio);
|
122
129
|
this.updateRendererSize();
|
123
130
|
this.renderer.localClippingEnabled = true;
|
131
|
+
this.renderer.shadowMap.enabled = true;
|
132
|
+
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
124
133
|
return this;
|
125
134
|
});
|
126
135
|
|
@@ -187,7 +196,7 @@ class ModelStore {
|
|
187
196
|
this.controls.moveTo(0, 0, 0, true);
|
188
197
|
this.controls.mouseButtons.wheel = _cameraControls.default.ACTION.DOLLY;
|
189
198
|
this.controls.touches.two = _cameraControls.default.ACTION.TOUCH_DOLLY_TRUCK;
|
190
|
-
this.controls.rotateTo(0, angle, true);
|
199
|
+
this.controls.rotateTo(0, angle, true);
|
191
200
|
});
|
192
201
|
|
193
202
|
_defineProperty(this, "setCurrentControlsType", type => {
|
@@ -253,6 +262,17 @@ class ModelStore {
|
|
253
262
|
return ((_this$container2 = this.container) === null || _this$container2 === void 0 ? void 0 : _this$container2.offsetHeight) || window.innerHeight;
|
254
263
|
}
|
255
264
|
|
265
|
+
loadTexture(img) {
|
266
|
+
let repeat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
|
267
|
+
let callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
|
268
|
+
this.textureLoader.load(img, texture => {
|
269
|
+
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
270
|
+
texture.repeat.set(repeat[0], repeat[1]);
|
271
|
+
texture.flipY = false;
|
272
|
+
callback(texture);
|
273
|
+
});
|
274
|
+
}
|
275
|
+
|
256
276
|
}
|
257
277
|
|
258
278
|
var _default = new ModelStore();
|
@@ -28,18 +28,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
28
28
|
const FloorParams = {
|
29
29
|
'default': {
|
30
30
|
texture: _floorDark.default,
|
31
|
+
roughnessMap: null,
|
31
32
|
color: '#FFFFFF'
|
32
33
|
},
|
33
34
|
'Kitchen': {
|
34
35
|
texture: _floorWhite.default,
|
36
|
+
roughnessMap: null,
|
35
37
|
color: '#FFFFFF'
|
36
38
|
},
|
37
39
|
'Balcony': {
|
38
40
|
texture: _floor.default,
|
41
|
+
roughnessMap: null,
|
39
42
|
color: '#DADADA'
|
40
43
|
},
|
41
44
|
'Bathroom': {
|
42
45
|
texture: _floorBathroom.default,
|
46
|
+
roughnessMap: null,
|
43
47
|
color: '#FFFFFF'
|
44
48
|
}
|
45
49
|
};
|