test LineSegmentsGeometry w mesh edges .. todo add helper for KM

bin/webpack-three-bundle.js

@@ -6,5 +6,11 @@ import { Line2 } from '../node_modules/three/examples/jsm/lines/Line2.js';
 import { LineMaterial } from '../node_modules/three/examples/jsm/lines/LineMaterial.js';
 import { LineGeometry } from '../node_modules/three/examples/jsm/lines/LineGeometry.js';
 import { LineSegments2 } from '../node_modules/three/examples/jsm/lines/LineSegments2.js';
+import { LineSegmentsGeometry } from '../node_modules/three/examples/jsm/lines/LineSegmentsGeometry.js';
 
-export { THREE, SVGLoader, BufferGeometryUtils, Line2, LineMaterial, LineGeometry, LineSegments2 };
+export {
+    THREE, SVGLoader, BufferGeometryUtils,
+    LineMaterial,
+    Line2, LineGeometry,
+    LineSegments2, LineSegmentsGeometry
+};

src/add/three.js

@@ -5,15 +5,19 @@
 // dep: ext.three
 gapp.register("add.three", [], (root, exports) => {
 
-const { THREE, SVGLoader, BufferGeometryUtils, Line2, LineMaterial, LineGeometry, LineSegments2 } = ThreeBundle;
+const {
+    THREE, SVGLoader, BufferGeometryUtils,
+    LineMaterial, Line2, LineGeometry, LineSegments2, LineSegmentsGeometry
+} = ThreeBundle;
 
 root.THREE = THREE;
 THREE.BufferGeometryUtils = BufferGeometryUtils;
 THREE.SVGLoader = SVGLoader.SVGLoader;
 THREE.LineMaterial = LineMaterial;
+THREE.Line2 = Line2;
 THREE.LineGeometry = LineGeometry;
 THREE.LineSegments2 = LineSegments2;
-THREE.Line2 = Line2;
+THREE.LineSegmentsGeometry = LineSegmentsGeometry;
 
 let MP = THREE.Mesh.prototype,
     XP = THREE.Box3.prototype,

src/mesh/edges.js

@@ -7,10 +7,12 @@
 
 "use strict";
 
+
 // dep: moto.space
 gapp.register("mesh.edges", [], (root, exports) => {
 
 const { Line2, LineMaterial, LineGeometry, Vector3, Group } = THREE;
+const { LineSegments2, LineSegmentsGeometry } = THREE;
 const { base, mesh, moto } = root;
 const { space } = moto;
 const { newPoint } = base;
@@ -19,6 +21,17 @@ let isActive;
 let hovered;
 let selected = [];
 
+function line2(verts) {
+    let geo = new LineSegmentsGeometry();
+    let segs = new LineSegments2(geo, new LineMaterial({
+        linewidth: 4,
+        color: 0x0088ff,
+        alphaToCoverage: false,
+    }));
+    geo.setPositions(verts);
+    return segs;
+}
+
 // hovered edge object
 let geo, mat, obj = new Line2(
     geo = new LineGeometry(),
@@ -27,7 +40,6 @@ let geo, mat, obj = new Line2(
         color: 0x88ff00,
         alphaToCoverage: false,
     })
-
 );
 
 // true if values differ by less than 10e-3
@@ -188,17 +200,8 @@ let edges = {
 
         const group = edges.selected = new Group();
         space.scene.add(edges.selected);
-
-        for (let sel of selected) {
-            let geo = new LineGeometry();
-            let line = new Line2( geo, new LineMaterial({
-                linewidth: 4,
-                color: 0x0088ff,
-                alphaToCoverage: false,
-            }) );
-            geo.setPositions(sel.side.verts);
-            group.add(line);
-        }
+        let verts = selected.map(s => s.side.verts).flat();
+        group.add(line2(verts));
     },
 
     closest_edge(point, face, object) {