Merge pull request #1367 from paireks/develop/AABBVisualization

[FEATURE] AABB representation
xeokit · Feb 12, 2024 · 4953885 · 4953885
2 parents e6315e9 + 96dc0cd
commit 4953885
Show file tree

Hide file tree

Showing 3 changed files with 303 additions and 1 deletion.
diff --git a/examples/scenegraph/buildBoxLinesGeometryFromAABB.html b/examples/scenegraph/buildBoxLinesGeometryFromAABB.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<div class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/geometry_icon.png"/>
+    <h1>buildBoxLinesGeometryFromAABB()</h1>
+    <h2>Builds box-shaped line segment geometry from AABB</h2>
+    <p>In this example, we're creating a simple 3D scene that contains a box-shaped line segment geometry, from AABB of a model.</p>
+    <h3>Components Used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/mesh/Mesh.js~Mesh.html"
+               target="_other">Mesh</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/geometry/ReadableGeometry.js~ReadableGeometry.html"
+               target="_other">ReadableGeometry</a>
+        </li>
+        <li>
+            <a href="../../docs/function/index.html#static-function-buildBoxLinesGeometryFromAABB"
+               target="_other">buildBoxLinesGeometryFromAABB()</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/materials/PhongMaterial.js~PhongMaterial.html"
+               target="_other">PhongMaterial</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/viewer/scene/materials/Texture.js~Texture.html"
+               target="_other">Texture</a>
+        </li>
+    </ul>
+</div>
+</body>
+
+<script id="source" type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import {Viewer, Mesh, Node, buildBoxGeometry, buildBoxLinesGeometryFromAABB, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer and arrange the camera
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    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];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Build a simple scene graph representing a table with four legs
+    //------------------------------------------------------------------------------------------------------------------
+
+    const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
+        xSize: 1,
+        ySize: 1,
+        zSize: 1
+    }));
+
+    new Node(viewer.scene, {
+        id: "table",
+        isModel: true, // <--------------------- Node represents a model
+        rotation: [0, 50, 0],
+        position: [0, 0, 0],
+        scale: [1, 1, 1],
+
+        children: [
+
+            new Mesh(viewer.scene, { // Red table leg
+                id: "redLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [-4, -6, -4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [1, 0.3, 0.3]
+                })
+            }),
+
+            new Mesh(viewer.scene, { // Green table leg
+                id: "greenLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [4, -6, -4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [0.3, 1.0, 0.3]
+                })
+            }),
+
+            new Mesh(viewer.scene, {// Blue table leg
+                id: "blueLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [4, -6, 4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [0.3, 0.3, 1.0]
+                })
+            }),
+
+            new Mesh(viewer.scene, {  // Yellow table leg
+                id: "yellowLeg",
+                isObject: true, // <---------- Node represents an object
+                position: [-4, -6, 4],
+                scale: [1, 3, 1],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [1.0, 1.0, 0.0]
+                })
+            }),
+
+            new Mesh(viewer.scene, { // Purple table top
+                id: "tableTop",
+                isObject: true, // <---------- Node represents an object
+                position: [0, -3, 0],
+                scale: [6, 0.5, 6],
+                rotation: [0, 0, 0],
+                geometry: boxGeometry,
+                material: new PhongMaterial(viewer.scene, {
+                    diffuse: [1.0, 0.3, 1.0]
+                })
+            })
+        ]
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Get AABB from the model and draw it
+    //------------------------------------------------------------------------------------------------------------------
+
+    let aabb = viewer.scene.aabb;
+    console.log(aabb);
+
+    new Mesh(viewer.scene, {
+        geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometryFromAABB({
+            id: "aabb",
+            aabb: aabb,
+        })),
+        material: new PhongMaterial(viewer.scene, {
+            emissive: [0, 1,]
+        })
+    });
+
+</script>
+</html>
diff --git a/examples/scenegraph/index.html b/examples/scenegraph/index.html
@@ -264,6 +264,7 @@
             ["geometry_ReadableGeometry", "Browser-resident geometry"],
             ["buildBoxGeometry", "Building box-shaped triangle mesh geometry"],
             ["buildBoxLinesGeometry", "Building box-shaped wireframe geometry"],
+            ["buildBoxLinesGeometryFromAABB", "Building box-shaped wireframe geometry from AABB"],
             ["buildCylinderGeometry", "Building cylinder-shaped triangle mesh geometry"],
             ["buildGridGeometry", "Building grid-shaped wireframe geometry"],
             ["buildPlaneGeometry", "Building plane-shaped triangle mesh geometry"],

diff --git a/src/viewer/scene/geometry/builders/buildBoxLinesGeometry.js b/src/viewer/scene/geometry/builders/buildBoxLinesGeometry.js
@@ -103,4 +103,136 @@ function buildBoxLinesGeometry(cfg = {}) {
     });
 }
 
-export {buildBoxLinesGeometry};
+/**
+ * @desc Creates a box-shaped lines {@link Geometry} from AABB.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a box-shaped {@link ReadableGeometry} that has lines primitives.
+ * This box will be created from AABB of a model.
+ *
+ * [[Run this example](/examples/#geometry_builders_buildBoxLinesGeometryFromAABB)]
+ *
+ * ````javascript
+ *     import {Viewer, Mesh, Node, buildBoxGeometry, buildBoxLinesGeometryFromAABB, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+ *
+ *     const viewer = new Viewer({
+ *         canvasId: "myCanvas"
+ *     });
+ *
+ *     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];
+ *
+ *     const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
+ *         xSize: 1,
+ *         ySize: 1,
+ *         zSize: 1
+ *     }));
+ *
+ *     new Node(viewer.scene, {
+ *         id: "table",
+ *         isModel: true, // <--------------------- Node represents a model
+ *         rotation: [0, 50, 0],
+ *         position: [0, 0, 0],
+ *         scale: [1, 1, 1],
+ *
+ *         children: [
+ *
+ *             new Mesh(viewer.scene, { // Red table leg
+ *                 id: "redLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [-4, -6, -4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [1, 0.3, 0.3]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, { // Green table leg
+ *                 id: "greenLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [4, -6, -4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [0.3, 1.0, 0.3]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, {// Blue table leg
+ *                 id: "blueLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [4, -6, 4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [0.3, 0.3, 1.0]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, {  // Yellow table leg
+ *                 id: "yellowLeg",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [-4, -6, 4],
+ *                 scale: [1, 3, 1],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [1.0, 1.0, 0.0]
+ *                 })
+ *             }),
+ *
+ *             new Mesh(viewer.scene, { // Purple table top
+ *                 id: "tableTop",
+ *                 isObject: true, // <---------- Node represents an object
+ *                 position: [0, -3, 0],
+ *                 scale: [6, 0.5, 6],
+ *                 rotation: [0, 0, 0],
+ *                 geometry: boxGeometry,
+ *                 material: new PhongMaterial(viewer.scene, {
+ *                     diffuse: [1.0, 0.3, 1.0]
+ *                 })
+ *             })
+ *         ]
+ *     });
+ *
+ *     let aabb = viewer.scene.aabb;
+ *     console.log(aabb);
+ *
+ *     new Mesh(viewer.scene, {
+ *         geometry: new ReadableGeometry(viewer.scene, buildBoxLinesGeometryFromAABB({
+ *             id: "aabb",
+ *             aabb: aabb,
+ *         })),
+ *         material: new PhongMaterial(viewer.scene, {
+ *             emissive: [0, 1,]
+ *         })
+ *     });
+ * ````
+ *
+ * @function buildBoxLinesGeometryFromAABB
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.aabb]  AABB for which box will be created.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildBoxLinesGeometryFromAABB(cfg = {}){
+    return buildBoxLinesGeometry({
+        id: cfg.id,
+        center: [
+            (cfg.aabb[0] + cfg.aabb[3]) / 2.0,
+            (cfg.aabb[1] + cfg.aabb[4]) / 2.0,
+            (cfg.aabb[2] + cfg.aabb[5]) / 2.0,
+        ],
+        xSize: (Math.abs(cfg.aabb[3] - cfg.aabb[0])) / 2.0,
+        ySize: (Math.abs(cfg.aabb[4] - cfg.aabb[1])) / 2.0,
+        zSize: (Math.abs(cfg.aabb[5] - cfg.aabb[2])) / 2.0,
+    });
+}
+
+export {buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB};