@xeokit/xeokit-sdk 2.6.65 → 2.6.67

package/src/viewer/scene/sectionCaps/SectionCaps.js

@@ -0,0 +1,774 @@
+import { math } from "../math/math.js";
+import { Mesh } from "../mesh/Mesh.js";
+import { ReadableGeometry } from "../geometry/ReadableGeometry.js";
+import { buildLineGeometry } from "../geometry/index.js";
+import { PhongMaterial } from "../materials/PhongMaterial.js";
+import earcut from '../libs/earcut.js';
+
+const epsilon = 1e-6;
+const worldUp    = [0, 1, 0];
+const worldRight = [1, 0, 0];
+const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec3c = math.vec3();
+const tempVec3d = math.vec3();
+
+function pointsEqual(p1, p2) {
+    return (
+        Math.abs(p1[0] - p2[0]) < epsilon &&
+        Math.abs(p1[1] - p2[1]) < epsilon &&
+        Math.abs(p1[2] - p2[2]) < epsilon
+    );
+}
+
+/**
+ * @desc Implements hatching for Solid objects on a {@link Scene}.
+ * 
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/slicing/SectionPlanesPlugin_Duplex_SectionCaps.html)]
+ * 
+ * ##Overview
+ * 
+ * The WebGL implementation for capping sliced 3D objects works by first calculating intersection segments where a cutting 
+ * plane meets the object's edges. These segments form a contour that is triangulated using the Earcut algorithm, which 
+ * handles any internal holes efficiently. The resulting triangulated cap is then integrated into the original mesh with 
+ * appropriate normals and UVs.
+ * 
+ * ##Usage
+ * 
+ * In the example, we'll start by enabling readable geometry on the viewer.
+ * 
+ * Then we'll position the camera, and configure the near and far perspective and orthographic
+ * clipping planes. Finally, we'll use {@link XKTLoaderPlugin} to load the Duplex model.
+ * 
+ * ````javascript
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true,
+ *     readableGeometryEnabled: true
+ * });
+ * 
+ * viewer.camera.eye = [-2.341298674548419, 22.43987089731119, 7.236688436028655];
+ * viewer.camera.look = [4.399999999999963, 3.7240000000000606, 8.899000000000006];
+ * viewer.camera.up = [0.9102954845584759, 0.34781746407929504, 0.22446635042673466];
+ * 
+ * const cameraControl = viewer.cameraControl;
+ * cameraControl.navMode = "orbit";
+ * cameraControl.followPointer = true;
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ * 
+ * var t0 = performance.now();
+ * 
+ * document.getElementById("time").innerHTML = "Loading model...";
+ * 
+ * const sceneModel = xktLoader.load({
+ *     id: "myModel",
+ *     src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+ *     edges: true
+ * });
+ * 
+ * sceneModel.on("loaded", () => {
+ * 
+ *     var t1 = performance.now();
+ *     document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+ * 
+ *     //------------------------------------------------------------------------------------------------------------------
+ *     // Add caps materials to all objects inside the loaded model that have an opacity equal to or above 0.7
+ *     //------------------------------------------------------------------------------------------------------------------        
+ *     const opacityThreshold = 0.7;
+ *     const material = new PhongMaterial(viewer.scene,{
+ *         diffuse: [1.0, 0.0, 0.0],
+ *         backfaces: true
+ *     });
+ *     addCapsMaterialsToAllObjects(sceneModel, opacityThreshold, material);
+ * 
+ *     //------------------------------------------------------------------------------------------------------------------
+ *     // Create a moving SectionPlane, that moves through the table models
+ *     //------------------------------------------------------------------------------------------------------------------
+ * 
+ *     const sectionPlanes = new SectionPlanesPlugin(viewer, {
+ *         overviewCanvasId: "mySectionPlanesOverviewCanvas",
+ *         overviewVisible: true,
+ *     });
+ * 
+ *     const sectionPlane = sectionPlanes.createSectionPlane({
+ *         id: "mySectionPlane",
+ *         pos: [0.5, 2.5, 5.0],
+ *         dir: math.normalizeVec3([1.0, 0.01, 1])
+ *     });
+ * 
+ *     sectionPlanes.showControl(sectionPlane.id);
+ * 
+ *     window.viewer = viewer;
+ * 
+ * });
+ * 
+ * function addCapsMaterialsToAllObjects(sceneModel, opacityThreshold, material) {
+ *     const allObjects = sceneModel.objects;
+ *     for(const key in allObjects){
+ *         const object = allObjects[key];
+ *         if(object.opacity >= opacityThreshold)
+ *             object.capMaterial = material;
+ *     }
+ * }
+ * ````
+ */
+
+class SectionCaps {
+    /**
+     * @constructor
+     */
+    constructor(scene) {
+        this.scene = scene;
+        this._resourcesAllocated = false;
+    }
+
+    _onCapMaterialUpdated(entityId, modelId) {
+        if(!this._resourcesAllocated) {
+            this._resourcesAllocated = true;
+            this._sectionPlanes = [];
+            this._verticesMap = {};
+            this._indicesMap = {};
+            this._dirtyMap = {};
+            this._prevIntersectionModelsMap = {};
+            this._sectionPlaneTimeout = null;
+            this._updateTimeout = null;
+
+            const handleSectionPlane = (sectionPlane) => {
+
+                const onSectionPlaneUpdated = () => {
+                    this._setAllDirty(true);
+                    this._update();
+                }
+                this._sectionPlanes.push(sectionPlane);
+                sectionPlane.on('pos', onSectionPlaneUpdated);
+                sectionPlane.on('dir', onSectionPlaneUpdated);
+                sectionPlane.once('destroyed', ((sectionPlane) => {
+                    const sectionPlaneId = sectionPlane.id;
+                    if (sectionPlaneId) {
+                        this._sectionPlanes = this._sectionPlanes.filter((sectionPlane) => sectionPlane.id !== sectionPlaneId);
+                        this._update();
+                    }
+                }).bind(this));
+            }
+
+            for(const key in this.scene.sectionPlanes){
+                handleSectionPlane(this.scene.sectionPlanes[key]);
+            }
+
+            this._onSectionPlaneCreated = this.scene.on('sectionPlaneCreated', handleSectionPlane)
+
+            this._onTick = this.scene.on("tick", () => {
+                //on ticks we only check if there is a model that we have saved vertices for,
+                //but it's no more available on the scene
+                for(const key in this._verticesMap) {
+                    if(!this.scene.models[key]){
+                        delete this._verticesMap[key];
+                        delete this._indicesMap[key];
+                        this._update();
+                    }
+                }
+            })
+        }
+
+        if(!this._dirtyMap[modelId])
+            this._dirtyMap[modelId] = new Map();
+
+        this._dirtyMap[modelId].set(entityId, true);
+        this._update();
+    }
+
+    _update() {
+        clearTimeout(this._updateTimeout);
+        this._deletePreviousModels();
+        this._updateTimeout = setTimeout(() => {
+            clearTimeout(this._updateTimeout);
+            const sceneModels = Object.keys(this.scene.models).map((key) => this.scene.models[key]);
+            this._addHatches(sceneModels, this._sectionPlanes);
+            this._setAllDirty(false);
+        }, 100);
+    }
+
+    _setAllDirty(value) {
+        for(const key in this._dirty) {
+            this._dirtyMap[key].forEach((_, key2) => this._dirtyMap[key].set(key2, value));
+        }
+    }
+
+    _addHatches(sceneModels, planes) {
+
+        if (planes.length <= 0) return;
+
+        planes.forEach((plane) => {
+            sceneModels.forEach((sceneModel) => {
+                //#region creating a plane equation
+                //we create a plane equation that will be used to slice through each triangle
+                const planeEquation = {
+                    A: plane.dir[0],
+                    B: plane.dir[1],
+                    C: plane.dir[2],
+                    D: -(plane.dir[0] * plane.pos[0] + plane.dir[1] * plane.pos[1] + plane.dir[2] * plane.pos[2])
+                }
+                //#endregion
+                
+                if(!this._doesPlaneIntersectBoundingBox(sceneModel.aabb, planeEquation)) return;
+
+                if(!this._dirtyMap[sceneModel.id]) return;
+
+                //#region calculating segments in unsorted way
+                //we calculate the segments by intersecting plane with each triangle
+                const unsortedSegments = new Map();
+                const objects = sceneModel.objects;
+                // Preallocate arrays for triangle vertices to avoid repeated allocation
+                const triangle = [
+                    new Float32Array(3),
+                    new Float32Array(3),
+                    new Float32Array(3)
+                ];
+
+                this._dirtyMap[sceneModel.id].forEach((isDirty, objectId) => {
+                    if (!isDirty) {
+                        return;
+                    }
+
+                    const object = objects[objectId];
+
+                    if(!this._doesPlaneIntersectBoundingBox(object.aabb, planeEquation)) return;
+
+                    if(!this._verticesMap[sceneModel.id]) {
+                        this._verticesMap[sceneModel.id] = new Map();
+                        this._indicesMap[sceneModel.id] = new Map();
+                    }
+
+                    let vertices = [], indices = [];
+
+                    if(!this._verticesMap[sceneModel.id].has(objectId)) {
+                        const isSolid = object.meshes[0].isSolid();
+                        if(isSolid && object.capMaterial) {
+                            object.getEachVertex((_vertices) => {
+                                vertices.push(_vertices[0], _vertices[1], _vertices[2]);
+                            })
+                            object.getEachIndex((_indices) => {
+                                indices.push(_indices);
+                            })
+                        }
+                        this._verticesMap[sceneModel.id].set(objectId, vertices);
+                        this._indicesMap[sceneModel.id].set(objectId, indices);
+                    }
+                    else {
+                        vertices = this._verticesMap[sceneModel.id].get(objectId);
+                        indices = this._indicesMap[sceneModel.id].get(objectId);
+                    }
+                    
+                    const capSegments = [];
+                    const vertCount = indices.length;
+                    
+                    // Preallocate intersection result array
+                    const intersectionBuffer = new Float32Array(3);
+                    
+                    for (let i = 0; i < vertCount; i += 3) {
+                        // Reuse triangle buffer instead of creating new arrays
+                        for (let j = 0; j < 3; j++) {
+                            const idx = indices[i + j] * 3;
+                            triangle[j][0] = vertices[idx];
+                            triangle[j][1] = vertices[idx + 1];
+                            triangle[j][2] = vertices[idx + 2];
+                        }
+                        
+                        // Early null check
+                        if (!triangle[0][0] && !triangle[0][1] && !triangle[0][2]) continue;
+                        
+                        const intersections = [];
+                        for (let i = 0; i < 3; i++) {
+                            const p1 = triangle[i];
+                            const p2 = triangle[(i + 1) % 3];
+                            
+                            // Inline the distance calculations to avoid function calls
+                            const d1 = planeEquation.A * p1[0] + planeEquation.B * p1[1] + planeEquation.C * p1[2] + planeEquation.D;
+                            const d2 = planeEquation.A * p2[0] + planeEquation.B * p2[1] + planeEquation.C * p2[2] + planeEquation.D;
+                            
+                            if (d1 * d2 > 0) continue;
+                            
+                            const t = -d1 / (d2 - d1);
+                            // Reuse intersection buffer
+                            intersectionBuffer[0] = p1[0] + t * (p2[0] - p1[0]);
+                            intersectionBuffer[1] = p1[1] + t * (p2[1] - p1[1]);
+                            intersectionBuffer[2] = p1[2] + t * (p2[2] - p1[2]);
+                            
+                            // Clone the buffer for storage
+                            intersections.push(new Float32Array(intersectionBuffer));
+                        }
+
+                        if(intersections.length === 2) capSegments.push(intersections);
+                    }
+
+                    if (capSegments.length > 0) {
+                        unsortedSegments.set(objectId, capSegments);
+                    }
+                })
+                //#endregion
+
+                //#region sorting the segments
+                const orderedSegments = new Map();
+                unsortedSegments.forEach((unsortedSegment, segmentedId) => {
+                    orderedSegments.set(segmentedId, [
+                        [
+                            unsortedSegment[0] //this is also an array of two vectors
+                        ]
+                    ]);
+                    unsortedSegment.splice(0, 1);
+                    let index = 0;
+                    while (unsortedSegment.length > 0) {
+                        const lastPoint = orderedSegments.get(segmentedId)[index][orderedSegments.get(segmentedId)[index].length - 1][1];
+                        let found = false;
+
+                        for (let i = 0; i < unsortedSegment.length; i++) {
+                            const [start, end] = unsortedSegment[i];
+                            if (pointsEqual(lastPoint, start)) {
+                                orderedSegments.get(segmentedId)[index].push(unsortedSegment[i]);
+                                unsortedSegment.splice(i, 1);
+                                found = true;
+                                break;
+                            } else if (pointsEqual(lastPoint, end)) {
+                                orderedSegments.get(segmentedId)[index].push([end, start]);
+                                unsortedSegment.splice(i, 1);
+                                found = true;
+                                break;
+                            }
+                        }
+
+                        if (!found) {
+                            if (pointsEqual(lastPoint, orderedSegments.get(segmentedId)[index][0][0])) {
+                                if (unsortedSegment.length > 1) {
+                                    orderedSegments.get(segmentedId).push([
+                                        unsortedSegments.get(segmentedId)[0]
+                                    ]);
+                                    unsortedSegment.splice(0, 1);
+                                    index++;
+                                    continue;
+                                }
+
+                            }
+                        }
+
+                        if (!found) {
+                            // console.error(`Could not find a matching segment. Loop may not be closed. Key: ${key}`);
+                            break;
+                        }
+                    }
+                })
+                //#endregion
+                
+                //#region projecting the segments to 2D
+                const projectedSegments = new Map();
+                orderedSegments.forEach((orderedSegment, key) => {
+                    const arr = [];
+                    for (let i = 0; i < orderedSegment.length; i++) {
+                        arr.push([]);
+                        orderedSegment[i].forEach((segment) => {
+                            arr[i].push([
+                                this._projectTo2D(segment[0], plane.dir),
+                                this._projectTo2D(segment[1], plane.dir)
+                            ])
+                        })
+                    }
+                    projectedSegments.set(key, arr);
+                })
+                //#endregion
+                
+                //#region creating caps using earcut and then projecting them back to 3D
+                const caps = new Map();
+                let arr;
+                projectedSegments.forEach((segment, segmentId) => {
+                    arr = [];
+                    const loops = segment;
+
+                    // Group related loops (outer boundaries with their holes)
+
+                    const groupedLoops = [];
+                    const used = new Set();
+
+                    for (let i = 0; i < loops.length; i++) {
+                        if (used.has(i)) continue;
+
+                        const group = [loops[i]];
+                        used.add(i);
+
+                        // Check remaining loops
+                        for (let j = i + 1; j < loops.length; j++) {
+                            if (used.has(j)) continue;
+
+                            if (this._isLoopInside(loops[i], loops[j]) ||
+                                this._isLoopInside(loops[j], loops[i])) {
+                                group.push(loops[j]);
+                                used.add(j);
+                            }
+                        }
+
+                        groupedLoops.push(group);
+                    }
+
+                    // Process each group separately
+                    groupedLoops.forEach(group => {
+                        // Convert the segments into a flat array of vertices and find holes
+                        const vertices = [];
+                        const holes = [];
+                        let currentIndex = 0;
+
+                        // First, determine which loop has the largest area - this will be our outer boundary
+                        const areas = group.map(loop => {
+                            let area = 0;
+                            for (let i = 0; i < loop.length; i++) {
+                                const j = (i + 1) % loop.length;
+                                area += loop[i][0][0] * loop[j][0][1];
+                                area -= loop[j][0][0] * loop[i][0][1];
+                            }
+                            return Math.abs(area) / 2;
+                        });
+
+                        // Find index of the loop with maximum area
+                        const outerLoopIndex = areas.indexOf(Math.max(...areas));
+
+                        // Add the outer boundary first
+                        group[outerLoopIndex].forEach(segment => {
+                            vertices.push(segment[0][0], segment[0][1]);
+                            currentIndex += 2;
+                        });
+
+                        // Then add all other loops as holes
+                        for (let i = 0; i < group.length; i++) {
+                            if (i !== outerLoopIndex) {
+                                // Store the starting vertex index for this hole
+                                holes.push(currentIndex / 2);
+
+                                group[i].forEach(segment => {
+                                    vertices.push(segment[0][0], segment[0][1]);
+                                    currentIndex += 2;
+                                });
+                            }
+                        }
+
+                        // Triangulate using earcut
+                        const triangles = earcut(vertices, holes);
+
+                        // // Convert triangulated 2D points back to 3D
+                        const cap3D = [];
+
+                        // Process each triangle
+                        for (let i = 0; i < triangles.length; i += 3) {
+                            const triangle = [];
+
+                            // Convert each vertex
+                            for (let j = 0; j < 3; j++) {
+                                const idx = triangles[i + j] * 2;
+                                const point2D = [vertices[idx], vertices[idx + 1]];
+                                const point3D = this._convertTo3D(point2D, plane);
+                                triangle.push(point3D);
+                            }
+
+                            cap3D.push(triangle);
+                        }
+                        arr.push(cap3D);
+                    });
+                    caps.set(segmentId, arr);
+                })
+                //#endregion
+
+                //#region converting caps to geometry
+                const geometryData = new Map();
+
+                caps.forEach((cap, capId) => {
+                    arr = [];
+                    cap.forEach(capTriangles => {
+                        // Create a vertex map to reuse vertices
+                        const vertexMap = new Map();
+                        const vertices = [];
+                        const indices = [];
+                        let currentIndex = 0;
+
+                        capTriangles.forEach(triangle => {
+                            const triangleIndices = [];
+
+                            // Process each vertex of the triangle
+                            triangle.forEach(vertex => {
+                                // Create a key for the vertex to check for duplicates
+                                const vertexKey = `${vertex[0].toFixed(6)},${vertex[1].toFixed(6)},${vertex[2].toFixed(6)}`;
+
+                                if (vertexMap.has(vertexKey)) {
+                                    // Reuse existing vertex
+                                    triangleIndices.push(vertexMap.get(vertexKey));
+                                } else {
+                                    // Add new vertex
+                                    vertices.push(vertex[0], vertex[1], vertex[2]);
+                                    vertexMap.set(vertexKey, currentIndex);
+                                    triangleIndices.push(currentIndex);
+                                    currentIndex++;
+                                }
+                            });
+
+                            // Add triangle indices
+                            indices.push(...triangleIndices);
+                        });
+
+                        arr.push({
+                            positions: vertices,
+                            indices: indices
+                        });
+                    });
+
+                    geometryData.set(capId, arr);
+                })
+                //#endregion
+
+                //#region adding meshes to the scene
+                if(!this._prevIntersectionModelsMap[sceneModel.id])
+                    this._prevIntersectionModelsMap[sceneModel.id] = new Map();
+
+                // Cache plane direction values
+                const offsetX = plane.dir[0] * 0.001;
+                const offsetY = plane.dir[1] * 0.001;
+                const offsetZ = plane.dir[2] * 0.001;
+
+                geometryData.forEach((geometries, objectId) => {
+                    const meshArray = new Array(geometries.size); // Pre-allocate array with known size
+                    let meshIndex = 0;
+
+                    geometries.forEach((geometry, index) => {
+                        const vertices = geometry.positions;
+                        const indices = geometry.indices;
+                        const verticesLength = vertices.length;
+
+                        for (let i = 0; i < verticesLength; i += 3) {
+                            vertices[i] += offsetX;
+                            vertices[i + 1] += offsetY;
+                            vertices[i + 2] +=  offsetZ;
+                        }
+                        
+                        // Build normals and UVs in parallel if possible
+                        const meshNormals = math.buildNormals(vertices, indices);
+                        const uvs = this._createUVs(vertices, plane);
+                        
+                        // Create mesh with transformed vertices
+                        meshArray[meshIndex++] = new Mesh(this.scene, {
+                            id: `${plane.id}-${objectId}-${index}`,
+                            geometry: new ReadableGeometry(this.scene, {
+                                primitive: 'triangles',
+                                positions: vertices, // Only copy what we need
+                                indices,
+                                normals: meshNormals,
+                                uv: uvs
+                            }),
+                            position: [0, 0, 0],
+                            rotation: [0, 0, 0],
+                            material: sceneModel.objects[objectId].capMaterial
+                        });
+                    })
+                    if(this._prevIntersectionModelsMap[sceneModel.id].has(objectId)) {
+                        this._prevIntersectionModelsMap[sceneModel.id].get(objectId).push(...meshArray)
+                    }
+                    else
+                        this._prevIntersectionModelsMap[sceneModel.id].set(objectId, meshArray);
+                })
+                //#endregion
+            })
+            
+        })
+
+    }
+
+    _doesPlaneIntersectBoundingBox(bb, planeEquation) {
+        const min = [bb[0], bb[1], bb[2]];
+        const max = [bb[3], bb[4], bb[5]];
+
+        const corners = [
+            [min[0], min[1], min[2]], // 000
+            [max[0], min[1], min[2]], // 100
+            [min[0], max[1], min[2]], // 010
+            [max[0], max[1], min[2]], // 110
+            [min[0], min[1], max[2]], // 001
+            [max[0], min[1], max[2]], // 101
+            [min[0], max[1], max[2]], // 011
+            [max[0], max[1], max[2]]  // 111
+        ]
+
+        // Calculate distance from each corner to the plane
+        let hasPositive = false;
+        let hasNegative = false;
+
+        for (const corner of corners) {
+            const distance = planeEquation.A * corner[0] +
+                planeEquation.B * corner[1] +
+                planeEquation.C * corner[2] +
+                planeEquation.D;
+
+            if (distance > 0) hasPositive = true;
+            if (distance < 0) hasNegative = true;
+
+            // If we found points on both sides, the plane intersects the box
+            if (hasPositive && hasNegative) return true;
+        }
+
+        // If all points are on the same side, no intersection
+        return false;
+    }
+
+    //not used but kept for debugging
+    _buildLines(sortedSegments) {
+        for (const key in sortedSegments) {
+            for (let i = 0; i < sortedSegments[key].length; i++) {
+                const segments = sortedSegments[key][i];
+                if (segments.length <= 0) continue;
+                segments.forEach((segment, index) => {
+                    new Mesh(this.scene, {
+                        clippable: false,
+                        geometry: new ReadableGeometry(this.scene, buildLineGeometry({
+                            startPoint: segment[0],
+                            endPoint: segment[1],
+                        })),
+                        material: new PhongMaterial(this.scene, {
+                            emissive: [1, 0, 0]
+                        })
+                    });
+                })
+            }
+
+        }
+    }
+
+    _projectTo2D(point, normal) {
+        let u;
+        if (Math.abs(normal[0]) > Math.abs(normal[1]))
+            u = [-normal[2], 0, normal[0]];
+        else
+            u = [0, normal[2], -normal[1]];
+
+        u = math.normalizeVec3(u);
+        const normalTemp = math.vec3(normal);
+        const cross = math.cross3Vec3(normalTemp, u)
+        const v = math.normalizeVec3(cross);
+        const x = math.dotVec3(point, u);
+        const y = math.dotVec3(point, v);
+
+        return [x, y]
+
+    }
+
+    _isLoopInside(loop1, loop2) {
+        // Simple point-in-polygon test using the first point of loop1
+        const point = loop1[0][0];  // First point of first segment
+        let inside = false;
+        for (let i = 0, j = loop2.length - 1; i < loop2.length; j = i++) {
+            const xi = loop2[i][0][0], yi = loop2[i][0][1];
+            const xj = loop2[j][0][0], yj = loop2[j][0][1];
+
+            const intersect = ((yi > point[1]) !== (yj > point[1]))
+                && (point[0] < (xj - xi) * (point[1] - yi) / (yj - yi) + xi);
+
+            if (intersect) inside = !inside;
+        }
+
+        return inside;
+    }
+
+    _convertTo3D(point2D, plane) {
+        // Reconstruct the same basis vectors used in _projectTo2D
+        let u, normal = plane.dir, planePosition = plane.pos;
+        if (Math.abs(normal[0]) > Math.abs(normal[1])) {
+            u = [-normal[2], 0, normal[0]];
+        } else {
+            u = [0, normal[2], -normal[1]];
+        }
+
+        u = math.normalizeVec3(u);
+        const normalTemp = math.vec3(normal);
+        const cross = math.cross3Vec3(normalTemp, u);
+        const v = math.normalizeVec3(cross);
+
+        // Reconstruct 3D point using the basis vectors
+        const x = point2D[0];
+        const y = point2D[1];
+        const result = [
+            u[0] * x + v[0] * y,
+            u[1] * x + v[1] * y,
+            u[2] * x + v[2] * y
+        ];
+
+        // Project the point onto the cutting plane
+
+        const t = math.dotVec3(normal, [
+            planePosition[0] - result[0],
+            planePosition[1] - result[1],
+            planePosition[2] - result[2]
+        ]);
+
+        return [
+            result[0] + normal[0] * t,
+            result[1] + normal[1] * t,
+            result[2] + normal[2] * t
+        ];
+    }
+
+    _deletePreviousModels() {
+
+        for(const sceneModelId in this._prevIntersectionModelsMap) {
+            const objects = this._prevIntersectionModelsMap[sceneModelId];
+            objects.forEach((value, objectId) => {
+                if(this._dirtyMap[sceneModelId].get(objectId)) {
+                    value.forEach((mesh) => {
+                        mesh.destroy();
+                    })
+                    this._prevIntersectionModelsMap[sceneModelId].delete(objectId);
+                }
+            })
+            if(this._prevIntersectionModelsMap[sceneModelId].size <= 0)
+                delete this._prevIntersectionModelsMap[sceneModelId];
+
+        }
+
+    }
+
+    _createUVs(vertices, plane) {
+        const O = plane.pos;
+        const D = tempVec3a;
+        D.set(plane.dir);
+        math.normalizeVec3(D);
+        const P = tempVec3b;
+
+        const uvs = [ ];
+        for (let i = 0; i < vertices.length; i += 3) {
+            P[0] = vertices[i];
+            P[1] = vertices[i + 1];
+            P[2] = vertices[i + 2];
+
+            // Project P onto the plane
+            const OP = math.subVec3(P, O, tempVec3c);
+            const dist = math.dotVec3(OP, D);
+            math.subVec3(P, math.mulVec3Scalar(D, dist, tempVec3c), P);
+
+            const right = ((Math.abs(math.dotVec3(D, worldUp)) < 0.999)
+                        ? math.cross3Vec3(D, worldUp, tempVec3c)
+                        : worldRight);
+            const v = math.cross3Vec3(D, right, tempVec3c);
+            math.normalizeVec3(v, v);
+
+            const OP_proj = math.subVec3(P, O, P);
+            uvs.push(
+                math.dotVec3(OP_proj, math.normalizeVec3(math.cross3Vec3(v, D, tempVec3d))),
+                math.dotVec3(OP_proj, v));
+        }
+        return uvs;
+    }
+
+    destroy() {
+        this._deletePreviousModels();
+        if(this._resourcesAllocated) {
+            this.scene.off(this._onModelLoaded);
+            this.scene.off(this._onModelUnloaded);
+            this.scene.off(this._onSectionPlaneCreated);
+            this.scene.off(this._onTick);
+        }
+        
+    }
+}
+
+export { SectionCaps };