🦄 refactor: LineSegments is changed to LineSegments2.

packages/chili-core/src/config.ts

@@ -6,10 +6,10 @@ import { ObjectSnapType } from "./snapType";
 export const VisualConfig = {
     defaultEdgeColor: 0x111111,
     defaultFaceColor: 0xdedede,
-    highlightEdgeColor: 0x0000ee,
-    highlightFaceColor: 0x0000ee,
-    selectedEdgeColor: 0x2222ff,
-    selectedFaceColor: 0x2222ff,
+    highlightEdgeColor: 0x4444cc,
+    highlightFaceColor: 0x4444cc,
+    selectedEdgeColor: 0x0000ff,
+    selectedFaceColor: 0x0000ff,
     editVertexSize: 7,
     editVertexColor: 0x0000ff,
     hintVertexSize: 5,

packages/chili-core/src/shape/meshData.ts

@@ -55,6 +55,7 @@ export namespace VertexMeshData {
 
 export interface EdgeMeshData extends ShapeMeshData {
     lineType: LineType;
+    lineWidth?: number;
 }
 
 export namespace EdgeMeshData {

packages/chili-core/src/visual/highlighter.ts

@@ -9,6 +9,6 @@ export interface IHighlighter {
     resetState(shape: IVisualGeometry): void;
     addState(shape: IVisualGeometry, state: VisualState, type: ShapeType, ...index: number[]): void;
     removeState(shape: IVisualGeometry, state: VisualState, type: ShapeType, ...index: number[]): void;
-    highliteMesh(...datas: ShapeMeshData[]): number;
-    removeMesh(id: number): void;
+    highlightMesh(...datas: ShapeMeshData[]): number;
+    removeHighlightMesh(id: number): void;
 }

packages/chili-geo/src/mesh.ts

@@ -22,13 +22,49 @@ export class MeshUtils {
         };
     }
 
+    static subFaceOutlines(face: FaceMeshData, index: number) {
+        let mesh = this.subFace(face, index);
+        if (!mesh) return undefined;
+
+        return this.faceOutline(mesh);
+    }
+
+    static faceOutline(face: { positions: number[]; indices: number[] }) {
+        let pointsMap = new Map<string, { count: number; points: number[] }>();
+
+        const addEdge = (i: number, j: number) => {
+            let key = i < j ? `${i}_${j}` : `${j}_${i}`;
+            if (pointsMap.has(key)) {
+                pointsMap.get(key)!.count++;
+                return;
+            }
+
+            const points = [
+                ...face.positions.slice(i * 3, i * 3 + 3),
+                ...face.positions.slice(j * 3, j * 3 + 3),
+            ];
+            pointsMap.set(key, { count: 1, points });
+        };
+
+        for (let i = 0; i < face.indices.length; i += 3) {
+            addEdge(face.indices[i], face.indices[i + 1]);
+            addEdge(face.indices[i + 1], face.indices[i + 2]);
+            addEdge(face.indices[i + 2], face.indices[i]);
+        }
+
+        let points: number[] = [];
+        pointsMap.forEach((v) => {
+            if (v.count === 1) {
+                points.push(...v.points);
+            }
+        });
+        return points;
+    }
+
     static subEdge(mesh: EdgeMeshData, index: number) {
         let group = mesh?.groups[index];
         if (!group) return undefined;
 
-        let positions = mesh.positions.slice(group.start * 3, (group.start + group.count) * 3);
-        return {
-            positions,
-        };
+        return mesh.positions.slice(group.start * 3, (group.start + group.count) * 3);
     }
 }

packages/chili-three/src/common.ts

@@ -0,0 +1,37 @@
+// Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
+
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { ThreeHelper } from "./threeHelper";
+import { VisualConfig } from "chili-core";
+import { DoubleSide } from "three";
+
+export const hilightEdgeMaterial = new LineMaterial({
+    linewidth: 2,
+    color: ThreeHelper.fromColor(VisualConfig.highlightEdgeColor),
+    side: DoubleSide,
+    polygonOffset: true,
+    polygonOffsetFactor: -4,
+    polygonOffsetUnits: -4,
+});
+
+export const hilightDashedEdgeMaterial = new LineMaterial({
+    linewidth: 2,
+    color: ThreeHelper.fromColor(VisualConfig.highlightEdgeColor),
+    side: DoubleSide,
+    polygonOffset: true,
+    polygonOffsetFactor: -4,
+    polygonOffsetUnits: -4,
+    dashed: true,
+    dashScale: 100,
+    dashSize: 100,
+    gapSize: 100,
+});
+
+export const selectedEdgeMaterial = new LineMaterial({
+    linewidth: 2,
+    color: ThreeHelper.fromColor(VisualConfig.selectedEdgeColor),
+    side: DoubleSide,
+    polygonOffset: true,
+    polygonOffsetFactor: -4,
+    polygonOffsetUnits: -4,
+});

packages/chili-three/src/constants.ts

@@ -1,5 +1,5 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
 export class Constants {
-    static readonly RaycasterThreshold = 20;
+    static readonly RaycasterThreshold = 10;
 }

packages/chili-three/src/threeGeometry.ts

@@ -6,32 +6,36 @@ import {
     GeometryEntity,
     IVisualGeometry,
     Matrix4,
-    ShapeMeshData,
     VisualConfig,
 } from "chili-core";
 import {
     BufferGeometry,
+    DoubleSide,
     Float32BufferAttribute,
-    LineBasicMaterial,
-    LineSegments,
     Material,
     Mesh,
     MeshLambertMaterial,
     Object3D,
-    Color as ThreeColor,
 } from "three";
 
 import { MeshUtils } from "chili-geo";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry";
 import { ThreeHelper } from "./threeHelper";
 import { ThreeVisualContext } from "./threeVisualContext";
 
 export class ThreeGeometry extends Object3D implements IVisualGeometry {
     private _faceMaterial: Material;
-    private _edgeMaterial = new LineBasicMaterial({
-        linewidth: 2,
+    private _edgeMaterial = new LineMaterial({
+        linewidth: 1,
         color: VisualConfig.defaultEdgeColor,
+        side: DoubleSide,
+        polygonOffset: true,
+        polygonOffsetFactor: -2,
+        polygonOffsetUnits: -2,
     });
-    private _edges?: LineSegments;
+    private _edges?: LineSegments2;
     private _faces?: Mesh;
 
     getMainMaterial() {
@@ -94,8 +98,8 @@ export class ThreeGeometry extends Object3D implements IVisualGeometry {
 
     private generateShape() {
         let mesh = this.geometryEngity.shape.value?.mesh;
-        if (mesh?.faces?.positions.length) this.add(this.initFaces(mesh.faces));
-        if (mesh?.edges?.positions.length) this.add(this.initEdges(mesh.edges));
+        if (mesh?.faces?.positions.length) this.initFaces(mesh.faces);
+        if (mesh?.edges?.positions.length) this.initEdges(mesh.edges);
     }
 
     dispose() {
@@ -118,12 +122,12 @@ export class ThreeGeometry extends Object3D implements IVisualGeometry {
     }
 
     private initEdges(data: EdgeMeshData) {
-        let buff = new BufferGeometry();
-        buff.setAttribute("position", new Float32BufferAttribute(data.positions, 3));
-        this.initColor(data, buff, this._edgeMaterial);
+        let buff = new LineSegmentsGeometry();
+        buff.setPositions(data.positions);
         buff.computeBoundingBox();
-        this._edges = new LineSegments(buff, this._edgeMaterial);
-        return this._edges;
+
+        this._edges = new LineSegments2(buff, this._edgeMaterial);
+        this.add(this._edges);
     }
 
     private initFaces(data: FaceMeshData) {
@@ -132,23 +136,10 @@ export class ThreeGeometry extends Object3D implements IVisualGeometry {
         buff.setAttribute("normal", new Float32BufferAttribute(data.normals, 3));
         buff.setAttribute("uv", new Float32BufferAttribute(data.uvs, 2));
         buff.setIndex(data.indices);
-        // this.initColor(data, buff, this._faceMaterial);
         buff.computeBoundingBox();
-        this._faces = new Mesh(buff, this._faceMaterial);
-        return this._faces;
-    }
 
-    private initColor(
-        meshData: ShapeMeshData,
-        geometry: BufferGeometry,
-        material: LineBasicMaterial | MeshLambertMaterial,
-    ) {
-        if (meshData.color instanceof Array) {
-            material.vertexColors = true;
-            geometry.setAttribute("color", new Float32BufferAttribute(meshData.color, 3));
-        } else {
-            material.color = new ThreeColor(meshData.color);
-        }
+        this._faces = new Mesh(buff, this._faceMaterial);
+        this.add(this._faces);
     }
 
     setFacesMateiralTemperary(material: MeshLambertMaterial) {
@@ -157,7 +148,7 @@ export class ThreeGeometry extends Object3D implements IVisualGeometry {
         }
     }
 
-    setEdgesMateiralTemperary(material: LineBasicMaterial) {
+    setEdgesMateiralTemperary(material: LineMaterial) {
         if (this._edges) {
             this._edges.material = material;
         }
@@ -169,14 +160,14 @@ export class ThreeGeometry extends Object3D implements IVisualGeometry {
     }
 
     cloneSubEdge(index: number) {
-        let mesh = MeshUtils.subEdge(this.geometryEngity.shape.value!.mesh.edges!, index);
-        if (!mesh) return undefined;
+        let positions = MeshUtils.subEdge(this.geometryEngity.shape.value!.mesh.edges!, index);
+        if (!positions) return undefined;
 
-        let buff = new BufferGeometry();
-        buff.setAttribute("position", new Float32BufferAttribute(mesh.positions, 3));
+        let buff = new LineSegmentsGeometry();
+        buff.setPositions(positions);
         buff.applyMatrix4(this.matrixWorld);
 
-        return new LineSegments(buff, this._edgeMaterial);
+        return new LineSegments2(buff, this._edgeMaterial);
     }
 
     cloneSubFace(index: number) {
@@ -188,6 +179,7 @@ export class ThreeGeometry extends Object3D implements IVisualGeometry {
         buff.setAttribute("normal", new Float32BufferAttribute(mesh.normals, 3));
         buff.setIndex(mesh.indices);
         buff.applyMatrix4(this.matrixWorld);
+
         return new Mesh(buff, this._faceMaterial);
     }
 

packages/chili-three/src/threeGeometryFactory.ts

@@ -1,19 +1,19 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
+import { EdgeMeshData, FaceMeshData, LineType, VertexMeshData } from "chili-core";
 import {
     AlwaysDepth,
     BufferGeometry,
     DoubleSide,
     Float32BufferAttribute,
-    LineBasicMaterial,
-    LineDashedMaterial,
-    LineSegments,
     Mesh,
     MeshLambertMaterial,
     Points,
     PointsMaterial,
 } from "three";
-import { EdgeMeshData, FaceMeshData, LineType, VertexMeshData } from "chili-core";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry";
 
 export class ThreeGeometryFactory {
     static createVertexGeometry(data: VertexMeshData) {
@@ -48,13 +48,31 @@ export class ThreeGeometryFactory {
     }
 
     static createEdgeGeometry(data: EdgeMeshData) {
-        let buff = new BufferGeometry();
-        buff.setAttribute("position", new Float32BufferAttribute(data.positions, 3));
+        let buff = new LineSegmentsGeometry();
+        buff.setPositions(data.positions);
+
         let color = data.color as number;
-        let material: LineBasicMaterial =
+        let linewidth = data.lineWidth ?? 1;
+        let material =
             data.lineType === LineType.Dash
-                ? new LineDashedMaterial({ color, dashSize: 6, gapSize: 6 })
-                : new LineBasicMaterial({ color });
-        return new LineSegments(buff, material).computeLineDistances();
+                ? new LineMaterial({
+                      color,
+                      dashed: true,
+                      dashScale: 100,
+                      dashSize: 100,
+                      gapSize: 100,
+                      linewidth,
+                      polygonOffset: true,
+                      polygonOffsetFactor: -4,
+                      polygonOffsetUnits: -4,
+                  })
+                : new LineMaterial({
+                      color,
+                      linewidth,
+                      polygonOffset: true,
+                      polygonOffsetFactor: -4,
+                      polygonOffsetUnits: -4,
+                  });
+        return new LineSegments2(buff, material).computeLineDistances();
     }
 }