@xeokit/xeokit-sdk 2.6.31 → 2.6.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.31",
+  "version": "2.6.33",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/extras/PointerLens/PointerLens.js

@@ -65,20 +65,23 @@ export class PointerLens {
         this._lensCursorDiv.style.pointerEvents = "none";
 
         this._lensContainer = document.createElement('div');
+        this._lensContainerId = cfg.containerId || 'xeokit-lens';
+        this._lensContainer.setAttribute("id", this._lensContainerId);
+
         this._lensContainer.style.border = "1px solid black";
         this._lensContainer.style.background = "white";
     //    this._lensContainer.style.opacity = "0";
         this._lensContainer.style.borderRadius = "50%";
         this._lensContainer.style.width = "300px";
         this._lensContainer.style.height = "300px";
-        this._lensContainer.style.marginTop = "85px";
-        this._lensContainer.style.marginLeft = "25px";
+        
         this._lensContainer.style.zIndex = "15000";
         this._lensContainer.style.position = "absolute";
         this._lensContainer.style.pointerEvents = "none";
         this._lensContainer.style.visibility = "hidden";
 
         this._lensCanvas = document.createElement('canvas');
+        this._lensCanvas.id = `${this._lensContainerId}-canvas`;
         // this._lensCanvas.style.background = "darkblue";
         this._lensCanvas.style.borderRadius = "50%";
 
@@ -95,7 +98,12 @@ export class PointerLens {
 
         this._canvasPos = null;
         this._snappedCanvasPos = null;
-        this._lensPosToggle = true;
+        this._lensPosToggle = cfg.lensPosToggle || true;
+        this._lensPosToggleAmount = cfg.lensPosToggleAmount || 85;
+        this._lensPosMarginLeft = cfg.lensPosMarginLeft || 85;
+        this._lensPosMarginTop = cfg.lensPosMarginTop || 25;
+        this._lensContainer.style.marginTop = `${this._lensPosMarginTop}px`;
+        this._lensContainer.style.marginLeft = `${this._lensPosMarginLeft}px`;
 
         this._zoomLevel = cfg.zoomLevel || 2;
 
@@ -125,12 +133,12 @@ export class PointerLens {
         const pointerOnLens =
             this._canvasPos[0] < lensRect.right && this._canvasPos[0] > lensRect.left &&
             this._canvasPos[1] < lensRect.bottom && this._canvasPos[1] > lensRect.top;
-        this._lensContainer.style.marginLeft = `25px`;
+            this._lensContainer.style.marginLeft = `${this._lensPosMarginLeft}px`;
         if (pointerOnLens) {
             if (this._lensPosToggle) {
-                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - 85}px`;
+                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - this._lensPosToggleAmount}px`;
             } else {
-                this._lensContainer.style.marginTop = `85px`;
+                this._lensContainer.style.marginTop = `${this._lensPosMarginTop}px`;
             }
             this._lensPosToggle = !this._lensPosToggle;
         }

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -6,6 +6,7 @@ import {Component} from "../../viewer/scene/Component.js";
 
 
 const distVec3 = math.vec3();
+const tmpVec3 = math.vec3();
 
 const lengthWire = (x1, y1, x2, y2) => {
     var a = x1 - x2;
@@ -316,6 +317,44 @@ class DistanceMeasurement extends Component {
         this.labelsVisible = cfg.labelsVisible;
         this.labelsOnWires = cfg.labelsOnWires;
         this.useRotationAdjustment = cfg.useRotationAdjustment;
+
+        /**
+         * @type {number[]}
+         */
+        this._axesBasis = [
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1,
+        ];
+    }
+
+    /**
+     * Sets the axes basis for the measurement.
+     * 
+     * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
+     * 
+     * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
+     * 
+     * @param {number[]} value 
+     */
+    set axesBasis(value) {
+        this._axesBasis = value.slice();
+        this._wpDirty = true;
+        this._needUpdate(0); // No lag
+    }
+
+    /**
+     * Gets the axes basis for the measurement.
+     * 
+     * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
+     * 
+     * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
+     * 
+     * @type {number[]}
+     */
+    get axesBasis() {
+        return this._axesBasis;
     }
 
     _update() {
@@ -351,19 +390,30 @@ class DistanceMeasurement extends Component {
                 this._wp[15] = 1.0;
             }
             else {
+                const delta = math.subVec3(
+                    this._targetWorld,
+                    this._originWorld,
+                    tmpVec3
+                );
+
+                /**
+                 * The length detected for each measurement axis.
+                 */
+                this._factors = math.transformVec3(this._axesBasis, delta);
+
                 this._wp[0] = this._originWorld[0];
                 this._wp[1] = this._originWorld[1];
                 this._wp[2] = this._originWorld[2];
                 this._wp[3] = 1.0;
 
-                this._wp[4] = this._targetWorld[0];
-                this._wp[5] = this._originWorld[1];
-                this._wp[6] = this._originWorld[2];
+                this._wp[4] = this._originWorld[0] + this._axesBasis[0]*this._factors[0];
+                this._wp[5] = this._originWorld[1] + this._axesBasis[4]*this._factors[0];
+                this._wp[6] = this._originWorld[2] + this._axesBasis[8]*this._factors[0];
                 this._wp[7] = 1.0;
 
-                this._wp[8] = this._targetWorld[0];
-                this._wp[9] = this._targetWorld[1];
-                this._wp[10] = this._originWorld[2];
+                this._wp[8] = this._originWorld[0] + this._axesBasis[0]*this._factors[0]+ this._axesBasis[1]*this._factors[1];
+                this._wp[9] = this._originWorld[1] + this._axesBasis[4]*this._factors[0]+ this._axesBasis[5]*this._factors[1];
+                this._wp[10] = this._originWorld[2] + this._axesBasis[8]*this._factors[0]+ this._axesBasis[9]*this._factors[1];;
                 this._wp[11] = 1.0;
 
                 this._wp[12] = this._targetWorld[0];
@@ -525,14 +575,14 @@ class DistanceMeasurement extends Component {
                 }
 
                 if (!this._xAxisLabelCulled) {
-                    this._xAxisLabel.setText(tilde + Math.abs((this._targetWorld[0] - this._originWorld[0]) * scale).toFixed(2) + unitAbbrev);
+                    this._xAxisLabel.setText(tilde + Math.abs(this._factors[0] * scale).toFixed(2) + unitAbbrev);
                     this._xAxisLabel.setCulled(!this.axisVisible);
                 } else {
                     this._xAxisLabel.setCulled(true);
                 }
 
                 if (!this._yAxisLabelCulled) {
-                    this._yAxisLabel.setText(tilde + Math.abs((this._targetWorld[1] - this._originWorld[1]) * scale).toFixed(2) + unitAbbrev);
+                    this._yAxisLabel.setText(tilde + Math.abs(this._factors[1] * scale).toFixed(2) + unitAbbrev);
                     this._yAxisLabel.setCulled(!this.axisVisible);
                 } else {
                     this._yAxisLabel.setCulled(true);
@@ -545,7 +595,7 @@ class DistanceMeasurement extends Component {
                     }
                     else {
                         this._zAxisLabel.setPrefix("Z");
-                        this._zAxisLabel.setText(tilde + Math.abs((this._targetWorld[2] - this._originWorld[2]) * scale).toFixed(2) + unitAbbrev);
+                        this._zAxisLabel.setText(tilde + Math.abs(this._factors[2] * scale).toFixed(2) + unitAbbrev);
                     }
                     this._zAxisLabel.setCulled(!this.axisVisible);
                 } else {

package/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js

@@ -880,6 +880,9 @@ class XKTLoaderPlugin extends Plugin {
      * represent the returned model. Set false to always use vertex buffer objects (VBOs). Note that DTX is only applicable
      * to non-textured triangle meshes, and that VBOs are always used for meshes that have textures, line segments, or point
      * primitives. Only works while {@link DTX#enabled} is also ````true````.
+     * @param {Number} [params.renderOrder=0] Specifies the rendering order for the model. This is used to control the order in which
+     * SceneModels are drawn when they have transparent objects, to give control over the order in which those objects are blended within the transparent
+     * render pass.
      * @returns {Entity} Entity representing the model, which will have {@link Entity#isModel} set ````true```` and will be registered by {@link Entity#id} in {@link Scene#models}.
      */
     load(params = {}) {
@@ -929,7 +932,8 @@ class XKTLoaderPlugin extends Plugin {
             origin: params.origin,
             disableVertexWelding: params.disableVertexWelding || false,
             disableIndexRebucketing: params.disableIndexRebucketing || false,
-            dtxEnabled: params.dtxEnabled
+            dtxEnabled: params.dtxEnabled,
+            renderOrder: params.renderOrder
         }));
 
         const modelId = sceneModel.id;  // In case ID was auto-generated

package/src/plugins/ZonesPlugin/ZonesPlugin.js

@@ -271,10 +271,9 @@ const basePolygon3D = function(scene, color, alpha) {
     };
 };
 
-const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, pointerLens, zonesPlugin, select3dPoint, onZoneCreated) {
-    const marker1 = marker3D(scene, zoneColor);
-    const marker2 = marker3D(scene, zoneColor);
-    const basePolygon = basePolygon3D(scene, zoneColor, zoneAlpha);
+const startAARectCreateUI = function(scene, markersColor, pointerLens, select3dPoint, withPoints, onPointsSelected) {
+    const marker1 = marker3D(scene, markersColor);
+    const marker2 = marker3D(scene, markersColor);
 
     const updatePointerLens = (pointerLens
                                ? function(canvasPos) {
@@ -302,29 +301,14 @@ const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor,
                 function() {
                     updatePointerLens(null);
                     marker2.update(null);
-                    basePolygon.updateBase(null);
+                    withPoints(null);
                 },
                 function(canvasPos, point2WorldPos) {
                     updatePointerLens(canvasPos);
                     marker2.update(point2WorldPos);
-
-                    if (math.distVec3(point1WorldPos, point2WorldPos) > 0.01)
-                    {
-                        const min = (idx) => Math.min(point1WorldPos[idx], point2WorldPos[idx]);
-                        const max = (idx) => Math.max(point1WorldPos[idx], point2WorldPos[idx]);
-
-                        const xmin = min(0);
-                        const ymin = min(1);
-                        const zmin = min(2);
-                        const xmax = max(0);
-                        const ymax = max(1);
-                        const zmax = max(2);
-
-                        basePolygon.updateBase([ [ xmin, ymin, zmax ], [ xmax, ymin, zmax ],
-                                                 [ xmax, ymin, zmin ], [ xmin, ymin, zmin ] ]);
-                    }
-                    else
-                        basePolygon.updateBase(null);
+                    withPoints((math.distVec3(point1WorldPos, point2WorldPos) > 0.01)
+                               &&
+                               [ point1WorldPos, point2WorldPos ]);
                 },
                 function(point2CanvasPos, point2WorldPos) {
                     // `marker2.update' makes sure marker's position has been updated from its default [0,0,0]
@@ -334,35 +318,9 @@ const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor,
 
                     marker1.destroy();
                     marker2.destroy();
-                    basePolygon.destroy();
                     updatePointerLens(null);
 
-                    const min = (idx) => Math.min(point1WorldPos[idx], point2WorldPos[idx]);
-                    const max = (idx) => Math.max(point1WorldPos[idx], point2WorldPos[idx]);
-
-                    const xmin = min(0);
-                    const zmin = min(2);
-                    const xmax = max(0);
-                    const zmax = max(2);
-
-                    const zone = zonesPlugin.createZone(
-                        {
-                            id: math.createUUID(),
-                            geometry: {
-                                planeCoordinates: [
-                                    [ xmin, zmax ],
-                                    [ xmax, zmax ],
-                                    [ xmax, zmin ],
-                                    [ xmin, zmin ]
-                                ],
-                                altitude: zoneAltitude,
-                                height: zoneHeight
-                            },
-                            alpha: zoneAlpha,
-                            color: zoneColor
-                        });
-
-                    onZoneCreated(zone);
+                    onPointsSelected([ point1WorldPos, point2WorldPos ]);
                 });
         });
 
@@ -371,7 +329,6 @@ const startAAZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor,
             deactivatePointSelection();
             marker1.destroy();
             marker2.destroy();
-            basePolygon.destroy();
             updatePointerLens(null);
         }
     };
@@ -1052,6 +1009,34 @@ class Zone extends Component {
     }
 }
 
+const createAAZoneFromPoints = function(pos1, pos2, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, zonesPlugin) {
+
+    const min = (idx) => Math.min(pos1[idx], pos2[idx]);
+    const max = (idx) => Math.max(pos1[idx], pos2[idx]);
+
+    const xmin = min(0);
+    const zmin = min(2);
+    const xmax = max(0);
+    const zmax = max(2);
+
+    return zonesPlugin.createZone(
+        {
+            id: math.createUUID(),
+            geometry: {
+                planeCoordinates: [
+                    [ xmin, zmax ],
+                    [ xmax, zmax ],
+                    [ xmax, zmin ],
+                    [ xmin, zmin ]
+                ],
+                altitude: zoneAltitude,
+                height: zoneHeight
+            },
+            alpha: zoneAlpha,
+            color: zoneColor
+        });
+};
+
 /**
  * Creates {@link Zone}s in a {@link ZonesPlugin} from mouse input.
  *
@@ -1082,7 +1067,7 @@ class Zone extends Component {
  * const zonesControl  = new ZonesMouseControl(Zones)
  * ````
  */
-class ZonesMouseControl extends Component {
+class ZonesAAZoneControl extends Component {
 
     /**
      * Creates a ZonesMouseControl bound to the given ZonesPlugin.
@@ -1091,11 +1076,12 @@ class ZonesMouseControl extends Component {
      * @param [cfg] Configuration
      * @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor when snapping is enabled.
      */
-    constructor(zonesPlugin, cfg = {}) {
+    constructor(zonesPlugin, cfg, createSelect3dPoint) {
         super(zonesPlugin.viewer.scene);
 
         this.zonesPlugin = zonesPlugin;
         this.pointerLens = cfg.pointerLens;
+        this.createSelect3dPoint = createSelect3dPoint;
         this._deactivate = null;
     }
 
@@ -1132,16 +1118,35 @@ class ZonesMouseControl extends Component {
         const scene = viewer.scene;
         const self = this;
 
-        const select3dPoint = mousePointSelector(
-            viewer,
-            function(origin, direction) {
-                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
-            });
+        const select3dPoint = this.createSelect3dPoint(viewer, (origin, direction) => planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction));
 
         (function rec() {
-            self._deactivate = startAAZoneCreateUI(
-                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
-                zone => {
+            const basePolygon = basePolygon3D(scene, zoneColor, zoneAlpha);
+            const deactivate = startAARectCreateUI(
+                scene, zoneColor, self.pointerLens, select3dPoint,
+                points => {
+                    if (points) {
+                        const p0 = points[0];
+                        const p1 = points[1];
+                        const min = (idx) => Math.min(p0[idx], p1[idx]);
+                        const max = (idx) => Math.max(p0[idx], p1[idx]);
+
+                        const xmin = min(0);
+                        const ymin = min(1);
+                        const zmin = min(2);
+                        const xmax = max(0);
+                        const ymax = max(1);
+                        const zmax = max(2);
+
+                        basePolygon.updateBase([ [ xmin, ymin, zmax ], [ xmax, ymin, zmax ],
+                                                 [ xmax, ymin, zmin ], [ xmin, ymin, zmin ] ]);
+                    } else {
+                        basePolygon.updateBase(null);
+                    }
+                },
+                points => {
+                    basePolygon.destroy();
+                    const zone = createAAZoneFromPoints(points[0], points[1], zoneAltitude, zoneHeight, zoneColor, zoneAlpha, zonesPlugin);
                     let reactivate = true;
                     self._deactivate = () => { reactivate = false; };
                     self.fire("zoneEnd", zone);
@@ -1150,6 +1155,10 @@ class ZonesMouseControl extends Component {
                         rec();
                     }
                 }).deactivate;
+            self._deactivate = () => {
+                deactivate();
+                basePolygon.destroy();
+            };
         })();
     }
 
@@ -1172,10 +1181,36 @@ class ZonesMouseControl extends Component {
     }
 }
 
+export class ZonesMouseControl extends ZonesAAZoneControl {
+    constructor(zonesPlugin, cfg = {}) {
+        super(
+            zonesPlugin,
+            cfg,
+            (viewer, ray2WorldPos) => mousePointSelector(viewer, ray2WorldPos));
+    }
+}
+
+import {PointerCircle} from "../../extras/PointerCircle/PointerCircle.js";
+export class ZonesTouchControl extends ZonesAAZoneControl {
+    constructor(zonesPlugin, cfg = {}) {
+        const pointerCircle = new PointerCircle(zonesPlugin.viewer);
+        super(
+            zonesPlugin,
+            cfg,
+            (viewer, ray2WorldPos) => touchPointSelector(viewer, pointerCircle, ray2WorldPos));
+        this.pointerCircle = pointerCircle;
+    }
+
+    destroy() {
+        this.pointerCircle.destroy();
+        super.destroy();
+    }
+}
+
 /**
  * ZonesPlugin documentation to be added, mostly compatible with DistanceMeasurementsPlugin.
  */
-class ZonesPlugin extends Plugin {
+export class ZonesPlugin extends Plugin {
 
     /**
      * @constructor
@@ -1286,88 +1321,6 @@ class ZonesPlugin extends Plugin {
     }
 }
 
-import {PointerCircle} from "../../extras/PointerCircle/PointerCircle.js";
-
-export class ZonesTouchControl extends Component {
-
-    constructor(zonesPlugin, cfg = {}) {
-        super(zonesPlugin.viewer.scene);
-
-        this.zonesPlugin = zonesPlugin;
-        this.pointerLens = cfg.pointerLens;
-        this.pointerCircle = new PointerCircle(zonesPlugin.viewer);
-        this._deactivate = null;
-    }
-
-    get active() {
-        return !! this._deactivate;
-    }
-
-    activate(zoneAltitude, zoneHeight, zoneColor, zoneAlpha) {
-
-        if (typeof(zoneAltitude) === "object" && (zoneAltitude !== null)) {
-            const params = zoneAltitude;
-            const param = (name, defaultValue) => {
-                if (name in params) {
-                    return params[name];
-                } else if (defaultValue !== undefined) {
-                    return defaultValue;
-                } else {
-                    throw "config missing: " + name;
-                }
-            };
-
-            zoneAltitude = param("altitude");
-            zoneHeight   = param("height");
-            zoneColor    = param("color", "#008000");
-            zoneAlpha    = param("alpha", 0.5);
-        }
-
-        if (this._deactivate) {
-            return;
-        }
-
-        const zonesPlugin = this.zonesPlugin;
-        const viewer = zonesPlugin.viewer;
-        const scene = viewer.scene;
-        const self = this;
-
-        const select3dPoint = touchPointSelector(
-            viewer,
-            this.pointerCircle,
-            function(origin, direction) {
-                return planeIntersect(zoneAltitude, math.vec3([ 0, 1, 0 ]), origin, direction);
-            });
-
-        (function rec() {
-            self._deactivate = startAAZoneCreateUI(
-                scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, self.pointerLens, zonesPlugin, select3dPoint,
-                zone => {
-                    let reactivate = true;
-                    self._deactivate = () => { reactivate = false; };
-                    self.fire("zoneEnd", zone);
-                    if (reactivate)
-                    {
-                        rec();
-                    }
-                }).deactivate;
-        })();
-    }
-
-    deactivate() {
-        if (this._deactivate)
-        {
-            this._deactivate();
-            this._deactivate = null;
-        }
-    }
-
-    destroy() {
-        this.deactivate();
-        super.destroy();
-    }
-}
-
 const startPolysurfaceZoneCreateUI = function(scene, zoneAltitude, zoneHeight, zoneColor, zoneAlpha, pointerLens, zonesPlugin, select3dPoint, onZoneCreated) {
     const updatePointerLens = (pointerLens
                                ? function(canvasPos) {
@@ -1933,7 +1886,3 @@ export class ZoneTranslateTouchControl extends ZoneTranslateControl {
         super(zone, cfg, false, true);
     }
 }
-
-
-export {ZonesMouseControl}
-export {ZonesPlugin}

package/src/plugins/lib/html/Dot.js

@@ -15,7 +15,7 @@ class Dot {
         this._dotClickable = document.createElement('div');
         this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
 
-        this._visible = !!cfg.visible;
+        this._visible = cfg.visible !== false;
         this._culled = false;
 
         var dot = this._dot;
@@ -27,7 +27,7 @@ class Dot {
         dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
         dotStyle.width = 8 + "px";
         dotStyle.height = 8 + "px";
-        dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
+        dotStyle.visibility = this._visible ? "visible" : "hidden";
         dotStyle.top = 0 + "px";
         dotStyle.left = 0 + "px";
         dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";

package/src/viewer/scene/math/MeshVolume.js

@@ -91,7 +91,7 @@ export class MeshVolume {
             volume += math.dotVec3(v1, v3);
         }
 
-        return volume;
+        return volume / 6;
     }
 }
 

package/src/viewer/scene/model/vbo/instancing/lines/VBOInstancingLinesLayer.js

@@ -244,7 +244,9 @@ class VBOInstancingLinesLayer {
             this._modelMatrixCol1 = [];
             this._modelMatrixCol2 = [];
         }
-        this._state.geometry = null;
+        if (!this.model.scene.readableGeometryEnabled) {
+            this._state.geometry = null;
+        }
         this._finalized = true;
     }
 

package/src/viewer/scene/model/vbo/instancing/triangles/VBOInstancingTrianglesLayer.js

@@ -36,7 +36,7 @@ export class VBOInstancingTrianglesLayer {
      */
     constructor(cfg) {
 
-      //   console.info("Creating VBOInstancingTrianglesLayer");
+        //   console.info("Creating VBOInstancingTrianglesLayer");
 
         /**
          * Owner model
@@ -378,7 +378,9 @@ export class VBOInstancingTrianglesLayer {
             && !!textureSet
             && !!textureSet.colorTexture;
 
-        this._state.geometry = null;
+        if (!this.model.scene.readableGeometryEnabled) {
+            this._state.geometry = null;
+        }
 
         this._finalized = true;
     }
@@ -705,11 +707,11 @@ export class VBOInstancingTrianglesLayer {
             this.model.error("portion not found: " + portionId);
             return;
         }
-        const positions = geometry.quantizedPositions;
+        const positions = geometry.positionsCompressed;
         const origin = state.origin;
-        const offsetX = origin[0] ;
-        const offsetY = origin[1] ;
-        const offsetZ = origin[2] ;
+        const offsetX = origin[0];
+        const offsetY = origin[1];
+        const offsetZ = origin[2];
         const worldPos = tempVec4a;
         const portionMatrix = portion.matrix;
         const sceneModelMatrix = this.model.matrix;
@@ -785,7 +787,7 @@ export class VBOInstancingTrianglesLayer {
             return;
         }
         this._updateBackfaceCull(renderFlags, frameCtx);
-        const useAlphaCutoff = this._state.textureSet && (typeof(this._state.textureSet.alphaCutoff) === "number");
+        const useAlphaCutoff = this._state.textureSet && (typeof (this._state.textureSet.alphaCutoff) === "number");
         if (frameCtx.withSAO && this.model.saoEnabled) {
             if (frameCtx.pbrEnabled && this.model.pbrEnabled && this._state.pbrSupported) {
                 if (this._renderers.pbrRendererWithSAO) {