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": "",
  /** Logo link url */
  "logoLinkUrl": "",
  /** 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,
  /** Render pixel ratio (0 = get from device) */
  "renderPixelRatio": 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,

  "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
  },

  "tab360": {
    /** Rotate camera towards navigation direction */
    "isDirectionalDoorLink": true,
    /** Rotate camera towards door target direction */
    "isDirectionalNavigation": true,
    /** Roof objects template */
    "roofObjectsTemplate": "(ProceduralBeamId|CeilingMesh|RoofMesh|CeilingLayersMesh|CeilingLightsMesh)",

    /** 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
  },

  /** 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
  },

  /** 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": {
    "editor": {
      /** Drag n drop editor text */
      "dragPlaceholder": "Drag json and glb files"
    },

    /** Made by settings */
    "madeByTemplate": "$0 $1",
    "madeByPrefix": "made by",
    "madeByLink": "",
    "madeByText": "",

    "noGLTFErrorTitle": "No GLTF Content",
    "noGLTFErrorMessage": "It looks like this plan doesn’t have any GLTF data.",
    "initError": "Init error",
    "networkError": "Network error",
    "unknownError": "Unknown error",
    "emptyCrmPlanIdError": "Empty or Invalid CRM plan ID",
    "emptyPlanIdError": "Empty or Invalid Plan ID",
    "failedToFetchError": "Failed to fetch: $0 $1",

    /** Floor selector settings */
    "floor": "$0 floor",
    "floorNumberEndings": {
      "1": "",
      "2": "",
      "3": "",
      "rest": ""
    },

    /** 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
  },

  /** Configuration for vendors */
  "vendors": {

    "aixSolutions": {
      /** Line width of the ruler */
      "lineWidth": 2,
      /** Minimal distance between wall vertices for display a ruler */
      "minWallLength": 0.4,
      /** Ruler line hex color */
      "rulerColor": "#FFFFFF",
      /** How far to zoom on room focus (x * FloorHeight) */
      "focusZoom": 1,
      /** Scale points with text */
      "scalePoints": [
        { "value": 1, "text": "1.0" },
        { "value": 2, "text": "1.5" },
        { "value": 3, "text": "2.0" },
      ]
    }

  }
};

GLTF Config Example