Merge pull request #1374 from paireks/develop/Polyline

[FEATURE] Adding ability to draw 3d polylines
xeokit · Feb 20, 2024 · 297a9ab · 297a9ab
2 parents 252af8f + d3c4f07
commit 297a9ab
Show file tree

Hide file tree

Showing 2 changed files with 179 additions and 0 deletions.
diff --git a/examples/scenegraph/buildPolylineGeometry.html b/examples/scenegraph/buildPolylineGeometry.html
@@ -0,0 +1,99 @@
+<!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>buildPolylineGeometry()</h1>
+    <h2>Builds polyline geometry</h2>
+    <p>In this example, we're creating a simple 3D scene that contains a polyline geometry, which we're
+        generating using the buildPolylineGeometry function.</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-buildPolylineGeometry"
+               target="_other">buildBoxLinesGeometry()</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 {buildPolylineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer and arrange the camera
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    viewer.camera.eye = [0, 0, 8];
+    viewer.camera.look = [0, 0, 0];
+    viewer.camera.up = [0, 1, 0];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a mesh with polyline shape
+    //------------------------------------------------------------------------------------------------------------------
+
+    new Mesh(viewer.scene, {
+        geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometry({
+            points: [
+                0, 2.83654, 0,
+                -0.665144, 1.152063, 0,
+                -2.456516, 1.41827, 0,
+                -1.330288, 0, 0,
+                -2.456516, -1.41827, 0,
+                -0.665144, -1.152063, 0,
+                0, -2.83654, 0,
+                0.665144, -1.152063, 0,
+                2.456516, -1.41827, 0,
+                1.330288, 0, 0,
+                2.456516, 1.41827, 0,
+                0.665144, 1.152063, 0,
+                0, 2.83654, 0,
+            ]
+        })),
+        material: new PhongMaterial(viewer.scene, {
+            emissive: [0, 1,]
+        })
+    });
+
+</script>
+</html>
diff --git a/src/viewer/scene/geometry/builders/buildPolylineGeometry.js b/src/viewer/scene/geometry/builders/buildPolylineGeometry.js
@@ -0,0 +1,80 @@
+import {utils} from '../../utils.js';
+
+/**
+ * @desc Creates a 3D polyline {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a polyline {@link ReadableGeometry} that has lines primitives.
+ *
+ * [[Run this example](/examples/#geometry_builders_buildPolylineGeometry)]
+ *
+ * ````javascript
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Import the modules we need for this example
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * import {buildPolylineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a Viewer and arrange the camera
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [0, 0, 8];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with polyline shape
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometry({
+ *         points: [
+ *             0, 2.83654, 0,
+ *             -0.665144, 1.152063, 0,
+ *             -2.456516, 1.41827, 0,
+ *             -1.330288, 0, 0,
+ *             -2.456516, -1.41827, 0,
+ *             -0.665144, -1.152063, 0,
+ *             0, -2.83654, 0,
+ *             0.665144, -1.152063, 0,
+ *             2.456516, -1.41827, 0,
+ *             1.330288, 0, 0,
+ *             2.456516, 1.41827, 0,
+ *             0.665144, 1.152063, 0,
+ *             0, 2.83654, 0,
+ *         ]
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 1,]
+ *     })
+ * });
+ */
+function buildPolylineGeometry(cfg = {}) {
+
+    if (cfg.points.length % 3 !== 0) {
+        throw "Size of points array for given polyline should be divisible by 3";
+    }
+    let numberOfPoints = cfg.points.length / 3;
+    if (numberOfPoints < 2) {
+        throw "There should be at least 2 points to create a polyline";
+    }
+    let indices = [];
+    for (let i = 0; i < numberOfPoints - 1; i++) {
+        indices.push(i);
+        indices.push(i + 1);
+    }
+
+    return utils.apply(cfg, {
+        primitive: "lines",
+        positions: cfg.points,
+        indices: indices,
+    });
+}
+
+export {buildPolylineGeometry};