@xeokit/xeokit-sdk 2.6.73 → 2.6.77-slim-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.73",
+  "version": "2.6.77-slim-rc1",
   "description": "3D BIM IFC Viewer SDK for AEC engineering applications. Open Source JavaScript Toolkit based on pure WebGL for top performance, real-world coordinates and full double precision",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",
@@ -57,6 +57,7 @@
     "@loaders.gl/core": "^4.3.3",
     "@loaders.gl/gltf": "^4.3.3",
     "@loaders.gl/las": "^4.3.3",
+    "@rollup/plugin-replace": "^6.0.2",
     "html2canvas": "^1.4.1"
   },
   "devDependencies": {

package/src/extras/ContextMenu/ContextMenu.js

@@ -298,7 +298,8 @@ class ContextMenu {
         this._shown = false;    // True when the ContextMenu is visible
         this._nextId = 0;
         this._parentNode = cfg.parentNode || document.body;
-
+        this._offsetParent = (this._parentNode instanceof ShadowRoot) ? this._parentNode.host : this._parentNode;
+        
         /**
          * Subscriptions to events fired at this ContextMenu.
          * @private
@@ -510,7 +511,7 @@ class ContextMenu {
         for (let i = 0, len = this._menuList.length; i < len; i++) {
             const menu = this._menuList[i];
             const menuElement = menu.menuElement;
-            menuElement.parentElement.removeChild(menuElement);
+            menuElement.remove();
         }
         this._itemsCfg = [];
         this._rootMenu = null;
@@ -738,21 +739,22 @@ class ContextMenu {
 
                             const itemRect = itemElement.getBoundingClientRect();
                             const menuRect = subMenuElement.getBoundingClientRect();
+                            const offsetRect = self._offsetParent.getBoundingClientRect();
 
                             const subMenuWidth = 200; // TODO
-                            const showOnRight = (itemRect.right + subMenuWidth) < window.innerWidth;
-                            const showOnLeft = (itemRect.left - subMenuWidth) > 0;
-
+                            const showOnRight = (itemRect.right + subMenuWidth) < offsetRect.right;
+                            const showOnLeft = (itemRect.left - subMenuWidth) > offsetRect.left;
+                        
                             if(showOnRight)
-                                self._showMenu(subMenu.id, itemRect.right - 5, itemRect.top - 1);
+                                self._showMenu(subMenu.id, itemRect.right + window.scrollX - 5, itemRect.top + window.scrollY - 1);
                             else if (showOnLeft)
-                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth, itemRect.top - 1);
+                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth + window.scrollX, itemRect.top + window.scrollY - 1);
                             else {
-                                const spaceOnLeft = itemRect.left, spaceOnRight = window.innerWidth - itemRect.right;
+                                const spaceOnLeft = itemRect.left - offsetRect.left, spaceOnRight = offsetRect.right - itemRect.right;
                                 if(spaceOnRight > spaceOnLeft) 
-                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top - 1);
+                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top + window.scrollY - 1);
                                 else 
-                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top - 1);
+                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top + window.scrollY - 1);
                             }
 
                             lastSubMenu = subMenu;
@@ -945,14 +947,21 @@ class ContextMenu {
         menuElement.style.display = 'block';
         const menuHeight = menuElement.offsetHeight;
         const menuWidth = menuElement.offsetWidth;
-        if ((pageY + menuHeight) > window.innerHeight) {
-            pageY = window.innerHeight - menuHeight;
+
+        const offsetRect = this._offsetParent.getBoundingClientRect();
+        
+        const bottomContainerBorder = offsetRect.bottom + window.scrollY;
+        const rightContainerBorder = offsetRect.right + window.scrollX;
+        if ((pageY + menuHeight) > bottomContainerBorder) {
+            pageY = bottomContainerBorder- menuHeight;
         }
-        if ((pageX + menuWidth) > window.innerWidth) {
-            pageX = window.innerWidth - menuWidth;
+        if ((pageX + menuWidth) > rightContainerBorder) {
+            pageX = rightContainerBorder - menuWidth;
         }
-        menuElement.style.left = pageX + 'px';
-        menuElement.style.top = pageY + 'px';
+
+
+        menuElement.style.left = pageX - offsetRect.left - window.scrollX + 'px';
+        menuElement.style.top = pageY - offsetRect.top - window.scrollY + 'px';
     }
 
     _hideMenuElement(menuElement) {

package/src/extras/Skybox/Skybox.js

@@ -0,0 +1,139 @@
+import {
+    ClampToEdgeWrapping,
+    LinearEncoding,
+    Mesh,
+    PhongMaterial,
+    ReadableGeometry,
+    Texture
+} from "../../viewer/index.js";
+
+/**
+ * @param {Component} scene 
+ * @param {*} [cfg]  Texture configuration
+ * @param {String[]} [cfg.src=null] Path to 6 images
+ * @param {Number} [cfg.encoding=LinearEncoding] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+ */
+
+export async function createCombinedTexture(scene, cfg) {
+    if(!cfg.src || !Array.isArray(cfg.src) || cfg.src.length !== 6)
+        throw new Error("src requires path to 6 images");
+    const [
+        posX,
+        negX,
+        posY,
+        negY,
+        posZ,
+        negZ
+    ] = cfg.src;
+
+    if (!posX || !negX || !posY || !negY || !posZ || !negZ) {
+        throw new Error("All six images must be provided");
+    }
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    const loadImage = src => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+            img.src = src;
+        });
+    };
+
+    try {
+        const [imgPosX, imgNegX, imgPosY, imgNegY, imgPosZ, imgNegZ] = await Promise.all([
+            loadImage(posX),
+            loadImage(negX),
+            loadImage(posY),
+            loadImage(negY),
+            loadImage(posZ),
+            loadImage(negZ)
+        ]);
+
+        const imageSize = imgPosX.width;
+        if (
+            imgNegX.width !== imageSize || imgPosY.width !== imageSize ||
+            imgNegY.width !== imageSize || imgPosZ.width !== imageSize ||
+            imgNegZ.width !== imageSize
+        ) {
+            throw new Error("All skybox textures must have the same dimensions");
+        }
+
+        // Set canvas size for the Christ cross layout (3×4 grid)
+        canvas.width = imageSize * 4;
+        canvas.height = imageSize * 3;
+
+        ctx.fillStyle = 'black';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        ctx.drawImage(imgNegX, imageSize * 0, imageSize * 1, imageSize, imageSize);  // -X (left)
+        ctx.drawImage(imgPosX, imageSize * 2, imageSize * 1, imageSize, imageSize);  // +X (right)
+        ctx.drawImage(imgPosY, imageSize * 1, imageSize * 0, imageSize, imageSize);  // +Y (top)
+        ctx.drawImage(imgNegY, imageSize * 1, imageSize * 2, imageSize, imageSize);  // -Y (bottom)
+        ctx.drawImage(imgPosZ, imageSize * 1, imageSize * 1, imageSize, imageSize);  // +Z (front)
+        ctx.drawImage(imgNegZ, imageSize * 3, imageSize * 1, imageSize, imageSize);  // -Z (back)
+
+        const combinedTexture = new Texture(scene, {
+            image: canvas,
+            flipY: true,
+            wrapS: ClampToEdgeWrapping,
+            wrapT: ClampToEdgeWrapping,
+            encoding: cfg.encoding || LinearEncoding
+        });
+
+        return combinedTexture;
+    } catch (error) {
+        console.error("Error creating combined skybox texture:", error);
+        throw error;
+    }
+}
+
+/**
+ * @param {Component} scene 
+ * @param {Texture} [texture] Texture to be used on the skybox mesh 
+ */
+
+export function createSkyboxMesh(scene, texture) {
+
+    return new Mesh(scene, {
+
+        geometry: new ReadableGeometry(scene, { // Box-shaped geometry
+            primitive: "triangles",
+            positions: [
+                1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
+                1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v5 right
+                1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v5-v6-v1 top
+                -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
+                -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, // v7-v4-v3-v2 bottom
+                1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v5 back
+            ],
+            uv: [
+                0.5, 0.6666, 0.25, 0.6666, 0.25, 0.3333, 0.5, 0.3333, 0.5, 0.6666, 0.5, 0.3333, 0.75, 0.3333, 0.75, 0.6666,
+                0.5, 0.6666, 0.5, 1, 0.25, 1, 0.25, 0.6666, 0.25, 0.6666, 0.0, 0.6666, 0.0, 0.3333, 0.25, 0.3333,
+                0.25, 0, 0.50, 0, 0.50, 0.3333, 0.25, 0.3333, 0.75, 0.3333, 1.0, 0.3333, 1.0, 0.6666, 0.75, 0.6666
+            ],
+            indices: [
+                0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11,
+                12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
+            ]
+        }),
+        background: true,
+        scale: [1000, 1000, 1000],
+        rotation: [0, -90, 0],
+        material: new PhongMaterial(scene, {
+            ambient: [0, 0, 0],
+            diffuse: [0, 0, 0],
+            specular: [0, 0, 0],
+            emissive: [1, 1, 1],
+            emissiveMap: texture,
+            backfaces: true // Show interior faces of our skybox geometry
+        }),
+        visible: true,
+        pickable: false,
+        clippable: false,
+        collidable: false
+    });
+}

package/src/extras/index.js

@@ -2,4 +2,5 @@ export * from "./ContextMenu/index.js";
 export * from "./PointerLens/index.js";
 export * from "./collision/index.js";
 export * from "./MarqueePicker/index.js";
-export * from "./PointerCircle/index.js";
+export * from "./PointerCircle/index.js";
+export * from "./Skybox/index.js";

package/src/plugins/CxConverterIFCLoaderPlugin/CxConverterIFCLoaderPlugin.js

@@ -1,86 +1,86 @@
-import { Plugin } from "../../viewer/Plugin.js";
-import { GLTFLoaderPlugin } from "../GLTFLoaderPlugin/GLTFLoaderPlugin.js";
-import { ifc2gltf } from "@creooxag/cx-converter";
+// import { Plugin } from "../../viewer/Plugin.js";
+// import { GLTFLoaderPlugin } from "../GLTFLoaderPlugin/GLTFLoaderPlugin.js";
+// import { ifc2gltf } from "@creooxag/cx-converter";
 
-/**
- * Fetches a file from the given URL and returns its contents as text.
- *
- * @param {string} url - The URL to fetch the file from.
- * @returns {Promise<string>} A promise that resolves to the file contents.
- * @private
- */
-async function fetchFile(url) {
-    try {
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        return response.text();
-    } catch (error) {
-        console.error('Error fetching file:', error);
-    }
-}
+// /**
+//  * Fetches a file from the given URL and returns its contents as text.
+//  *
+//  * @param {string} url - The URL to fetch the file from.
+//  * @returns {Promise<string>} A promise that resolves to the file contents.
+//  * @private
+//  */
+// async function fetchFile(url) {
+//     try {
+//         const response = await fetch(url);
+//         if (!response.ok) {
+//             throw new Error(`HTTP error! Status: ${response.status}`);
+//         }
+//         return response.text();
+//     } catch (error) {
+//         console.error('Error fetching file:', error);
+//     }
+// }
 
-/**
- * {@link Viewer} plugin that uses [CxConverter](https://github.com/Creoox/cxconverter) to load BIM models directly from IFC files, using its WebAssembly buid from [npm package](https://www.npmjs.com/package/@creooxag/cx-converter).
- *
- * ## Overview
- * The WebAssembly build of CxConverter is still in alfa stage, so it may not work as expected. This documentation will be updated as the library and the plugin evolve. The example below shows how to use the plugin:
- * ````javascript
- * import { CxConverterIFCLoaderPlugin, Viewer } from "../../dist/xeokit-sdk.es.js";
- * const cxConverterIFCLoaderPlugin = new CxConverterIFCLoaderPlugin(viewer);
- * 
- * const sceneModel = await cxConverterIFCLoaderPlugin.load({
- *        src: "../../assets/models/ifc/Duplex.ifc"
- * }); 
- * ````
-    See the code in action [here](https://xeokit.github.io/xeokit-sdk/examples/buildings/#cxConverterIFC_vbo_Duplex).
- */
+// /**
+//  * {@link Viewer} plugin that uses [CxConverter](https://github.com/Creoox/cxconverter) to load BIM models directly from IFC files, using its WebAssembly buid from [npm package](https://www.npmjs.com/package/@creooxag/cx-converter).
+//  *
+//  * ## Overview
+//  * The WebAssembly build of CxConverter is still in alfa stage, so it may not work as expected. This documentation will be updated as the library and the plugin evolve. The example below shows how to use the plugin:
+//  * ````javascript
+//  * import { CxConverterIFCLoaderPlugin, Viewer } from "../../dist/xeokit-sdk.es.js";
+//  * const cxConverterIFCLoaderPlugin = new CxConverterIFCLoaderPlugin(viewer);
+//  *
+//  * const sceneModel = await cxConverterIFCLoaderPlugin.load({
+//  *        src: "../../assets/models/ifc/Duplex.ifc"
+//  * });
+//  * ````
+//     See the code in action [here](https://xeokit.github.io/xeokit-sdk/examples/buildings/#cxConverterIFC_vbo_Duplex).
+//  */
 
-class CxConverterIFCLoaderPlugin extends Plugin {
-    /**
-     * @constructor
-     * @param {Viewer} viewer The Viewer.
-     * @param {Object} [cfg={}] Plugin configuration.
-     */
-    constructor(viewer, cfg = {}) {
-        super("ifcLoader", viewer, cfg);
+// class CxConverterIFCLoaderPlugin extends Plugin {
+//     /**
+//      * @constructor
+//      * @param {Viewer} viewer The Viewer.
+//      * @param {Object} [cfg={}] Plugin configuration.
+//      */
+//     constructor(viewer, cfg = {}) {
+//         super("ifcLoader", viewer, cfg);
 
-        /**
-         * The GLTFLoaderPlugin used internally to load the converted GLTF.
-         * @type {GLTFLoaderPlugin}
-         */
-        this.gltfLoader = new GLTFLoaderPlugin(this.viewer);
-    }
+//         /**
+//          * The GLTFLoaderPlugin used internally to load the converted GLTF.
+//          * @type {GLTFLoaderPlugin}
+//          */
+//         this.gltfLoader = new GLTFLoaderPlugin(this.viewer);
+//     }
 
-    /**
-     * Loads an IFC model from the given source.
-     *
-     * @param {Object} [params={}] Loading parameters.
-     * @param {string} params.src Path to an IFC file.
-     * @param {Function} [params.progressCallback] Callback to track loading progress.
-     * @param {Function} [params.progressTextCallback] Callback to track loading progress with text updates.
-     * @returns {Promise<SceneModel>} A promise that resolves to the loaded SceneModel.
-     */
-    async load(params = {}) {
-        if (!params.src) {
-            this.error("load() param expected: src");
-        }
-        const data = await fetchFile(params.src);
-        const { gltf, metaData } = await ifc2gltf(
-            data,
-            {
-                remote: true,
-                progressCallback: params.progressCallback,
-                progressTextCallback: params.progressTextCallback
-            }
-        );
-        const sceneModel = this.gltfLoader.load({
-            id: "myModel",
-            gltf: gltf,
-            metaModelJSON: metaData
-        });
-        return sceneModel;
-    }
-}
-export { CxConverterIFCLoaderPlugin };
+//     /**
+//      * Loads an IFC model from the given source.
+//      *
+//      * @param {Object} [params={}] Loading parameters.
+//      * @param {string} params.src Path to an IFC file.
+//      * @param {Function} [params.progressCallback] Callback to track loading progress.
+//      * @param {Function} [params.progressTextCallback] Callback to track loading progress with text updates.
+//      * @returns {Promise<SceneModel>} A promise that resolves to the loaded SceneModel.
+//      */
+//     async load(params = {}) {
+//         if (!params.src) {
+//             this.error("load() param expected: src");
+//         }
+//         const data = await fetchFile(params.src);
+//         const { gltf, metaData } = await ifc2gltf(
+//             data,
+//             {
+//                 remote: true,
+//                 progressCallback: params.progressCallback,
+//                 progressTextCallback: params.progressTextCallback
+//             }
+//         );
+//         const sceneModel = this.gltfLoader.load({
+//             id: "myModel",
+//             gltf: gltf,
+//             metaModelJSON: metaData
+//         });
+//         return sceneModel;
+//     }
+// }
+// export { CxConverterIFCLoaderPlugin };

package/src/plugins/CxConverterIFCLoaderPlugin/index.js

@@ -1 +1 @@
-export * from "./CxConverterIFCLoaderPlugin.js";
+// export * from "./CxConverterIFCLoaderPlugin.js";

package/src/plugins/FastNavPlugin/FastNavPlugin.js

@@ -108,6 +108,7 @@ class FastNavPlugin extends Plugin {
      * @param {Number} [cfg.scaleCanvasResolutionFactor=0.6] The factor by which we downscale the canvas resolution whenever we interact with the Viewer.
      * @param {Boolean} [cfg.delayBeforeRestore=true] Whether to temporarily have a delay before restoring normal rendering after we stop interacting with the Viewer.
      * @param {Number} [cfg.delayBeforeRestoreSeconds=0.5] Delay in seconds before restoring normal rendering after we stop interacting with the Viewer.
+     * @param {Function} [cfg.onMoved] Optional callback function fired during moving mode, should return the callback function that will be fired when the interaction stops.
      */
     constructor(viewer, cfg = {}) {
 
@@ -123,6 +124,8 @@ class FastNavPlugin extends Plugin {
         this._scaleCanvasResolutionFactor = cfg.scaleCanvasResolutionFactor || 0.6;
         this._delayBeforeRestore = (cfg.delayBeforeRestore !== false);
         this._delayBeforeRestoreSeconds = cfg.delayBeforeRestoreSeconds || 0.5;
+        this._onMoved = cfg.onMoved;
+        this._onStopped = null;
 
         let timer = this._delayBeforeRestoreSeconds * 1000;
         let fastMode = false;
@@ -141,6 +144,10 @@ class FastNavPlugin extends Plugin {
                 } else {
                     viewer.scene.canvas.resolutionScale = this._defaultScaleCanvasResolutionFactor;
                 }
+                if (this._onMoved) {
+                    this._onStopped = this._onMoved();
+                }
+
                 fastMode = true;
             }
         };
@@ -152,10 +159,12 @@ class FastNavPlugin extends Plugin {
             viewer.scene._renderer.setPBREnabled(true);
             viewer.scene._renderer.setSAOEnabled(true);
             viewer.scene._renderer.setTransparentEnabled(true);
+            if (this._onStopped) {
+                this._onStopped();
+            }
             fastMode = false;
         };
 
-        this._onCanvasBoundary = viewer.scene.canvas.on("boundary", switchToLowQuality);
         this._onCameraMatrix = viewer.scene.camera.on("matrix", switchToLowQuality);
 
         this._onSceneTick = viewer.scene.on("tick", (tickEvent) => {
@@ -167,23 +176,6 @@ class FastNavPlugin extends Plugin {
                 switchToHighQuality();
             }
         });
-
-        let down = false;
-
-        this._onSceneMouseDown = viewer.scene.input.on("mousedown", () => {
-            down = true;
-        });
-
-        this._onSceneMouseUp = viewer.scene.input.on("mouseup", () => {
-            down = false;
-        });
-
-        this._onSceneMouseMove = viewer.scene.input.on("mousemove", () => {
-            if (!down) {
-                return;
-            }
-            switchToLowQuality();
-        });
     }
 
     /**

package/src/plugins/SectionPlanesPlugin/Control.js

@@ -460,7 +460,7 @@ class Control {
 
         { // Keep gizmo screen size constant
             let lastDist = -1;
-            const setRootNodeScale = size => rootNode.scale = [size, size, size];
+            const setRootNodeScale = size => { if (size !== rootNode.scale[0]) { rootNode.scale = [size, size, size]; } };
             const onSceneTick = scene.on("tick", () => {
                 const dist = Math.abs(math.distVec3(camera.eye, pos));
                 if (camera.projection === "perspective") {

package/src/plugins/TreeViewPlugin/RenderService.js

@@ -5,6 +5,15 @@ import { addContextMenuListener } from "../lib/html/MenuEvent.js";
  */
 export class RenderService {
 
+  /**
+  * @constructor
+  *
+  * @param {HTMLElement} treeViewContainer Container element for the tree which uses this render service.
+  */
+  constructor(treeViewContainer) {
+    this._treeViewContainer = treeViewContainer;
+  }
+
   /*
   * Creates the root node of the tree.
   * @return {HTMLElement} The root node of the tree.
@@ -129,7 +138,7 @@ export class RenderService {
   }
 
   getSwitchElement(nodeId) {
-    return document.getElementById(`switch-${nodeId}`);
+    return this._treeViewContainer.querySelector(`[id="switch-${nodeId}"]`);
   }
 
   isChecked(element) {
@@ -137,7 +146,7 @@ export class RenderService {
   }
 
   setCheckbox(nodeId, checked, indeterminate = false) {
-    const checkbox = document.getElementById(`checkbox-${nodeId}`);
+    const checkbox = this._treeViewContainer.querySelector(`[id="checkbox-${nodeId}"]`);
     if (checkbox) {
       if (checked !== checkbox.checked) {
         checkbox.checked = checked;
@@ -152,7 +161,7 @@ export class RenderService {
   }
 
   setXRayed(nodeId, xrayed) {
-    const treeNode = document.getElementById(nodeId);
+    const treeNode = this._treeViewContainer.querySelector(`[id="${nodeId}"]`);
     if (treeNode) {
       if (xrayed) {
         treeNode.classList.add('xrayed-node');
@@ -163,7 +172,7 @@ export class RenderService {
   }
 
   setHighlighted(nodeId, highlighted) { 
-    const treeNode = document.getElementById(nodeId);
+    const treeNode = this._treeViewContainer.querySelector(`[id="${nodeId}"]`);
     if (treeNode) {
       if (highlighted) {
         treeNode.scrollIntoView({block: "center"});

package/src/plugins/TreeViewPlugin/TreeViewPlugin.js

@@ -415,7 +415,7 @@ export class TreeViewPlugin extends Plugin {
         this._sortNodes = cfg.sortNodes;
         this._pruneEmptyNodes = cfg.pruneEmptyNodes;
         this._showListItemElementId = null;
-        this._renderService = cfg.renderService || new RenderService();
+        this._renderService = cfg.renderService || new RenderService(this._containerElement);
         this._showIndeterminate = cfg.showIndeterminate ?? false;
         this._showProjectNode = cfg.showProjectNode ?? false;
         this._elevationSortFunction = cfg.elevationSortFunction ?? undefined;

package/src/plugins/index.js

@@ -10,7 +10,6 @@ export * from "./OBJLoaderPlugin/index.js";
 export * from "./SectionPlanesPlugin/index.js";
 export * from "./StoreyViewsPlugin/index.js";
 export * from "./FaceAlignedSectionPlanesPlugin/index.js";
-export * from "./SkyboxesPlugin/index.js";
 export * from "./STLLoaderPlugin/index.js";
 export * from "./TreeViewPlugin/index.js";
 export * from "./ViewCullPlugin/index.js";

package/src/viewer/Viewer.js

@@ -363,22 +363,6 @@ class Viewer {
             this.sendToPlugins("snapshotStarting"); // Tells plugins to hide things that shouldn't be in snapshot
         }
 
-        const captured = {};
-        for (let i = 0, len = this._plugins.length; i < len; i++) {
-            const plugin = this._plugins[i];
-            if (plugin.getContainerElement) {
-                const container = plugin.getContainerElement();
-                if (container !== document.body) {
-                    if (!captured[container.id]) {
-                        captured[container.id] = true;
-                        html2canvas(container).then(function (canvas) {
-                            document.body.appendChild(canvas);
-                        });
-                    }
-                }
-            }
-        }
-
         // firing "rendering" is necessary to trigger DTX{Lines,Triangles}Layer::_uploadDeferredFlags
         this.scene.fire("rendering", { }, true);
 

package/src/viewer/scene/CameraControl/lib/controllers/PivotController.js

@@ -13,6 +13,9 @@ const tempVec4a = math.vec4();
 const tempVec4b = math.vec4();
 const tempVec4c = math.vec4();
 
+const TOP_LIMIT = 0.001;
+const BOTTOM_LIMIT = Math.PI - 0.001;
+
 
 /** @private */
 class PivotController {
@@ -188,14 +191,9 @@ class PivotController {
      */
     startPivot() {
 
-        if (this._cameraLookingDownwards()) {
-            this._pivoting = false;
-            return false;
-        }
-
         const camera = this._scene.camera;
 
-        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.worldUp);
+        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.up);
         math.transformPoint3(lookat, this.getPivotPos(), this._cameraOffset);
 
         const pivotPos = this.getPivotPos();
@@ -298,8 +296,31 @@ class PivotController {
             dx = -dx;
         }
         this._azimuth += -dx * .01;
-        this._polar += dy * .01;
-        this._polar = math.clamp(this._polar, .001, Math.PI - .001);
+
+        const isMovingUp = dy < 0;
+        const isMovingDown = dy > 0;
+        
+        // Track if we're at limits - only check if we're very close to the limit
+        const atTopLimit = Math.abs(this._polar - TOP_LIMIT) < 0.005;
+        const atBottomLimit = Math.abs(this._polar - BOTTOM_LIMIT) < 0.005;
+        
+        let newPolar = this._polar + dy * .01;
+        
+        // Case 1: At top limit and trying to go beyond
+        if (atTopLimit && isMovingUp) {
+            newPolar = TOP_LIMIT;
+        }
+        // Case 2: At bottom limit and trying to go beyond
+        else if (atBottomLimit && isMovingDown) {
+            newPolar = BOTTOM_LIMIT;
+        }
+        // Case 3: Normal rotation or moving away from a limit
+        else {
+            newPolar = math.clamp(newPolar, TOP_LIMIT, BOTTOM_LIMIT);
+        }
+
+        this._polar = newPolar;
+
         const pos = [
             this._radius * Math.sin(this._polar) * Math.sin(this._azimuth),
             this._radius * Math.cos(this._polar),