hart-estate-widget 0.0.18 → 0.0.21

package/build/components/ModelTab.js

@@ -33,6 +33,9 @@ const ModelTab = (0, _mobxReactLite.observer)(_ref => {
   } = _modelStore.default;
   (0, _react.useEffect)(() => {
     const container = document.querySelector('.widget-tab__model-scene');
+
+    _modelStore.default.setContainer(container);
+
     container.appendChild(_modelStore.default.renderer.domElement);
 
     _modelStore.default.setCurrentControlsType('orbit');

package/build/store/houseStore.js

@@ -11,6 +11,8 @@ require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.promise.js");
 
+require("core-js/modules/es.string.includes.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _mobx = require("mobx");
@@ -55,6 +57,8 @@ const doorMaterialOptions = {
 };
 const modelLoader = new _FBXLoader.FBXLoader();
 
+const createDefaultMaterial = options => new THREE.MeshPhongMaterial(options);
+
 class HouseStore {
   constructor(modelStore) {
     _defineProperty(this, "modelStore", null);
@@ -259,14 +263,14 @@ class HouseStore {
       const vertices = this.getVerticesFromParsedWalls(walls);
       const shape = new THREE.Shape(vertices);
       const geometry = new THREE.ShapeGeometry(shape);
-      const material = new THREE.MeshBasicMaterial({
+      const material = createDefaultMaterial({
         color: params.color,
         side: THREE.DoubleSide
       });
       const mesh = new THREE.Mesh(geometry, material);
       mesh.name = 'FloorMesh';
       this.loadTexture(params.texture, [0.5, 0.5], texture => {
-        const textureMaterial = new THREE.MeshBasicMaterial({
+        const textureMaterial = createDefaultMaterial({
           color: params.color,
           side: THREE.DoubleSide,
           map: texture
@@ -305,11 +309,11 @@ class HouseStore {
       depth,
       bevelEnabled: false
     });
-    const clippedMaterial = new THREE.MeshBasicMaterial({
+    const clippedMaterial = createDefaultMaterial({
       side: THREE.DoubleSide,
       color: '#5C5C5C'
     });
-    const material = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+    const material = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
       color: '#5C5C5C'
     }));
     const clippedMesh = new THREE.Mesh(clippedGeometry, clippedMaterial);
@@ -345,10 +349,10 @@ class HouseStore {
         bevelEnabled: false
       });
       const wallMaterial = isExterior ? this.exteriorWallsMaterial : this.wallsMaterial;
-      const wallPadMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+      const wallPadMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
         color: '#5C5C5C'
       }));
-      const wallClippedPadMaterial = new THREE.MeshBasicMaterial({
+      const wallClippedPadMaterial = createDefaultMaterial({
         side: THREE.DoubleSide,
         color: '#5C5C5C'
       });
@@ -411,7 +415,7 @@ class HouseStore {
       } = _ref9;
       const isDoor = Type === 'Door';
       const apertureGeometry = new THREE.BoxGeometry((Width + additionalWidth) * this.sceneScale, Depth * this.sceneScale + 1, (isDoor ? this.doorsHeight : this.wallsHeight / 2) + additionalWidth * this.sceneScale);
-      const apertureMaterial = new THREE.MeshBasicMaterial({
+      const apertureMaterial = createDefaultMaterial({
         color: '#00B4F7'
       });
       const apertureMesh = new THREE.Mesh(apertureGeometry, apertureMaterial);
@@ -464,7 +468,7 @@ class HouseStore {
           image: _wallTexture.default,
           texture: texture
         });
-        this.wallsMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+        this.wallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
           map: texture
         }));
       }
@@ -476,7 +480,7 @@ class HouseStore {
           image: _exteriorWallTexture.default,
           texture: texture
         });
-        this.exteriorWallsMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+        this.exteriorWallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
           map: texture,
           color: '#FFFFFF'
         }));
@@ -485,7 +489,7 @@ class HouseStore {
       img: _doorTexture.default,
       repeat: [1, 1],
       callback: texture => {
-        this.doorMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, doorMaterialOptions), {}, {
+        this.doorMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, doorMaterialOptions), {}, {
           map: texture
         }));
       }
@@ -522,7 +526,7 @@ class HouseStore {
     const modelPath = "".concat(this.apiStore.API_URL, "/storage/furniture/").concat(mesh);
     const {
       Location,
-      Rotation,
+      WEB_Rotation,
       Model: ModelName
     } = furniture;
     const {
@@ -538,33 +542,76 @@ class HouseStore {
     });
 
     const onTexturesLoaded = (result, model) => {
-      const materials = result.map(texture => new THREE.MeshBasicMaterial({
-        map: texture,
-        opacity: 0,
-        transparent: true
-      }));
+      const materialsCount = result.reduce((acc, _ref11) => {
+        let {
+          image
+        } = _ref11;
+        if (!image.currentSrc.includes('_D.') && !image.currentSrc.includes('_DA.')) return acc;
+        return acc += 1;
+      }, 0);
+
+      const createMaterial = num => {
+        const map = result.find(_ref12 => {
+          let {
+            image
+          } = _ref12;
+          return image.currentSrc.includes("".concat(num, "_D.")) || image.currentSrc.includes("".concat(num, "_DA."));
+        });
+        const envMap = result.find(_ref13 => {
+          let {
+            image
+          } = _ref13;
+          return image.currentSrc.includes("".concat(num, "_RMO."));
+        });
+        const normalMap = result.find(_ref14 => {
+          let {
+            image
+          } = _ref14;
+          return image.currentSrc.includes("".concat(num, "_N."));
+        });
+        const material = new THREE.MeshStandardMaterial({
+          roughness: 1,
+          transparent: true
+        });
+        material.depthWrite = !(ModelName === 'Flower' && num === '01');
+        if (map) material.map = map;
+        if (envMap) material.envMap = envMap;
+        if (normalMap) material.normalMap = normalMap;
+        return material;
+      };
+
+      let materials = new THREE.MeshPhysicalMaterial({
+        roughness: 1,
+        clearcoat: 1,
+        clearcoatRoughness: 1,
+        reflectivity: 0,
+        fog: false
+      });
+
+      if (materialsCount === 1) {
+        materials = createMaterial('');
+      }
+
+      if (materialsCount > 1) {
+        materials = [...Array(materialsCount).keys()].map(i => {
+          const num = i + 1;
+          const realNum = num < 10 ? "0".concat(num) : num;
+          return createMaterial(realNum);
+        });
+      }
+
       model.traverse(node => {
         if (node.isMesh) node.material = materials;
       });
       this.houseGroup.add(model);
       this.loadFurniture(index + 1);
-      const opacityInterval = setInterval(() => {
-        model.children[0].material.forEach(material => {
-          material.opacity += 0.01;
-
-          if (material.opacity >= 1) {
-            clearInterval(opacityInterval);
-            material.opacity = 1;
-          }
-        });
-      }, 1);
     };
 
     const onModelLoaded = originalModel => {
       const model = originalModel.clone();
       model.scale.set(this.sceneScale, this.sceneScale, this.sceneScale);
       model.position.set(X * this.sceneScale, Y * this.sceneScale, Z * this.sceneScale);
-      model.rotation.set(Math.PI / 2, THREE.Math.degToRad(Rotation.Yaw), 0);
+      model.rotation.set(Math.PI / 2, THREE.Math.degToRad(WEB_Rotation.Yaw), 0);
       const loadedTextures = this.loadedTextures[ModelName];
 
       if (loadedTextures) {
@@ -599,11 +646,11 @@ class HouseStore {
 
   setCurrentWallsMaterialType(value) {
     this.wallsMaterialType = value;
-    this.wallsGroup.children.forEach(_ref11 => {
+    this.wallsGroup.children.forEach(_ref15 => {
       let {
         children,
         isExterior
-      } = _ref11;
+      } = _ref15;
       const wall = children[0];
 
       if (value === 'texture') {
@@ -612,7 +659,7 @@ class HouseStore {
       }
 
       const color = isExterior ? '#FFFFFF' : this.wallsColor;
-      wall.material = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+      wall.material = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
         color
       }));
     });
@@ -622,18 +669,18 @@ class HouseStore {
         return;
       }
 
-      door.material = new THREE.MeshBasicMaterial(doorMaterialOptions);
+      door.material = createDefaultMaterial(doorMaterialOptions);
     });
   }
 
   setCurrentWallColor(color) {
     this.wallsColor = color;
     this.wallsMaterial.color.set(color);
-    this.wallsGroup.children.forEach(_ref12 => {
+    this.wallsGroup.children.forEach(_ref16 => {
       let {
         children,
         isExterior
-      } = _ref12;
+      } = _ref16;
       if (isExterior) return;
       const wall = children[0];
       wall.material.color.set(color);
@@ -641,7 +688,7 @@ class HouseStore {
   }
 
   setCurrentWallTexture(texture) {
-    this.wallsMaterial = new THREE.MeshBasicMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
+    this.wallsMaterial = createDefaultMaterial(_objectSpread(_objectSpread({}, this.wallMaterialOptions), {}, {
       map: texture
     }));
     this.setCurrentWallsMaterialType('texture');
@@ -660,10 +707,10 @@ class HouseStore {
   setFullBuildingVisibility(value) {
     this.isFullBuildingVisible = value;
     this.globalPlane.constant = this.isFullBuildingVisible ? 1 : clippedBuildingConstant;
-    this.wallsGroup.children.forEach(_ref13 => {
+    this.wallsGroup.children.forEach(_ref17 => {
       let {
         children
-      } = _ref13;
+      } = _ref17;
       return children[2].visible = !value;
     });
   }

package/build/store/modelStore.js

@@ -15,7 +15,7 @@ var THREE = _interopRequireWildcard(require("three"));
 
 var _cameraControls = _interopRequireDefault(require("camera-controls"));
 
-var _houseStore = _interopRequireDefault(require("./houseStore"));
+var _houseStore = _interopRequireDefault(require("../store/houseStore"));
 
 var _grass = _interopRequireDefault(require("../assets/img/grass.png"));
 
@@ -84,6 +84,12 @@ class ModelStore {
       this.joystickDirections = directions;
     });
 
+    _defineProperty(this, "setContainer", container => {
+      this.container = container;
+      this.updateRendererSize();
+      this.updateCameraSize();
+    });
+
     _defineProperty(this, "createScene", () => {
       this.scene = new THREE.Scene();
       const light = new THREE.AmbientLight(0xffffff);
@@ -113,22 +119,30 @@ class ModelStore {
     _defineProperty(this, "createRenderer", () => {
       this.renderer = new THREE.WebGLRenderer();
       this.renderer.setPixelRatio(window.devicePixelRatio);
-      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      this.updateRendererSize();
       this.renderer.localClippingEnabled = true;
       return this;
     });
 
+    _defineProperty(this, "updateRendererSize", () => {
+      this.renderer.setSize(this.width, this.height);
+    });
+
     _defineProperty(this, "createCamera", () => {
-      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+      this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
       this.camera.position.set(0, 0, 0);
       window.addEventListener('resize', () => {
-        this.camera.aspect = window.innerWidth / window.innerHeight;
-        this.camera.updateProjectionMatrix();
-        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.updateCameraSize();
+        this.updateRendererSize();
       });
       return this;
     });
 
+    _defineProperty(this, "updateCameraSize", () => {
+      this.camera.aspect = this.width / this.height;
+      this.camera.updateProjectionMatrix();
+    });
+
     _defineProperty(this, "createControls", () => {
       this.controls = new _cameraControls.default(this.camera, this.renderer.domElement);
       this.controls.minDistance = 0.5;
@@ -173,7 +187,7 @@ class ModelStore {
       this.controls.moveTo(0, 0, 0, true);
       this.controls.mouseButtons.wheel = _cameraControls.default.ACTION.DOLLY;
       this.controls.touches.two = _cameraControls.default.ACTION.TOUCH_DOLLY_TRUCK;
-      this.controls.rotateTo(0, angle, true); // this.destroyNipple();
+      this.controls.rotateTo(0, angle, true);
     });
 
     _defineProperty(this, "setCurrentControlsType", type => {
@@ -227,6 +241,18 @@ class ModelStore {
     this.createScene().createRenderer().createCamera().createControls().addKeyEvents();
   }
 
+  get width() {
+    var _this$container;
+
+    return ((_this$container = this.container) === null || _this$container === void 0 ? void 0 : _this$container.offsetWidth) || window.innerWidth;
+  }
+
+  get height() {
+    var _this$container2;
+
+    return ((_this$container2 = this.container) === null || _this$container2 === void 0 ? void 0 : _this$container2.offsetHeight) || window.innerHeight;
+  }
+
 }
 
 var _default = new ModelStore();

package/package.json

@@ -3,7 +3,7 @@
   "description": "HART Estate widget",
   "author": "HART",
   "keywords": [],
-  "version": "0.0.18",
+  "version": "0.0.21",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",