door_models 5.2.2 → 5.2.4

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 (5) hide show
  1. package/dist/index.cjs.js +72 -131
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +72 -131
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +2 -1
package/dist/index.cjs.js CHANGED
@@ -777,6 +777,10 @@ const useConfigurator = () => {
777
777
  return context;
778
778
  };
779
779
 
780
+ // Keep the textureLoader instance
781
+ const textureLoader = new THREE__namespace.TextureLoader();
782
+
783
+ // This is your new core logic. It's self-contained.
780
784
  const isUrl = string => {
781
785
  try {
782
786
  new URL(string);
@@ -787,12 +791,16 @@ const isUrl = string => {
787
791
  };
788
792
  const createMaterialFromProp = value => {
789
793
  if (!value) return null;
794
+
795
+ // Handle HEX colors
790
796
  if (value.startsWith("#")) {
791
797
  return new THREE__namespace.MeshStandardMaterial({
792
798
  color: value,
793
799
  roughness: 0.8
794
800
  });
795
801
  }
802
+
803
+ // Handle URLs
796
804
  if (isUrl(value)) {
797
805
  const texture = textureLoader.load(value);
798
806
  texture.wrapS = THREE__namespace.RepeatWrapping;
@@ -802,78 +810,30 @@ const createMaterialFromProp = value => {
802
810
  roughness: 0.8
803
811
  });
804
812
  }
813
+
814
+ // It's good practice to return null if the format is not recognized.
805
815
  return null;
806
816
  };
807
- const textureLoader = new THREE__namespace.TextureLoader();
808
- const bodyInt = textureLoader.load("http://192.168.30.92:3009/api/proxy?path=IVIS/E_TEX00.JPG");
809
- const bodyExt = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
810
- const frameAlu = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
811
- const frameWoodenInt = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
812
- textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
813
- const wdg = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
814
- const gasket = textureLoader.load("https://threejs.org/examples/textures/brick_diffuse.jpg");
815
- bodyInt.wrapS = THREE__namespace.RepeatWrapping;
816
- bodyInt.wrapT = THREE__namespace.RepeatWrapping;
817
- bodyExt.wrapS = THREE__namespace.RepeatWrapping;
818
- bodyExt.wrapT = THREE__namespace.RepeatWrapping;
817
+
818
+ // --- REMOVED THE ENTIRE `availableMaterials` OBJECT ---
819
+ // It is no longer needed.
820
+
821
+ // Keep placeholder materials as a fallback if a material prop isn't provided
822
+ const placeholderMaterial = new THREE__namespace.MeshStandardMaterial({
823
+ color: "#cccccc",
824
+ // A neutral grey
825
+ roughness: 0.8
826
+ });
827
+ const placeholderMaterialforFrames = new THREE__namespace.MeshStandardMaterial({
828
+ color: "#555555",
829
+ // A darker grey for frames
830
+ roughness: 0.8
831
+ });
832
+
819
833
  const availableMaterials = {
820
- D_SRF_DECOR_2: new THREE__namespace.MeshStandardMaterial({
821
- map: bodyInt,
822
- roughness: 0.8
823
- }),
824
- D_SRF_DECOR: new THREE__namespace.MeshStandardMaterial({
825
- map: bodyExt,
826
- roughness: 0.8
827
- }),
828
- D_PRF_COLOR: new THREE__namespace.MeshStandardMaterial({
829
- map: frameAlu,
830
- roughness: 0.8
831
- }),
832
- D_FR_SRF_DECOR: new THREE__namespace.MeshStandardMaterial({
833
- map: frameWoodenInt,
834
- roughness: 0.8
835
- }),
836
- D_FR_SRF_DECOR_S2: new THREE__namespace.MeshStandardMaterial({
837
- map: frameWoodenInt,
838
- roughness: 0.8
839
- }),
840
- D_FR_COLOR: new THREE__namespace.MeshStandardMaterial({
841
- map: wdg,
842
- roughness: 0.8
843
- }),
844
- D_GASKET: new THREE__namespace.MeshStandardMaterial({
845
- map: gasket,
846
- roughness: 0.8
847
- }),
848
834
  black: new THREE__namespace.MeshStandardMaterial({
849
835
  color: "#000000"
850
836
  }),
851
- metal: new THREE__namespace.MeshStandardMaterial({
852
- color: "#aaaaaa",
853
- metalness: 1.0,
854
- roughness: 0.4
855
- }),
856
- darkgrey: new THREE__namespace.MeshStandardMaterial({
857
- color: "#5e5e5e"
858
- }),
859
- grey: new THREE__namespace.MeshStandardMaterial({
860
- color: "#cccccc"
861
- }),
862
- yellow: new THREE__namespace.MeshStandardMaterial({
863
- color: "#ffff00"
864
- }),
865
- darkBrown: new THREE__namespace.MeshStandardMaterial({
866
- color: "#a0522d"
867
- }),
868
- brown: new THREE__namespace.MeshStandardMaterial({
869
- color: "#d2b48c"
870
- }),
871
- glass: new THREE__namespace.MeshStandardMaterial({
872
- color: "#ffffff",
873
- roughness: 0.1,
874
- transparent: true,
875
- opacity: 0.7
876
- }),
877
837
  aluminum: new THREE__namespace.MeshStandardMaterial({
878
838
  color: "#abb0aa",
879
839
  metalness: 0.8,
@@ -891,39 +851,10 @@ const availableMaterials = {
891
851
  metalness: 0.8,
892
852
  roughness: 0.5,
893
853
  envMapIntensity: 1.2
894
- }),
895
- silver: new THREE__namespace.MeshStandardMaterial({
896
- color: "#c0c0c0",
897
- metalness: 1.0,
898
- roughness: 0.2
899
- }),
900
- gold: new THREE__namespace.MeshStandardMaterial({
901
- color: "#ffd700",
902
- metalness: 1.0,
903
- roughness: 0.3
904
- }),
905
- diamond: new THREE__namespace.MeshStandardMaterial({
906
- color: "#e0f7fa",
907
- metalness: 0.9,
908
- roughness: 0.05,
909
- transparent: true,
910
- opacity: 0.9,
911
- envMapIntensity: 1.5
912
- }),
913
- test_material: new THREE__namespace.MeshStandardMaterial({
914
- color: "red",
915
- roughness: 0.1
916
854
  })
917
855
  };
918
- const placeholderMaterial = new THREE__namespace.MeshStandardMaterial({
919
- color: "#cccccc",
920
- roughness: 0.8
921
- });
922
- const placeholderMaterialforFrames = new THREE__namespace.MeshStandardMaterial({
923
- color: "#000",
924
- roughness: 0.8
925
- });
926
856
 
857
+ // Custom hook for door handle calculations
927
858
  function StandardHandle(_ref) {
928
859
  let {
929
860
  position,
@@ -1479,27 +1410,25 @@ function DoorModels(_ref7) {
1479
1410
  return dynamicMaterials;
1480
1411
  }, [materials]);
1481
1412
  // --- Material Logic ---
1482
- React.useMemo(() => availableMaterials[testDoorMaterial] || availableMaterials[doorMaterialName] || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
1483
- const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
1484
- const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
1485
- color: "#111111"
1486
- }), [testGasketMaterial, gasketMaterialName]);
1413
+ React.useMemo(() => placeholderMaterial, [testDoorMaterial, doorMaterialName]);
1414
+ const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
1415
+ const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials.black, [testGasketMaterial, gasketMaterialName]);
1487
1416
  const doorStopMaterial = React.useMemo(() => {
1488
- return pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || availableMaterials[testDoorStopMaterial] || availableMaterials[doorStopMaterialName || ""] || frameMaterial;
1417
+ return pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || frameMaterial;
1489
1418
  }, [testDoorStopMaterial, doorStopMaterialName, frameType, frameMaterial]);
1490
- const interiorFanlightMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
1491
- const exteriorFanlightMaterial = React.useMemo(() => availableMaterials[testExteriorFanlightMaterial] || availableMaterials[exteriorFanlightMaterialName] || placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
1492
- React.useMemo(() => availableMaterials[testOcculusInfillMaterial] || availableMaterials[occulusInfillMaterialName] || placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
1493
- const glassInfillMaterial = React.useMemo(() => pers.D_FR_COLOR || availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
1494
- React.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || new THREE__namespace.MeshStandardMaterial({
1419
+ const interiorFanlightMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
1420
+ const exteriorFanlightMaterial = React.useMemo(() => placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
1421
+ React.useMemo(() => placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
1422
+ const glassInfillMaterial = React.useMemo(() => pers.D_FR_COLOR || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
1423
+ React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
1495
1424
  color: "#d4d4d4",
1496
1425
  metalness: 1.0,
1497
1426
  roughness: 0.4
1498
1427
  }), [testHingeMaterial, hingeMaterialName]);
1499
- const frontCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
1500
- const backCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
1501
- React.useMemo(() => pers.D_SRF_DECOR_2 || availableMaterials[testFrontDoorPlaneMaterial] || availableMaterials[frontDoorPlaneMaterialName] || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
1502
- React.useMemo(() => pers.D_SRF_DECOR || availableMaterials[testBackDoorPlaneMaterial] || availableMaterials[backDoorPlaneMaterialName] || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
1428
+ const frontCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
1429
+ const backCoverPanelMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
1430
+ React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
1431
+ React.useMemo(() => pers.D_SRF_DECOR || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
1503
1432
  React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
1504
1433
  color: "#1a1a1a",
1505
1434
  roughness: 0.1
@@ -2056,7 +1985,8 @@ function DoorLeaf(_ref8) {
2056
1985
  testBackDoorPlaneMaterial,
2057
1986
  glassDepth,
2058
1987
  cpid,
2059
- handleParseCpid
1988
+ handleParseCpid,
1989
+ materials
2060
1990
  } = useConfigurator();
2061
1991
 
2062
1992
  // here i get material names from context
@@ -2095,27 +2025,36 @@ function DoorLeaf(_ref8) {
2095
2025
  } = backDoorPlane;
2096
2026
 
2097
2027
  // --- Material Logic ---
2098
- const doorMaterial = React.useMemo(() => availableMaterials[testDoorMaterial] || availableMaterials[doorMaterialName] || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
2099
- const frameMaterial = React.useMemo(() => availableMaterials[testFrameMaterial] || availableMaterials[frameMaterialName] || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
2100
- const gasketMaterial = React.useMemo(() => availableMaterials[testGasketMaterial] || availableMaterials[gasketMaterialName] || new THREE__namespace.MeshStandardMaterial({
2101
- color: "#111111"
2102
- }), [testGasketMaterial, gasketMaterialName]);
2028
+ const pers = React.useMemo(() => {
2029
+ const dynamicMaterials = {};
2030
+ for (const key in materials) {
2031
+ if (Object.prototype.hasOwnProperty.call(materials, key)) {
2032
+ const value = materials[key];
2033
+ dynamicMaterials[key] = createMaterialFromProp(value);
2034
+ }
2035
+ }
2036
+ return dynamicMaterials;
2037
+ }, [materials]);
2038
+ // --- Material Logic ---
2039
+ const doorMaterial = React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [testDoorMaterial, doorMaterialName]);
2040
+ const frameMaterial = React.useMemo(() => pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || placeholderMaterialforFrames, [testFrameMaterial, frameMaterialName]);
2041
+ const gasketMaterial = React.useMemo(() => pers.D_GASKET || availableMaterials.black, [testGasketMaterial, gasketMaterialName]);
2103
2042
  React.useMemo(() => {
2104
- return availableMaterials[testDoorStopMaterial] || availableMaterials[doorStopMaterialName || ""] || frameMaterial;
2043
+ return pers.D_PRF_COLOR || pers.D_FR_SRF_DECOR || pers.D_FR_SRF_DECOR_S2 || frameMaterial;
2105
2044
  }, [testDoorStopMaterial, doorStopMaterialName, frameType, frameMaterial]);
2106
- React.useMemo(() => availableMaterials[testInteriorFanlightMaterial] || availableMaterials[interiorFanlightMaterialName] || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
2107
- React.useMemo(() => availableMaterials[testExteriorFanlightMaterial] || availableMaterials[exteriorFanlightMaterialName] || placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
2108
- const occulusInfillMaterial = React.useMemo(() => availableMaterials[testOcculusInfillMaterial] || availableMaterials[occulusInfillMaterialName] || placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
2109
- const glassInfillMaterial = React.useMemo(() => availableMaterials[testGlassInfillMaterial] || availableMaterials[glassInfillMaterialName] || placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
2110
- const hingeBodyMaterial = React.useMemo(() => availableMaterials[testHingeMaterial] || availableMaterials[hingeMaterialName] || new THREE__namespace.MeshStandardMaterial({
2045
+ React.useMemo(() => pers.D_SRF_DECOR_2 || placeholderMaterial, [testInteriorFanlightMaterial, interiorFanlightMaterialName]);
2046
+ React.useMemo(() => placeholderMaterial, [testExteriorFanlightMaterial, exteriorFanlightMaterialName]);
2047
+ const occulusInfillMaterial = React.useMemo(() => placeholderMaterial, [testOcculusInfillMaterial, occulusInfillMaterialName]);
2048
+ const glassInfillMaterial = React.useMemo(() => placeholderMaterial, [testGlassInfillMaterial, glassInfillMaterialName]);
2049
+ const hingeBodyMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
2111
2050
  color: "#d4d4d4",
2112
2051
  metalness: 1.0,
2113
2052
  roughness: 0.4
2114
2053
  }), [testHingeMaterial, hingeMaterialName]);
2115
- React.useMemo(() => availableMaterials[testFrontCoverPanelMaterial] || availableMaterials[frontCoverPanelMaterialName] || placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
2116
- React.useMemo(() => availableMaterials[testBackCoverPanelMaterial] || availableMaterials[backCoverPanelMaterialName] || placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
2117
- const frontDoorPlaneMaterial = React.useMemo(() => availableMaterials[testFrontDoorPlaneMaterial] || availableMaterials[frontDoorPlaneMaterialName] || placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
2118
- const backDoorPlaneMaterial = React.useMemo(() => availableMaterials[testBackDoorPlaneMaterial] || availableMaterials[backDoorPlaneMaterialName] || placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
2054
+ React.useMemo(() => placeholderMaterial, [testFrontCoverPanelMaterial, frontCoverPanelMaterialName]);
2055
+ React.useMemo(() => placeholderMaterial, [testBackCoverPanelMaterial, backCoverPanelMaterialName]);
2056
+ React.useMemo(() => placeholderMaterial, [testFrontDoorPlaneMaterial, frontDoorPlaneMaterialName]);
2057
+ React.useMemo(() => placeholderMaterial, [testBackDoorPlaneMaterial, backDoorPlaneMaterialName]);
2119
2058
  const hingeAccentMaterial = React.useMemo(() => new THREE__namespace.MeshStandardMaterial({
2120
2059
  color: "#1a1a1a",
2121
2060
  roughness: 0.1
@@ -2303,7 +2242,8 @@ function DoorLeaf(_ref8) {
2303
2242
 
2304
2243
  // --- DYNAMIC TEXTURE MATERIALS ---
2305
2244
  const dynamicFrontDoorPlaneMaterial = React.useMemo(() => {
2306
- const newMaterial = frontDoorPlaneMaterial.clone();
2245
+ const sourceMaterial = pers.D_SRF_DECOR_2 || placeholderMaterial;
2246
+ const newMaterial = sourceMaterial.clone();
2307
2247
  if (newMaterial.map) {
2308
2248
  newMaterial.map = newMaterial.map.clone();
2309
2249
  newMaterial.map.needsUpdate = true;
@@ -2317,9 +2257,10 @@ function DoorLeaf(_ref8) {
2317
2257
  console.log(repeatX, repeatY);
2318
2258
  }
2319
2259
  return newMaterial;
2320
- }, [frontDoorPlaneMaterial, mainDoorHeightM, doorWidthM]);
2260
+ }, [pers.D_SRF_DECOR_2, mainDoorHeightM, doorWidthM]);
2321
2261
  const dynamicBackDoorPlaneMaterial = React.useMemo(() => {
2322
- const newMaterial = backDoorPlaneMaterial.clone();
2262
+ const sourceMaterial = pers.D_SRF_DECOR || placeholderMaterial;
2263
+ const newMaterial = sourceMaterial.clone();
2323
2264
  if (newMaterial.map) {
2324
2265
  newMaterial.map = newMaterial.map.clone();
2325
2266
  newMaterial.map.needsUpdate = true;
@@ -2332,7 +2273,7 @@ function DoorLeaf(_ref8) {
2332
2273
  newMaterial.map.repeat.set(repeatX, repeatY * 2);
2333
2274
  }
2334
2275
  return newMaterial;
2335
- }, [backDoorPlaneMaterial, mainDoorHeightM, doorWidthM]);
2276
+ }, [pers.D_SRF_DECOR, mainDoorHeightM, doorWidthM]);
2336
2277
  return /*#__PURE__*/jsxRuntime.jsxs("group", {
2337
2278
  "position-x": xOffset,
2338
2279
  children: [isStandardHingeVisible && standardHingeYPositions.map((y, index) => /*#__PURE__*/jsxRuntime.jsxs("group", {