@xeokit/xeokit-sdk 2.6.77-slim-rc4 → 2.6.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.77-slim-rc4",
+  "version": "2.6.77",
   "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",
@@ -10,6 +10,7 @@
     "dev-build": "rollup --config rollup.dev.config.js",
     "docs": "rm -Rf ./docs/*; ./node_modules/.bin/esdoc",
     "typedocs": "rm -Rf ./docs/*; typedoc --tsconfig tsconfig.json",
+    "publish": "npm publish --access public",
     "changelog": "git fetch; auto-changelog --commit-limit false --package --template changelog-template.hbs",
     "test": "npx percy exec -- npx playwright test"
   },
@@ -52,10 +53,10 @@
   },
   "homepage": "https://xeokit.io",
   "dependencies": {
+    "@creooxag/cxconverter": "^0.0.3-alpha",
     "@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/SphereMap/SphereMap.js

@@ -0,0 +1,42 @@
+import {
+    buildSphereGeometry,
+    Mesh,
+    PhongMaterial,
+    ReadableGeometry
+} from "../../viewer/index.js";
+
+/**
+ *
+ * @param {*} scene
+ * @param {Texture} [texture] Texture to be used on the material for SphereMap
+ * @returns {Mesh}
+ */
+
+export function createSphereMapMesh(scene, texture) {
+    const sphereMapGeometry = new ReadableGeometry(scene, buildSphereGeometry({
+        center: [0, 0, 0],
+        radius: 1,
+        heightSegments: 60,
+        widthSegments: 60
+    }));
+
+    const sphereMapMaterial = new PhongMaterial(scene, {
+        ambient: [0, 0, 0],
+        diffuse: [0, 0, 0],
+        specular: [0, 0, 0],
+        emissive: [1, 1, 1],
+        emissiveMap: texture,
+        backfaces: true
+    });
+
+    return new Mesh(scene, {
+        geometry: sphereMapGeometry,
+        background: true,
+        rotation: [0, 0, 180],
+        material: sphereMapMaterial,
+        visible: true,
+        pickable: false,
+        clippable: false,
+        collidable: false
+    });
+}

package/src/extras/SphereMap/index.js

@@ -0,0 +1 @@
+export * from './SphereMap.js';

package/src/extras/index.js

@@ -3,4 +3,5 @@ export * from "./PointerLens/index.js";
 export * from "./collision/index.js";
 export * from "./MarqueePicker/index.js";
 export * from "./PointerCircle/index.js";
-export * from "./Skybox/index.js";
+export * from "./Skybox/index.js";
+export * from "./SphereMap/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/cxconverter";
 
-// /**
-//  * 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/cxconverter).
+ *
+ * ## 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/GLTFLoaderPlugin/GLTFSceneModelLoader.js

@@ -1,10 +1,10 @@
-import {math} from "../../viewer/scene/math/math.js";
-import {utils} from "../../viewer/scene/utils.js";
-import {core} from "../../viewer/scene/core.js";
-import {sRGBEncoding} from "../../viewer/scene/constants/constants.js";
-import {worldToRTCPositions} from "../../viewer/scene/math/rtcCoords.js";
-import {parse} from '@loaders.gl/core';
-import {GLTFLoader, postProcessGLTF} from '@loaders.gl/gltf';
+import { parse } from '@loaders.gl/core';
+import { GLTFLoader, postProcessGLTF } from '@loaders.gl/gltf';
+import { sRGBEncoding } from "../../viewer/scene/constants/constants.js";
+import { core } from "../../viewer/scene/core.js";
+import { math } from "../../viewer/scene/math/math.js";
+import { worldToRTCPositions } from "../../viewer/scene/math/rtcCoords.js";
+import { utils } from "../../viewer/scene/utils.js";
 
 import {
     ClampToEdgeWrapping,
@@ -98,7 +98,7 @@ function getBasePath(src) {
     return (i !== 0) ? src.substring(0, i + 1) : "";
 }
 
-function parseGLTF(plugin, src, gltf, metaModelJSON, options, sceneModel, ok) {
+function parseGLTF(plugin, src, gltf, metaModelJSON, options, sceneModel, ok, error) {
     const spinner = plugin.viewer.scene.canvas.spinner;
     spinner.processes++;
     parse(gltf, GLTFLoader, {
@@ -146,6 +146,8 @@ function parseGLTF(plugin, src, gltf, metaModelJSON, options, sceneModel, ok) {
         }
         spinner.processes--;
         ok();
+    }).catch((err) => {
+        if (error) error(err);
     });
 }
 
@@ -606,4 +608,5 @@ function error(ctx, msg) {
     ctx.plugin.error(msg);
 }
 
-export {GLTFSceneModelLoader};
+export { GLTFSceneModelLoader };
+

package/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js

@@ -1,9 +1,19 @@
 import {math} from "../../viewer/scene/math/math.js";
 import {Plugin} from "../../viewer/Plugin.js";
 import {SectionPlane} from "../../viewer/scene/sectionPlane/SectionPlane.js";
-import {Control} from "./Control.js";
+import {TransformControl} from "../TransformControl/TransformControl.js";
 import {Overview} from "./Overview.js";
 
+import {buildCylinderGeometry} from "../../viewer/scene/geometry/builders/buildCylinderGeometry.js";
+import {buildSphereGeometry} from "../../viewer/scene/geometry/builders/buildSphereGeometry.js";
+import {buildTorusGeometry} from "../../viewer/scene/geometry/builders/buildTorusGeometry.js";
+import {ReadableGeometry} from "../../viewer/scene/geometry/ReadableGeometry.js";
+import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
+import {EmphasisMaterial} from "../../viewer/scene/materials/EmphasisMaterial.js";
+import {Node} from "../../viewer/scene/nodes/Node.js";
+import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
+import {worldToRTCPos} from "../../viewer/scene/math/rtcCoords.js";
+
 const tempAABB = math.AABB3();
 const tempVec3 = math.vec3();
 
@@ -234,7 +244,160 @@ class SectionPlanesPlugin extends Plugin {
     }
 
     _sectionPlaneCreated(sectionPlane) {
-        const control = (this._freeControls.length > 0) ? this._freeControls.pop() : new Control(this);
+        const control = ((this._freeControls.length > 0)
+                         ? this._freeControls.pop()
+                         : (() => {
+                             const scene = this.viewer.scene;
+                             const planeRoot = (function() {
+                                 const rootNode = new Node(scene, { isObject: false });
+
+                                 rootNode.addChild(new Mesh(rootNode, { // plane
+                                     geometry: new ReadableGeometry(rootNode, {
+                                         primitive: "triangles",
+                                         positions: [
+                                             0.5, 0.5, 0.0, 0.5, -0.5, 0.0, // 0
+                                             -0.5, -0.5, 0.0, -0.5, 0.5, 0.0, // 1
+                                             0.5, 0.5, -0.0, 0.5, -0.5, -0.0, // 2
+                                             -0.5, -0.5, -0.0, -0.5, 0.5, -0.0 // 3
+                                         ],
+                                         indices: [0, 1, 2, 2, 3, 0]
+                                     }),
+                                     material: new PhongMaterial(rootNode, {
+                                         emissive: [0, 0.0, 0],
+                                         diffuse: [0, 0, 0],
+                                         backfaces: true
+                                     }),
+                                     opacity: 0.6,
+                                     ghosted: true,
+                                     ghostMaterial: new EmphasisMaterial(rootNode, {
+                                         edges: false,
+                                         filled: true,
+                                         fillColor: [1, 1, 0],
+                                         edgeColor: [0, 0, 0],
+                                         fillAlpha: 0.1,
+                                         backfaces: true
+                                     }),
+                                     pickable: false,
+                                     collidable: true,
+                                     clippable: false,
+                                     visible: false,
+                                     scale: [2.4, 2.4, 1],
+                                     isObject: false
+                                 }));
+
+                                 rootNode.addChild(new Mesh(rootNode, { // Visible frame
+                                     geometry: new ReadableGeometry(rootNode, buildTorusGeometry({
+                                         center: [0, 0, 0],
+                                         radius: 1.7,
+                                         tube: 0.02,
+                                         radialSegments: 4,
+                                         tubeSegments: 4,
+                                         arc: Math.PI * 2.0
+                                     })),
+                                     material: new PhongMaterial(rootNode, {
+                                         emissive: [0, 0, 0],
+                                         diffuse: [0, 0, 0],
+                                         specular: [0, 0, 0],
+                                         shininess: 0
+                                     }),
+                                     //highlighted: true,
+                                     highlightMaterial: new EmphasisMaterial(rootNode, {
+                                         edges: false,
+                                         edgeColor: [0.0, 0.0, 0.0],
+                                         filled: true,
+                                         fillColor: [0.8, 0.8, 0.8],
+                                         fillAlpha: 1.0
+                                     }),
+                                     pickable: false,
+                                     collidable: false,
+                                     clippable: false,
+                                     visible: false,
+                                     scale: [1, 1, .1],
+                                     rotation: [0, 0, 45],
+                                     isObject: false
+                                 }));
+
+                                 return {
+                                     setPosition: (function() {
+                                         const origin = math.vec3();
+                                         const rtcPos = math.vec3();
+                                         return function(p) {
+                                             worldToRTCPos(p, origin, rtcPos);
+                                             rootNode.origin = origin;
+                                             rootNode.position = rtcPos;
+                                         };
+                                     })(),
+                                     setQuaternion: q => { rootNode.quaternion = q; },
+                                     setScale: s => { rootNode.scale = s; },
+                                     setVisible: v => { rootNode.visible = v; }
+                                 };
+                             })();
+                             let unbindSectionPlane = () => { };
+                             const ctrl = new TransformControl(this.viewer);
+
+                             let culled  = false;
+                             let visible = false;
+                             let handlers = null;
+                             const updateVisible = () => {
+                                 const vis = visible && (! culled);
+                                 planeRoot.setVisible(vis);
+                                 ctrl.setHandlers(vis && handlers);
+                             };
+
+                             return {
+                                 _destroy: () => {
+                                     unbindSectionPlane();
+                                     ctrl.destroy();
+                                 },
+                                 setCulled:  c => { culled = c;  updateVisible(); },
+                                 setVisible: v => { visible = v; updateVisible(); },
+                                 _setSectionPlane: sectionPlane => {
+                                     unbindSectionPlane();
+                                     if (sectionPlane) {
+                                         let ignoreNextSectionPlaneDirUpdate = false;
+                                         handlers = {
+                                             onPosition:   p => {
+                                                 planeRoot.setPosition(p);
+                                                 sectionPlane.pos = p;
+                                             },
+                                             onQuaternion: q => {
+                                                 planeRoot.setQuaternion(q);
+                                                 ignoreNextSectionPlaneDirUpdate = true;
+                                                 sectionPlane.quaternion = q;
+                                             },
+                                             onScreenScale: s => {
+                                                 planeRoot.setScale(s);
+                                             }
+                                         };
+
+                                         const setPosFromSectionPlane = () => {
+                                             planeRoot.setPosition(sectionPlane.pos);
+                                             ctrl.setPosition(sectionPlane.pos);
+                                         };
+                                         const setDirFromSectionPlane = () => {
+                                             planeRoot.setQuaternion(sectionPlane.quaternion);
+                                             ctrl.setQuaternion(sectionPlane.quaternion);
+                                         };
+                                         setPosFromSectionPlane();
+                                         setDirFromSectionPlane();
+                                         const onSectionPlanePos = sectionPlane.on("pos", setPosFromSectionPlane);
+                                         const onSectionPlaneDir = sectionPlane.on("dir", () => {
+                                             if (!ignoreNextSectionPlaneDirUpdate) {
+                                                 setDirFromSectionPlane();
+                                             } else {
+                                                 ignoreNextSectionPlaneDirUpdate = false;
+                                             }
+                                         });
+
+                                         unbindSectionPlane = () => {
+                                             sectionPlane.off(onSectionPlanePos);
+                                             sectionPlane.off(onSectionPlaneDir);
+                                             unbindSectionPlane = () => { };
+                                         };
+                                     }
+                                 }
+                             };
+                         })());
         control._setSectionPlane(sectionPlane);
         control.setVisible(false);
         this._controls[sectionPlane.id] = control;