Experimental: Automatic model dimensions #611

xeokit · Apr 6, 2021 · e6adf75 · e6adf75
1 parent 0aeb7aa
commit e6adf75
Show file tree

Hide file tree

Showing 4 changed files with 553 additions and 2 deletions.
diff --git a/examples/DimensionsFootprintModel_example1.html b/examples/DimensionsFootprintModel_example1.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>DimensionsFootprintModel - Showing dimensions of an IFC model in the ground plane</title>
+    <link href="css/styles.css" type="text/css" rel="stylesheet"/>
+
+    <style>
+
+        #myCanvas {
+            background: #ffffff;
+        }
+
+        #myNavCubeCanvas {
+            position: absolute;
+            width: 250px;
+            height: 250px;
+            bottom: 50px;
+            right: 10px;
+            z-index: 200000;
+        }
+
+    </style>
+
+</head>
+<body>
+
+<canvas id="myCanvas"></canvas>
+
+<canvas id="myNavCubeCanvas"></canvas>
+
+<div id="info">
+    <h1>DimensionsFootprintModel - Showing dimensions of an IFC model in the ground plane</h1><br>
+    <ul>
+        <li>
+            <div id="time">Loading JavaScript modules...</div>
+        </li>
+        <li>
+            <a target="_other"
+               href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274">Model source</a>
+        </li>
+    </ul>
+</div>
+
+</body>
+
+<script type="module">
+
+    import {Viewer} from "../src/viewer/Viewer.js";
+    import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
+    import {NavCubePlugin} from "../src/plugins/NavCubePlugin/NavCubePlugin.js";
+    import {DimensionsFootprintModel} from "./js/DimensionsFootprintModel.js";
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.camera.eye = [-3.933, 2.855, 27.018];
+    viewer.camera.look = [4.400, 3.724, 8.899];
+    viewer.camera.up = [-0.018, 0.999, 0.039];
+
+    new NavCubePlugin(viewer, {
+        canvasId: "myNavCubeCanvas",
+        visible: true,
+        size: 250,
+        alignment: "bottomRight",
+        bottomMargin: 100,
+        rightMargin: 10
+    });
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const model = xktLoader.load({
+        id: "myModel",
+        src: "./models/xkt/duplex/duplex.xkt",
+        metaModelSrc: "./metaModels/duplex/metaModel.json", // Creates a MetaObject instances in scene.metaScene.metaObjects
+        excludeTypes: ["IfcSpace"],
+        edges: true
+    });
+
+    const t0 = performance.now();
+    document.getElementById("time").innerHTML = "Loading model...";
+
+    model.on("loaded", function () {
+
+        const t1 = performance.now();
+        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + model.numEntities;
+
+        const dimensionsFootPrintModel = new DimensionsFootprintModel(viewer.scene, {});
+
+        dimensionsFootPrintModel.createDimensions({
+            id: model.id,
+            aabb: model.aabb
+        });
+
+        dimensionsFootPrintModel.finalize();
+    });
+
+</script>
+</html>
diff --git a/examples/DimensionsFootprintModel_example2.html b/examples/DimensionsFootprintModel_example2.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>DimensionsFootprintModel - Showing dimensions of hovered objects in the ground plane</title>
+    <link href="css/styles.css" type="text/css" rel="stylesheet"/>
+
+    <style>
+        #myCanvas {
+            background: lightblue;
+        }
+    </style>
+
+</head>
+
+<body>
+
+<canvas id="myCanvas"></canvas>
+
+<div id="info">
+    <h1>DimensionsFootprintModel - Showing dimensions of hovered objects in the ground plane</h1><br>
+    <ul>
+        <li>
+            <a target="_other"
+               href="./../docs/class/src/viewer/scene/PerformanceModel/PerformanceModel.js~PerformanceModel.html">PerformanceModel</a>
+            - high-performance model representation
+        </li>
+    </ul>
+</div>
+</body>
+
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer} from "../src/viewer/Viewer.js";
+    import {PerformanceModel} from "../src/viewer/scene/PerformanceModel/PerformanceModel.js";
+    import {DimensionsFootprintModel} from "./js/DimensionsFootprintModel.js";
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true
+    });
+
+    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
+    viewer.scene.camera.look = [0, -5.75, 0];
+    viewer.scene.camera.up = [0.37, 0.91, -0.11];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const performanceModel = new PerformanceModel(viewer.scene, {
+        id: "table",
+        isModel: true,
+        position: [0, 0, 0],
+        scale: [1, 1, 1],
+        rotation: [0, 0, 0],
+        edges: true
+    });
+
+    performanceModel.createGeometry({
+        id: "myBoxGeometry",
+        primitive: "triangles",
+        positions: [1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1,
+            -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1
+        ],
+        normals: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
+            -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1
+        ],
+
+        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
+        ]
+    });
+
+    // Red table leg object
+
+    performanceModel.createMesh({
+        id: "redLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [-4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1, 0.3, 0.3]
+    });
+
+    performanceModel.createEntity({
+        id: "redLeg",
+        meshIds: ["redLegMesh"],
+        isObject: true
+    });
+
+    // Green table leg object
+
+    performanceModel.createMesh({
+        id: "greenLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [4, -6, -4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 1.0, 0.3]
+    });
+
+    performanceModel.createEntity({
+        id: "greenLeg",
+        meshIds: ["greenLegMesh"],
+        isObject: true
+    });
+
+    // Blue table leg
+
+    performanceModel.createMesh({
+        id: "blueLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [0.3, 0.3, 1.0]
+    });
+
+    performanceModel.createEntity({
+        id: "blueLeg",
+        meshIds: ["blueLegMesh"],
+        isObject: true
+    });
+
+    // Yellow table leg
+
+    performanceModel.createMesh({
+        id: "yellowLegMesh",
+        geometryId: "myBoxGeometry",
+        position: [-4, -6, 4],
+        scale: [1, 3, 1],
+        rotation: [0, 0, 0],
+        color: [1.0, 1.0, 0.0]
+    });
+
+    performanceModel.createEntity({
+        id: "yellowLeg",
+        meshIds: ["yellowLegMesh"],
+        isObject: true
+    });
+
+    // Purple table top
+
+    performanceModel.createMesh({
+        id: "purpleTableTopMesh",
+        geometryId: "myBoxGeometry",
+        position: [0, -3, 0],
+        scale: [6, 0.5, 6],
+        rotation: [0, 0, 0],
+        color: [1.0, 0.3, 1.0]
+    });
+
+    performanceModel.createEntity({
+        id: "purpleTableTop",
+        meshIds: ["purpleTableTopMesh"],
+        isObject: true
+    });
+
+    performanceModel.finalize();
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a DimensionsPlanModel that shows the dimensions of our first PerformanceModel
+    //------------------------------------------------------------------------------------------------------------------
+
+    const dimensionsPlanModel = new DimensionsFootprintModel(viewer.scene, {});
+
+    for (let i = 0, len = viewer.scene.numObjects; i < len; i++) {
+
+        const objectId = viewer.scene.objectIds[i];
+        const entity = viewer.scene.objects[objectId];
+
+        dimensionsPlanModel.createDimensions({
+            id: entity.id,
+            aabb: entity.aabb
+        });
+    }
+
+    dimensionsPlanModel.finalize();
+
+    dimensionsPlanModel.visible = false;
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Mouse over Entities to show their dimensions in the ground plane
+    //------------------------------------------------------------------------------------------------------------------
+
+    let lastEntity = null;
+
+    viewer.scene.input.on("mousemove", function (coords) {
+
+        const pickResult = viewer.scene.pick({
+            canvasPos: coords
+        });
+
+        if (pickResult) {
+
+            if (!lastEntity || pickResult.entity.id !== lastEntity.id) {
+
+                if (lastEntity) {
+                    dimensionsPlanModel.setDimensionsVisible(lastEntity.id, false);
+                }
+
+                lastEntity = pickResult.entity;
+
+                dimensionsPlanModel.setDimensionsVisible(pickResult.entity.id, true);
+            }
+
+        } else {
+
+            if (lastEntity) {
+                dimensionsPlanModel.setDimensionsVisible(lastEntity.id, false);
+                lastEntity = null;
+            }
+        }
+    });
+
+</script>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -406,10 +406,16 @@ <h1><a href="http://xeokit.io">xeokit</a> / Examples</h1>
             "storeyViews_StoreyViewsPlugin_recipe4"
         ],
 
-        "Techniques": [
+        "Experimental": [
+
+            "# Optimizing interactivity",
             "techniques_nonInteractiveQuality",
             "techniques_nonInteractiveQuality_fade",
-            "techniques_findComplexEntities"
+            "techniques_findComplexEntities",
+
+            "# Auto-generating dimensions",
+            "DimensionsFootprintModel_example1",
+            "DimensionsFootprintModel_example2"
         ],
 
         "Tree Views": [