chili3d 0.6.1

package/packages/chili-three/src/threeHelper.ts

@@ -0,0 +1,174 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type Material,
+    MathUtils,
+    Matrix4,
+    PhongMaterial,
+    PhysicalMaterial,
+    type Texture,
+    XYZ,
+} from "chili-core";
+import {
+    Box3,
+    type Camera,
+    DoubleSide,
+    type Object3D,
+    type OrthographicCamera,
+    type PerspectiveCamera,
+    RepeatWrapping,
+    TextureLoader,
+    Color as ThreeColor,
+    MeshLambertMaterial as ThreeLambertMaterial,
+    Matrix4 as ThreeMatrix4,
+    MeshPhongMaterial as ThreePhoneMaterial,
+    MeshPhysicalMaterial as ThreePhysicalMaterial,
+    Vector3,
+    type Vector3Like,
+} from "three";
+
+export class ThreeHelper {
+    static toMatrix(matrix: ThreeMatrix4) {
+        return Matrix4.fromArray(matrix.toArray());
+    }
+
+    static fromMatrix(matrix: Matrix4) {
+        return new ThreeMatrix4().fromArray(matrix.toArray());
+    }
+
+    static toXYZ(vector: Vector3): XYZ {
+        return new XYZ(vector.x, vector.y, vector.z);
+    }
+
+    static fromXYZ(vector: Vector3Like): Vector3 {
+        return new Vector3(vector.x, vector.y, vector.z);
+    }
+
+    static isPerspectiveCamera(camera: Camera): camera is PerspectiveCamera {
+        return (camera as PerspectiveCamera).isPerspectiveCamera;
+    }
+
+    static isOrthographicCamera(camera: Camera): camera is OrthographicCamera {
+        return (camera as OrthographicCamera).isOrthographicCamera;
+    }
+
+    static fromColor(color: number | string): ThreeColor {
+        return new ThreeColor(color);
+    }
+
+    static toColor(color: ThreeColor): number {
+        return color.getHex();
+    }
+
+    static findGroupIndex(groups: { start: number; count: number }[], subIndex: number) {
+        for (let i = 0; i < groups.length; i++) {
+            if (subIndex >= groups[i].start && subIndex < groups[i].start + groups[i].count) {
+                return i;
+            }
+        }
+        return undefined;
+    }
+
+    static transformVector(matrix: ThreeMatrix4, vector: Vector3) {
+        const array = matrix.elements;
+        const x = vector.x * array[0] + vector.y * array[4] + vector.z * array[8];
+        const y = vector.x * array[1] + vector.y * array[5] + vector.z * array[9];
+        const z = vector.x * array[2] + vector.y * array[6] + vector.z * array[10];
+        return new Vector3(x, y, z);
+    }
+
+    static getBoundingBox(object: Object3D) {
+        const box = new Box3();
+        box.setFromObject(object);
+        if (box.isEmpty()) {
+            return undefined;
+        }
+        return { min: ThreeHelper.toXYZ(box.min), max: ThreeHelper.toXYZ(box.max) };
+    }
+
+    static boxCorners(box: Box3) {
+        const min = box.min;
+        const max = box.max;
+        return [
+            new Vector3(min.x, min.y, min.z),
+            new Vector3(max.x, min.y, min.z),
+            new Vector3(max.x, max.y, min.z),
+            new Vector3(min.x, max.y, min.z),
+            new Vector3(min.x, min.y, max.z),
+            new Vector3(max.x, min.y, max.z),
+            new Vector3(max.x, max.y, max.z),
+            new Vector3(min.x, max.y, max.z),
+        ];
+    }
+
+    static loadTexture(item: Texture | undefined) {
+        if (!item?.image) {
+            return null;
+        }
+
+        const map = new TextureLoader().load(item.image);
+        map.wrapS = RepeatWrapping;
+        map.wrapT = RepeatWrapping;
+        map.center.set(0.5, 0.5);
+        map.repeat.set(item.repeat.x, item.repeat.y);
+        map.rotation = MathUtils.degToRad(item.rotation);
+        return map;
+    }
+
+    static parsePhysicalMaterial(material: PhysicalMaterial) {
+        return new ThreePhysicalMaterial({
+            color: material.color,
+            side: DoubleSide,
+            transparent: true,
+            name: material.name,
+            opacity: material.opacity,
+            map: ThreeHelper.loadTexture(material.map),
+            roughness: material.roughness,
+            metalness: material.metalness,
+            bumpMap: ThreeHelper.loadTexture(material.bumpMap),
+            normalMap: ThreeHelper.loadTexture(material.normalMap),
+            emissiveMap: ThreeHelper.loadTexture(material.emissiveMap),
+            roughnessMap: ThreeHelper.loadTexture(material.roughnessMap),
+            metalnessMap: ThreeHelper.loadTexture(material.metalnessMap),
+        });
+    }
+
+    static parsePhongMaterial(material: PhongMaterial) {
+        return new ThreePhoneMaterial({
+            color: material.color,
+            side: DoubleSide,
+            transparent: true,
+            name: material.name,
+            opacity: material.opacity,
+            map: ThreeHelper.loadTexture(material.map),
+            specularMap: ThreeHelper.loadTexture(material.specularMap),
+            shininess: material.shininess,
+            emissive: ThreeHelper.fromColor(material.emissive),
+            emissiveMap: ThreeHelper.loadTexture(material.emissiveMap),
+        });
+    }
+
+    static parseBasicMaterial(material: Material) {
+        return new ThreeLambertMaterial({
+            color: material.color,
+            side: DoubleSide,
+            transparent: true,
+            name: material.name,
+            opacity: material.opacity,
+            map: ThreeHelper.loadTexture(material.map),
+        });
+    }
+
+    static parseToThreeMaterial(material: Material) {
+        if (material instanceof PhysicalMaterial) {
+            return ThreeHelper.parsePhysicalMaterial(material);
+        }
+
+        if (material instanceof PhongMaterial) {
+            return ThreeHelper.parsePhongMaterial(material);
+        }
+
+        return ThreeHelper.parseBasicMaterial(material);
+    }
+}

package/packages/chili-three/src/threeHighlighter.ts

@@ -0,0 +1,257 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { IDisposable, type IHighlighter, MeshUtils, ShapeMeshData, ShapeType, VisualState } from "chili-core";
+import { Group, Mesh, Points } from "three";
+import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry";
+import {
+    faceColoredMaterial,
+    faceTransparentMaterial,
+    hilightEdgeMaterial,
+    selectedEdgeMaterial,
+} from "./common";
+import { IHighlightable } from "./highlightable";
+import { ThreeGeometry } from "./threeGeometry";
+import { ThreeGeometryFactory } from "./threeGeometryFactory";
+import type { ThreeVisualContext } from "./threeVisualContext";
+import { ThreeMeshObject, type ThreeVisualObject } from "./threeVisualObject";
+
+export class GeometryState {
+    private readonly _states: Map<string, [VisualState, LineSegments2 | undefined]> = new Map();
+
+    constructor(
+        readonly highlighter: ThreeHighlighter,
+        readonly visual: ThreeVisualObject,
+    ) {}
+
+    getState(type: ShapeType, index?: number) {
+        const key = this.state_key(type, index);
+        return this._states.get(key)?.[0];
+    }
+
+    private state_key(type: ShapeType, index?: number) {
+        return `${type}_${index}`;
+    }
+
+    addState(state: VisualState, type: ShapeType, index: number[]) {
+        this.updateState("add", state, type, index);
+    }
+
+    removeState(state: VisualState, type: ShapeType, index: number[]) {
+        this.updateState("remove", state, type, index);
+    }
+
+    private updateState(method: "add" | "remove", state: VisualState, type: ShapeType, index: number[]) {
+        if (ShapeType.isWhole(type)) {
+            this.setWholeState(method, state, type);
+        } else if (index.length > 0) {
+            this.setSubGeometryState(method, state, type, index);
+        }
+    }
+
+    private setWholeState(method: "add" | "remove", state: VisualState, type: ShapeType) {
+        const key = this.state_key(type);
+        const [_oldState, newState] = this.updateStates(key, method, state);
+        if (this.visual instanceof ThreeGeometry) {
+            if (newState === VisualState.normal) {
+                this.visual.removeTemperaryMaterial();
+            } else if (VisualState.hasState(newState, VisualState.edgeHighlight)) {
+                this.visual.setEdgesMateiralTemperary(hilightEdgeMaterial);
+            } else if (VisualState.hasState(newState, VisualState.edgeSelected)) {
+                this.visual.setEdgesMateiralTemperary(selectedEdgeMaterial);
+            } else if (VisualState.hasState(newState, VisualState.faceTransparent)) {
+                this.visual.removeTemperaryMaterial();
+                this.visual.setFacesMateiralTemperary(faceTransparentMaterial);
+            } else if (VisualState.hasState(newState, VisualState.faceColored)) {
+                this.visual.removeTemperaryMaterial();
+                this.visual.setFacesMateiralTemperary(faceColoredMaterial);
+            }
+        } else if (IHighlightable.is(this.visual)) {
+            if (newState !== VisualState.normal) {
+                this.visual.highlight();
+            } else {
+                this.visual.unhighlight();
+            }
+        }
+
+        this._states.set(key, [newState, undefined]);
+    }
+
+    private updateStates(
+        key: string,
+        method: "add" | "remove",
+        state: VisualState,
+    ): [VisualState | undefined, VisualState] {
+        const oldState = this._states.get(key)?.[0];
+        let newState = oldState;
+        if (newState === undefined) {
+            if (method === "remove") return [undefined, VisualState.normal];
+            newState = state;
+        } else {
+            const func = method === "add" ? VisualState.addState : VisualState.removeState;
+            newState = func(newState, state);
+        }
+        return [oldState, newState];
+    }
+
+    resetState() {
+        this.highlighter.container.children.forEach((x) => {
+            (x as any).geometry?.dispose();
+        });
+        this.highlighter.container.clear();
+        if (this.visual instanceof ThreeGeometry) {
+            this.visual.removeTemperaryMaterial();
+        } else if (this.visual instanceof ThreeMeshObject) {
+            this.visual.unhighlight();
+        }
+        this._states.clear();
+    }
+
+    private setSubGeometryState(
+        method: "add" | "remove",
+        state: VisualState,
+        type: ShapeType,
+        index: number[],
+    ) {
+        const shouldRemoved: string[] = [];
+        index.forEach((i) => {
+            const key = this.state_key(type, i);
+            const [oldState, newState] = this.updateStates(key, method, state);
+            if (oldState !== undefined && newState === VisualState.normal) {
+                shouldRemoved.push(key);
+            } else {
+                this.addSubEdgeState(type, key, i, newState);
+            }
+        });
+
+        shouldRemoved.forEach((key) => {
+            const item = this._states.get(key)?.[1];
+            if (item) {
+                this.highlighter.container.remove(item);
+                item.geometry?.dispose();
+                this._states.delete(key);
+            }
+        });
+    }
+
+    private addSubEdgeState(type: ShapeType, key: string, i: number, newState: VisualState) {
+        const geometry = this.getOrCloneGeometry(type, key, i);
+        if (geometry && "material" in geometry) {
+            const material = VisualState.hasState(newState, VisualState.edgeHighlight)
+                ? hilightEdgeMaterial
+                : selectedEdgeMaterial;
+            geometry.material = material;
+            this._states.set(key, [newState, geometry]);
+        }
+    }
+
+    private getOrCloneGeometry(type: ShapeType, key: string, index: number) {
+        if (!(this.visual instanceof ThreeGeometry)) return undefined;
+
+        const geometry = this._states.get(key)?.[1];
+        if (geometry) return geometry;
+
+        let points: Float32Array | undefined;
+        if (ShapeType.hasFace(type) || ShapeType.hasShell(type)) {
+            points = MeshUtils.subFaceOutlines(this.visual.geometryNode.mesh.faces!, index);
+        }
+        if (points === undefined && (ShapeType.hasEdge(type) || ShapeType.hasWire(type))) {
+            points = MeshUtils.subEdge(this.visual.geometryNode.mesh.edges!, index);
+        }
+
+        if (!points) {
+            console.warn(`Invalid type ${type} for ${key}`);
+            return undefined;
+        }
+
+        const lineGeometry = new LineSegmentsGeometry();
+        lineGeometry.setPositions(points);
+        const segment = new LineSegments2(lineGeometry);
+        this.highlighter.container.add(segment);
+        segment.applyMatrix4(this.visual.matrixWorld);
+        return segment;
+    }
+}
+
+export class ThreeHighlighter implements IHighlighter {
+    private readonly _stateMap = new Map<ThreeVisualObject, GeometryState>();
+    readonly container: Group;
+
+    constructor(readonly content: ThreeVisualContext) {
+        this.container = new Group();
+        this.container.name = "highlighter";
+        this.content.scene.add(this.container);
+    }
+
+    clear(): void {
+        this._stateMap.forEach((v, k) => {
+            this.resetState(k);
+        });
+        this._stateMap.clear();
+    }
+
+    resetState(geometry: ThreeVisualObject): void {
+        if (!this._stateMap.has(geometry)) return;
+        const geometryState = this._stateMap.get(geometry);
+        geometryState!.resetState();
+        this._stateMap.delete(geometry);
+    }
+
+    getState(shape: ThreeVisualObject, type: ShapeType, index?: number): VisualState | undefined {
+        if (this._stateMap.has(shape)) {
+            return this._stateMap.get(shape)!.getState(type, index);
+        }
+        return undefined;
+    }
+
+    addState(geometry: ThreeVisualObject, state: VisualState, type: ShapeType, ...index: number[]) {
+        const geometryState = this.getOrInitState(geometry);
+        geometryState.addState(state, type, index);
+    }
+
+    removeState(geometry: ThreeVisualObject, state: VisualState, type: ShapeType, ...index: number[]) {
+        const geometryState = this.getOrInitState(geometry);
+        geometryState.removeState(state, type, index);
+    }
+
+    private getOrInitState(geometry: ThreeVisualObject) {
+        let geometryState = this._stateMap.get(geometry);
+        if (!geometryState) {
+            geometryState = new GeometryState(this, geometry);
+            this._stateMap.set(geometry, geometryState);
+        }
+        return geometryState;
+    }
+
+    highlightMesh(...datas: ShapeMeshData[]): number {
+        const group = new Group();
+        datas.forEach((data) => {
+            if (ShapeMeshData.isVertex(data)) {
+                group.add(ThreeGeometryFactory.createVertexGeometry(data));
+            } else if (ShapeMeshData.isEdge(data)) {
+                group.add(ThreeGeometryFactory.createEdgeGeometry(data));
+            } else if (ShapeMeshData.isFace(data)) {
+                group.add(ThreeGeometryFactory.createFaceGeometry(data));
+            }
+        });
+        this.container.add(group);
+        return group.id;
+    }
+
+    removeHighlightMesh(id: number) {
+        const shape = this.container.getObjectById(id);
+        if (shape === undefined) return;
+        shape.children.forEach((x) => {
+            if (x instanceof Mesh || x instanceof LineSegments2 || x instanceof Points) {
+                x.geometry.dispose();
+                x.material.dispose();
+            }
+            if (IDisposable.isDisposable(x)) {
+                x.dispose();
+            }
+        });
+        shape.children.length = 0;
+        this.container.remove(shape);
+    }
+}

package/packages/chili-three/src/threeView.module.css

@@ -0,0 +1,39 @@
+.htmlText {
+    background-color: var(--control-background-color);
+    color: var(--foreground-color);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    position: relative;
+    cursor: default;
+    opacity: 0.85;
+    font-size: 12px;
+    --delete-visibility: hidden;
+
+    span {
+        padding: 5px;
+        pointer-events: none;
+    }
+
+    &:hover {
+        --delete-visibility: visible;
+    }
+
+    .delete {
+        position: absolute;
+        visibility: var(--delete-visibility);
+        padding: 4px;
+        width: 12px;
+        height: 12px;
+        top: -2px;
+        right: -20px;
+        border-radius: 50%;
+
+        &:hover {
+            background-color: red;
+        }
+    }
+}
+
+.noEvent {
+    pointer-events: none;
+}