From d3c4f077acb8306d74f63a68ee055b4bc7ad453a Mon Sep 17 00:00:00 2001 From: paireks Date: Sun, 18 Feb 2024 21:39:23 +0100 Subject: [PATCH] Add ability to draw polylines --- .../scenegraph/buildPolylineGeometry.html | 99 +++++++++++++++++++ .../builders/buildPolylineGeometry.js | 80 +++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 examples/scenegraph/buildPolylineGeometry.html create mode 100644 src/viewer/scene/geometry/builders/buildPolylineGeometry.js diff --git a/examples/scenegraph/buildPolylineGeometry.html b/examples/scenegraph/buildPolylineGeometry.html new file mode 100644 index 0000000000..ba4019bfe4 --- /dev/null +++ b/examples/scenegraph/buildPolylineGeometry.html @@ -0,0 +1,99 @@ + + + + + + + xeokit Example + + + + + + + +
+ +

buildPolylineGeometry()

+

Builds polyline geometry

+

In this example, we're creating a simple 3D scene that contains a polyline geometry, which we're + generating using the buildPolylineGeometry function.

+

Components Used

+ +
+ + + + \ No newline at end of file diff --git a/src/viewer/scene/geometry/builders/buildPolylineGeometry.js b/src/viewer/scene/geometry/builders/buildPolylineGeometry.js new file mode 100644 index 0000000000..48c78b82be --- /dev/null +++ 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}; \ No newline at end of file