gltf-widget

Install dependencies

bun ci

Run dev server

bun dev

Run production server

bun start

Build

bun run build

Configuration

{
  /** Base API Url */
  "baseUrl": "https://backend-stage.estate.hart-digital.com",
  /** Logo image url */
  "logoUrl": "https://example.com/logo.svg",
  /** Logo link url */
  "logoLinkUrl": "https://getfloorplan.com",
  /** Favicon link url */
  "faviconUrl": "https://example.com/favicon.svg",
  /** Widget language */
  "locale": "en",
  /** Show fullscreen button (if available) */
  "isFullscreenButtonVisible": true,
  /** Widget main aspect color */
  "mainColor": "#FFA900",
  /** Widget scene background color */
  "backgroundColor": "#FFFFFF",
  /** Enable editor drag n drop field on error */
  "isEditor": false,
  /** Floor mesh name template, must capture the floor index, e.g. HDEFloorBP(\d+) */
  "floorMeshTemplate": "^HDEFloorBP(\\d+)$",
  /** Render pixel ratio (0 = get from device) */
  "renderPixelRatio": 0,
  /** Tablet render pixel ratio (0 = get from device) */
  "tabletRenderPixelRatio": 0,
  /** Mobile render pixel ratio (0 = get from device) */
  "mobileRenderPixelRatio": 1,
  /** Primary widget tab */
  "primaryTab": "360",
    /** Invert selected tab button */
  "invertSelectedTab": false,
  /** Invert rest button on select */
  "invertRestButtons": false,
  /** If enabled, hide all Default UI components */
  "hideDefaultUI": false,

  "tab2D": {
    /** Show original or miniplan on 2D tab */
    "source": "miniplan",
    /** Pinch zoom speed */
    "zoomSpeed": 5
  },

  "tabTopView": {
    /** Position delta speed */
    "moveDeltaSpeed": 15,
    /** Rotation delta speed */
    "rotationDeltaSpeed": 15,
    /** Zoom delta speed */
    "zoomDeltaSpeed": 15,
    /** Move speed */
    "moveSpeed": 3,
    /** Mobile move speed */
    "mobileMoveSpeed": 5,
    /** Show settings button */
    "showSettingsButton": true,
    /** Show visibility button */
    "showVisibilityButton": true
  },

  "tab3D": {
    /** Position delta speed */
    "moveDeltaSpeed": 15,
    /** Rotation delta speed */
    "rotationDeltaSpeed": 15,
    /** Zoom delta speed */
    "zoomDeltaSpeed": 15,
    /** Move speed */
    "moveSpeed": 3,
    /** Mobile move speed */
    "mobileMoveSpeed": 5,
    /** Rotation speed */
    "rotationSpeed": 5,
    /** Mobile rotation speed */
    "mobileRotationSpeed": 5,
    /** Minimal pitch angle */
    "minPitch": 0,
    /** Maximum pitch angle */
    "maxPitch": 90,
    /** Show settings button */
    "showSettingsButton": true,
    /** Show visibility button */
    "showVisibilityButton": true,

    /** Swap left and right buttons */
    "swapLeftAndRightControllerButtons": false,
  },

  "tab360": {
    /** Rotate camera towards navigation direction */
    "isDirectionalDoorLink": true,
    /** Rotate camera towards door target direction */
    "isDirectionalNavigation": true,
    /** 3D pointer raycast object names regex */
    "pointerTemplate": "(FloorMesh|FloorLayersMesh|BakedMeshComponent|StaticMesh)",
    /** 3D pointer visibitlity regex */
    "pointerVisibilityTemplate": "(FloorMesh|FloorLayersMesh)",
    /** Roof objects template */
    "roofObjectsTemplate": "(ProceduralBeamId|CeilingMesh|RoofMesh|CeilingLayersMesh|CeilingLightsMesh)",

    /** Map source: 3D side render, miniplan svg or original plan image */
    "mapType": "3d",

    /** Position speed */
    "moveSpeed": 5,
    /** Rotation speed */
    "rotationSpeed": 15,
    /** Zoom speed */
    "zoomSpeed": 5,
    /** Enable scroll and pinch zooming */
    "enableZoom": true,
    /** Minimal zoom */
    "minZoom": 0.3,
    /** Maximum zoom */
    "maxZoom": 3,

    /** Show settings button */
    "showSettingsButton": true,
    /** Show visibility button */
    "showVisibilityButton": true,

    /** Always check 3D cursor visibility */
    "forceCursorVisibilityCheck": false,

    "camera": {
      /** Camera offset from view point */
      "offsetPosition": { "x": 0, "y": 0, "z": 0.1 }
    },

    "collider": {
      /** Collider radius in meters */
      "radius": 0.2
    },
  },

  /** Room link config */
  "roomLink": {
    /** Template for raycast mesh names */
    "raycastTemplate": "baked",
    /** Show area in label */
    "showArea": false,
    /** Area text template */
    "areaTemplate": "{area} m²",
    /** Show size in label */
    "showSize": true,
    /** Size text template */
    "sizeTemplate": "{width} x {length} m",
    /** Size text without metrics template */
    "noMetricSizeTemplate": "{width} x {length}",
    /** Enable visibility check */
    "checkVisibility": true,
    /** Size display precision */
    "sizePrecision": 1,
    /** Area display precision */
    "areaPrecision": 1
  },

  /** Door link config */
  "doorLink": {
    /** Template for raycast mesh names */
    "raycastTemplate": "baked",
    /** Show area in label */
    "showArea": false,
    /** Area text template */
    "areaTemplate": "{area} m²",
    /** Show size in label */
    "showSize": true,
    /** Size text template */
    "sizeTemplate": "{width} x {length} m",
    /** Enable visibility check */
    "checkVisibility": true,
    /** Size display precision */
    "sizePrecision": 1,
    /** Area display precision */
    "areaPrecision": 1
  },

  /** Stair link config */
  "stairLink": {
    /** Enable visibility check */
    "checkVisibility": true,
    /** Link height above the floor when the stair has no entrance location, in unreal units */
    "linkHeight": 150,
    /** Up icon url override */
    "upIconUrl": "",
    /** Down icon url override */
    "downIconUrl": ""
  },

  /** Watermark config */
  "watermark": {
    /** Watermark objects name patters */
    "watermarkObjectsPattern": "(FloorMesh)",
    /** Watermark url */
    "url": "https://path.to/image.png",
    /** Watermark rotation in degrees */
    "rotation": 0,
    /** Watermark scale */
    "scale": 1,
    /** Watermark opacity */
    "opacity": 1
  },

  /** Material config */
  "material": {
    /** Opacity override on all transparent materials */
    "minOpacity": 0.1,
    /** Shading model, "pbr" and "pbrPunctual" require the PBRMaterialsPlugin */
    "type": "unlit"
  },

  /** Animation config */
  "animation": {
    /** Play animation clips found in the gltf */
    "enabled": true
  },

  /** Network fallback config */
  "networkFallback": {
    "version": 1,
    "strategy": {
      "order": ["origin", "group:same", "group:other"]
    },
    "failurePolicy": {
      "http": [403, 404, 410, 429, 451, 500, 502, 503, 504],
      "network": true,
      "cors": true,
      "contentMismatch": true,
      "timeout": 2000
    },
    "keyExtraction": {
      "patterns": [
        { "re": "^https?://[^/]+/app_storage_production/public/(.*)$" },
        { "re": "^https?://[^/]+/storage/(.*)$" }
      ],
      "fallback": "pathname-after-first-segment"
    },
    "routes": {
      "cdn2.getfloorplan.tech": {
        "template": "https://cdn2.getfloorplan.tech/app_storage_production/public/{key}",
        "probe": "range",
        "cors": true
      },
      "d3u9de4hv6rhm1.cloudfront.net": {
        "template": "https://d3u9de4hv6rhm1.cloudfront.net/app_storage_production/public/{key}",
        "probe": "range",
        "cors": true
      },
      "cdn2ru.getfloorplan.tech": {
        "template": "https://cdn2ru.getfloorplan.tech/app_storage_production/public/{key}",
        "probe": "range",
        "cors": true
      },
      "backend-stage.estate.hart-digital.com": {
        "template": "https://backend-stage.estate.hart-digital.com/storage/{key}",
        "probe": "head",
        "cors": true
      },
      "api.getfloorplan.com": {
        "template": "https://api.getfloorplan.com/storage/{key}",
        "probe": "head",
        "cors": true
      },
      "api.ru.getfloorplan.com": {
        "template": "https://api.ru.getfloorplan.com/storage/{key}",
        "probe": "head",
        "cors": true
      }
    },
    "groups": {
      "int": [
        "cdn2.getfloorplan.tech",
        "d3u9de4hv6rhm1.cloudfront.net",
        "backend-stage.estate.hart-digital.com"
      ],
      "ru": [
        "cdn2ru.getfloorplan.tech",
        "backend-stage.estate.hart-digital.com"
      ]
    }
  },

  /** Overrides for translation */
  "localeOverrides": {
    /** Locale for editor application */
    "editor": {
      /** Drag placeholder text */
      "dragPlaceholder": "Drag json and glb files"
    },

    /** Made by template (example: "$0 $1", where $0 - "made by"; $1 - "getfloorplan.com") */
    "madeByTemplate": "$0 $1",
    /** Made by prefix (example: "made by") */
    "madeByPrefix": "made by",
    /** Made by link (example: https://getfloorplan.com) */
    "madeByLink": "",
    /** Made by text (example: "getfloorplan.com") */
    "madeByText": "",

    /** Title of "No GLTF Content" error */
    "noGLTFErrorTitle": "No GLTF Content",
    /** Message of "No GLTF Content error" (example: "It looks like no GLTF content in this plan") */
    "noGLTFErrorMessage": "It looks like this plan doesn’t have any GLTF data.",
    /** Message of init error (example: "Init error") */
    "initError": "Init error",
    /** Message of network error (example: "Network error") */
    "networkError": "Network error",
    /** Message of unknown error (example: "Unknown error") */
    "unknownError": "Unknown error",
    /** Message of empty crmPlanId error (example: "Empty or Invalid CRM plan ID") */
    "emptyCrmPlanIdError": "Empty or Invalid CRM plan ID",
    /** Message of empty planId error (example: "Empty or Invalid Plan ID") */
    "emptyPlanIdError": "Empty or Invalid Plan ID",
    /** Message of fetch error (example: "Failed to fetch: $0 $1", where $0 - "404", $1 - "Not Found") */
    "failedToFetchError": "Failed to fetch: $0 $1",

    /** Floor text template (example: "$0 floor", where $0 - "1") */
    "floor": "$0 floor",
    /** Floor number endings for unique floor numbers and the rest (example: { "1": "st", "2": "nd", "4": "test", "rest": "" } -> 1st, 2nd, 3, 4test, in floor select: 1st floor, 2nd floor, 3 floor, 4test floor) */
    "floorNumberEndings": {
      "1": "",
      "2": "",
      "3": "",
      "rest": ""
    },

    /** Tab names */
    "tabNames": {
      "2d": "2D",
      "topView": "Top View",
      "3d": "3D",
      "360": "360"
    },

    /** Names for texture packs in lowercase (example: { "standard": "Meow", "optimized": "Bark" } -> "Standard" will be "Meow", "Optimized" will be "Bark") */
    "packNames": {
      "standard": "Standard",
      "optimized": "Optimized"
    },

    /** Units section for size/area/etc */
    "units": {
      /** Size template with metrics (example: "{width} x {length} m") */
      "size": "{width} x {length} m",
      /** Size template with no metrics (example: "{width} x {length}") */
      "noMetricSize": "{width} x {length} m",
      /** Area template with no metrics (example: "{area} m²") */
      "area": "{area} m²",
      /** Area template with no metrics (example: "{area}") */
      "noMetricArea": "{area}"
    },

    /** Override room names */
    "roomTypes": {
      "Kitchen": "Meow meow meow",
      "CombinedBathroom": "Bark bark bark"
    },
  },

  /** Query parameters, only on custom */
  "query": {
    /** Primary floor number starting from 1 */
    "primaryFloorNumber": 1,
    /** Primary variant id */
    "primaryVariantId": "<plan_id>",
    /** Primary style name (overrides primaryVariantId) */
    "primaryStyleName": "Scandy",
    /** Overrides preferred texture pack, case insensitive substring in texture_pack.name */
    "quality": "optimized",
    /** Show logger */
    "showLogs": false
  },

  /** Vendors loaded by name, each as a separate chunk, params go to the vendor */
  "vendors": [
    {
      "name": "AIXSolutionsVendor",
      "params": {
      /** Minimal distance between wall vertices for display a ruler */
      "minWallLength": 0.4,
      /** Ruler line hex color */
      "rulerColor": "#FFFFFF",
      /** Ruler line width */
      "rulerLineWidth": 3,
      /** Ruler arrow line width */
      "rulerArrowLineWidth": 3,
      /** How far to zoom on room focus (x * FloorHeight) */
      "focusZoom": 1,
      /** Camera bounds inside the selected room */
      "roomBounds": {
        /** Keep the camera inside the selected room in 3D and TopView */
        "enabled": true,
        /** Gap kept between the camera and the room geometry */
        "wallOffset": 0.2,
        /** Template for mesh names the bounds raycast hits */
        "raycastTemplate": "(Baked|Stair|Ladder|Railing)",
        /** Template for mesh names the bounds raycast passes through */
        "ignoreTemplate": "",
        /** Lerp speed between the real and the bounded camera position, 0 = instant */
        "lerpSpeed": 10
      },
      /** Scale points with text */
      "scalePoints": [
        { "value": 1, "text": "1.0" },
        { "value": 2, "text": "1.5" },
        { "value": 3, "text": "2.0" },
      ],
      /** Terms url */
      "termsUrl": "https://example.com",
      /** Custom more help items, image/mobileImage take an url or a "#iconTag" */
      "overrideMoreHelpItems": [
        { "title": "2D", "description": "Click to view the 2D<br>floor plan", "image": "#aix2D" }
      ],
      /** Custom navigation items, image/mobileImage take an url or a "#iconTag" */
      "overrideNavigationItems": [
        { "title": "Look around", "description": "Click and drag to look around the Space.", "image": "#aixNavigationLook" }
      ],
      /** Custom side tabs, icon takes an url or a "#iconTag" */
      "overrideTabs": [
        { "value": "2d", "text": "2D", "icon": "#aixButton2D", "size": "20px" }
      ]
      }
    }
  ],

  /** Plugins loaded by name, each as a separate chunk, params go to the plugin */
  "plugins": [
    {
      /** Used when material.type is "pbr" or "pbrPunctual" */
      "name": "PBRMaterials",
      "params": {
        /** Punctual light intensity scale */
        "lightScale": 0.5,
        /** Punctual ambient term */
        "ambient": 0.1,
        /** Directional (sun) light intensity scale */
        "sunScale": 0
      }
    },
    {
      /** Params are passed to the Sentry error provider */
      "name": "Sentry",
      "params": null
    }
  ]
};

GLTF Config Example