three-base 2.0.137 → 2.0.145

package/PipeMesh/PathTubeGeometry.ts

@@ -0,0 +1,146 @@
+import { StaticDrawUsage, Usage } from 'three/src/constants.js';
+import { PathGeometry, type Options, type PathGeometryParam } from './PathGeometry.js';
+import { PathPoint } from './PathPoint.js';
+import type { PathPointList } from './PathPointList.js';
+import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
+import { Vector3 } from 'three/src/math/Vector3.js';
+
+interface TubeVertexData {
+    position: Array<number>;
+    normal: Array<number>;
+    uv: Array<number>;
+    uv2: Array<number>;
+    indices: Array<number>;
+    count: number;
+}
+
+/**
+ * PathTubeGeometry
+ */
+class PathTubeGeometry extends PathGeometry {
+    /**
+     * @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
+     * @param {Boolean} [generateUv2=false]
+     */
+    constructor(initData: PathGeometryParam, generateUv2: boolean = false) {
+        super(initData, generateUv2);
+    }
+
+    _initByData(pathPointList: PathPointList, options: Options = {}, usage: Usage, generateUv2: boolean): void {
+        const vertexData = generateTubeVertexData(pathPointList, options, generateUv2);
+        if (vertexData && vertexData.count !== 0) {
+            this.setAttribute('position', new BufferAttribute(new Float32Array(vertexData.position), 3).setUsage(usage || StaticDrawUsage));
+            this.setAttribute('normal', new BufferAttribute(new Float32Array(vertexData.normal), 3).setUsage(usage || StaticDrawUsage));
+            this.setAttribute('uv', new BufferAttribute(new Float32Array(vertexData.uv), 2).setUsage(usage || StaticDrawUsage));
+            if (generateUv2) {
+                this.setAttribute('uv2', new BufferAttribute(new Float32Array(vertexData.uv2), 2).setUsage(usage || StaticDrawUsage));
+            }
+            this.setIndex(vertexData.indices);
+        }
+        else {
+            this._initByMaxVertex(2, generateUv2);
+        }
+    }
+
+    /**
+     * Update geometry by PathPointList instance
+     * @param {PathPointList} pathPointList
+     * @param {Object} options
+     * @param {Number} [options.radius=0.1]
+     * @param {Number} [options.progress=1]
+     * @param {Boolean} [options.radialSegments=8]
+     * @param {String} [options.startRad=0]
+     */
+    update(pathPointList: PathPointList, options: Options): void {
+        const generateUv2 = !!this.getAttribute('uv2');
+        const vertexData = generateTubeVertexData(pathPointList, options, generateUv2);
+        if (vertexData) {
+            this._updateAttributes(vertexData.position, vertexData.normal, vertexData.uv, generateUv2 ? vertexData.uv2 : null, vertexData.indices);
+            this.drawRange.count = vertexData.count;
+        }
+        else {
+            this.drawRange.count = 0;
+        }
+    }
+}
+
+export { PathTubeGeometry };
+
+// Vertex Data Generate Functions
+function generateTubeVertexData(pathPointList: PathPointList, options: Options, generateUv2: boolean = false): TubeVertexData | null {
+    const radius = options.radius || 0.1;
+    const progress = options.progress !== undefined ? options.progress : 1;
+    const radialSegments = Math.max(2, options.radialSegments || 8);
+    const startRad = options.startRad || 0;
+    const circum = radius * 2 * Math.PI;
+    const totalDistance = pathPointList.distance();
+    const progressDistance = progress * totalDistance;
+    if (progressDistance == 0) {
+        return null;
+    }
+    let count = 0;
+    // modify data
+    const position: Array<number> = [];
+    const normal: Array<number> = [];
+    const uv: Array<number> = [];
+    const uv2: Array<number> = [];
+    const indices: Array<number> = [];
+    let verticesCount = 0;
+    const normalDir = new Vector3();
+
+    function addVertices(pathPoint: PathPoint, radius: number, radialSegments: number): void {
+        const first = position.length === 0;
+        const uvDist = pathPoint.dist / circum;
+        const uvDist2 = pathPoint.dist / totalDistance;
+        for (let r = 0; r <= radialSegments; r++) {
+            let _r = r;
+            if (_r == radialSegments) {
+                _r = 0;
+            }
+            normalDir
+                .copy(pathPoint.up)
+                .applyAxisAngle(pathPoint.dir, startRad + (Math.PI * 2 * _r) / radialSegments)
+                .normalize();
+            position.push(pathPoint.pos.x + normalDir.x * radius * pathPoint.widthScale, pathPoint.pos.y + normalDir.y * radius * pathPoint.widthScale, pathPoint.pos.z + normalDir.z * radius * pathPoint.widthScale);
+            normal.push(normalDir.x, normalDir.y, normalDir.z);
+            uv.push(uvDist, r / radialSegments);
+            if (generateUv2) {
+                uv2.push(uvDist2, r / radialSegments);
+            }
+            verticesCount++;
+        }
+        if (!first) {
+            const begin1 = verticesCount - (radialSegments + 1) * 2;
+            const begin2 = verticesCount - (radialSegments + 1);
+            for (let i = 0; i < radialSegments; i++) {
+                indices.push(begin2 + i, begin1 + i, begin1 + i + 1, begin2 + i, begin1 + i + 1, begin2 + i + 1);
+                count += 6;
+            }
+        }
+    }
+    if (progressDistance > 0) {
+        for (let i = 0; i < pathPointList.count; i++) {
+            const pathPoint = pathPointList.array[i];
+            if (pathPoint.dist > progressDistance) {
+                const prevPoint = pathPointList.array[i - 1];
+                const lastPoint = new PathPoint();
+                // linear lerp for progress
+                const alpha = (progressDistance - prevPoint.dist) / (pathPoint.dist - prevPoint.dist);
+                lastPoint.lerpPathPoints(prevPoint, pathPoint, alpha);
+                addVertices(lastPoint, radius, radialSegments);
+                break;
+            }
+            else {
+                addVertices(pathPoint, radius, radialSegments);
+            }
+        }
+    }
+    return {
+        position,
+        normal,
+        uv,
+        uv2,
+        indices,
+        count,
+    };
+}

package/PipeMesh/PipeMesh.d.ts

@@ -1,4 +1,4 @@
-import { Material, Mesh, Vector3 } from "three";
+import { Mesh, Vector3, Material } from "three";
 import { PathPointList } from "./PathPointList";
 import { PathTubeGeometry } from "./PathTubeGeometry";
 export type PipeMeshProps = {

package/PipeMesh/PipeMesh.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2024-11-23 13:06:54
  */
-import { DoubleSide, DynamicDrawUsage, Mesh, MeshLambertMaterial, } from "three";
+import { DoubleSide, DynamicDrawUsage, Mesh, MeshLambertMaterial } from "three";
 import { PathPointList } from "./PathPointList";
 import { PathTubeGeometry } from "./PathTubeGeometry";
 /**

package/PipeMesh/PipeMesh.ts

@@ -0,0 +1,76 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-02-16 23:13:14
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-11-23 13:06:54
+ */
+import { DoubleSide, DynamicDrawUsage, Mesh, MeshLambertMaterial, Vector3, Material } from "three";
+import { PathPointList } from "./PathPointList";
+import { PathTubeGeometry } from "./PathTubeGeometry";
+
+export type PipeMeshProps = {
+    vector3s: Array<Vector3>;
+    radius?: number;
+    segments?: number;
+};
+
+/**
+ * 创建基础的管道模型
+ */
+export default class PipeMesh extends Mesh<PathTubeGeometry, Material> {
+    constructor(props: PipeMeshProps) {
+        super();
+        this.set(props);
+    }
+
+    type: string = "pipemesh";
+    vector3s: Array<Vector3> = []; // 管道上的点
+    radius: number = 1; //管道的半径
+    segments: number = 10; //管道的段数
+    pathPointList: PathPointList = new PathPointList();
+    material: Material = new MeshLambertMaterial({
+        side: DoubleSide,
+        color: "#fff",
+    });
+
+    // 设置数据
+    set(props: PipeMeshProps): void {
+        this.vector3s = props.vector3s;
+        this.radius = props.radius || 1;
+        this.segments = props.segments || 10;
+        this.pathPointList.set(this.vector3s, props.radius * 2, 10);
+        this.geometry = new PathTubeGeometry({
+            pathPointList: this.pathPointList,
+            options: {
+                arrow: true,
+                progress: 1,
+                radius: props.radius,
+                radialSegments: this.segments,
+            },
+            usage: DynamicDrawUsage,
+            transparent: true,
+        });
+    }
+
+    // 设置指定点的坐标
+    setVector(i: number, vector: Vector3): void {
+        this.vector3s[i].copy(vector);
+        this.pathPointList.set(this.vector3s, this.radius * 2, this.segments);
+        this.geometry.update(this.pathPointList, { radius: this.radius });
+    }
+
+    // 获取指定点的坐标
+    getVector(i: number): Vector3 {
+        return this.vector3s[i];
+    }
+
+    // 设置最后一个点的坐标
+    setLatestVector(vector: Vector3): void {
+        this.setVector(this.vector3s.length - 1, vector);
+    }
+
+    // 回去最后一个点的坐标
+    getLatestVector(): Vector3 {
+        return this.getVector(this.vector3s.length - 1);
+    }
+}

package/PipeMesh/index.ts

@@ -0,0 +1 @@
+export { default } from "./PipeMesh";

package/PlaneModal1/PlaneModal1.d.ts

@@ -1,4 +1,4 @@
-import { Mesh, MeshBasicMaterial, PlaneGeometry } from "three";
+import { Mesh, MeshBasicMaterial, PlaneGeometry, Texture } from "three";
 export type PlaneModal1Config = {
     size?: number;
     title?: string;
@@ -9,23 +9,26 @@ export type PlaneModal1Config = {
         size?: number;
     }>;
 };
+type TextItem = {
+    text: string;
+    color: string;
+    size: number;
+};
+type ConfigType = {
+    size: number;
+    title: string;
+    titleColor: string;
+    texts: TextItem[];
+};
 export default class PlaneModal1 extends Mesh {
     constructor(config?: PlaneModal1Config);
     geometry: PlaneGeometry;
     material: MeshBasicMaterial;
     static img: HTMLImageElement;
     canvas: HTMLCanvasElement;
-    context: CanvasRenderingContext2D;
-    texture: import("three").Texture;
-    _config: {
-        size: number;
-        title: string;
-        titleColor: string;
-        texts: Array<{
-            text: string;
-            color: string;
-            size: number;
-        }>;
-    };
+    context: CanvasRenderingContext2D | null;
+    texture: Texture;
+    _config: ConfigType;
     updata(config: PlaneModal1Config): Promise<void>;
 }
+export {};

package/PlaneModal1/PlaneModal1.js

@@ -57,6 +57,8 @@ export default class PlaneModal1 extends Mesh {
     async updata(config) {
         Object.assign(this._config, config);
         //绘制背景
+        if (!this.context)
+            return;
         this.context.clearRect(0, 0, 660, 481);
         while (!PlaneModal1.img.complete) {
             await new Promise(resolve => setTimeout(resolve, 100));
@@ -77,6 +79,8 @@ export default class PlaneModal1 extends Mesh {
         let maxWidth = 530;
         // 绘制内容
         this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
+            if (!this.context)
+                return;
             this.context.fillStyle = color;
             this.context.font = `${size}px serif`; // 设置字体大小
             this.context.textAlign = "left";

package/PlaneModal1/PlaneModal1.ts

@@ -0,0 +1,138 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-09 18:51:11
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-09 19:15:35
+ */
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2, Texture } from "three";
+import threeLoader from "../threeLoader";
+import planeModalPNG from "./planeModal.png";
+
+export type PlaneModal1Config = {
+    size?: number;
+    title?: string;
+    titleColor?: string;
+    texts?: Array<{
+        text?: string;
+        color?: string;
+        size?: number;
+    }>;
+};
+
+type TextItem = {
+    text: string;
+    color: string;
+    size: number;
+};
+
+type ConfigType = {
+    size: number;
+    title: string;
+    titleColor: string;
+    texts: TextItem[];
+};
+
+// 平面模型弹窗
+export default class PlaneModal1 extends Mesh {
+    constructor(config: PlaneModal1Config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        // this.scale.set(10, 10, 10);
+    }
+
+    geometry: PlaneGeometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
+    material: MeshBasicMaterial = new MeshBasicMaterial({
+        side: DoubleSide,
+        transparent: true,
+        alphaTest: 0.01
+    });
+
+    // 背景图
+    static img: HTMLImageElement = (() => {
+        const img = new Image();
+        img.src = planeModalPNG;
+        return img;
+    })();
+
+    canvas: HTMLCanvasElement = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 660;
+        canvas.height = 481;
+        return canvas;
+    })();
+
+    context: CanvasRenderingContext2D | null = this.canvas.getContext("2d");
+    texture: Texture = threeLoader.getTexture(this.canvas);
+
+    // 配置
+    _config: ConfigType = {
+        size: 10,
+        title: "PlaneModal1",
+        titleColor: "#ffffff",
+        texts: []
+        // [
+        //     {
+        //         text: "1",
+        //         color: "#ffff00",
+        //         size: 40
+        //     },
+        //     {
+        //         text: "2",
+        //         color: "#ff00ff",
+        //         size: 40
+        //     },
+        // ]
+    };
+
+    async updata(config: PlaneModal1Config): Promise<void> {
+        Object.assign(this._config, config);
+        //绘制背景
+        if (!this.context) return;
+        this.context.clearRect(0, 0, 660, 481);
+        while (!PlaneModal1.img.complete) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        // 设置大小
+        this.scale.set(this._config.size, this._config.size, this._config.size);
+        // this.context.fillStyle = "#00000088";
+        // this.context.fillRect(0, 0, 660, 481);
+        //绘制背景
+        this.context.drawImage(PlaneModal1.img, 0, 0);
+        // 绘制标题
+        this.context.fillStyle = this._config.titleColor;
+        this.context.font = '40px serif'; // 设置字体大小
+        this.context.textAlign = "left";
+        this.context.textBaseline = "top";
+        this.context.fillText(this._config.title, 60, 72);
+        let textPos = new Vector2(60, 150);
+        let maxWidth = 530;
+        // 绘制内容
+        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
+            if (!this.context) return;
+            this.context.fillStyle = color;
+            this.context.font = `${size}px serif`; // 设置字体大小
+            this.context.textAlign = "left";
+            this.context.textBaseline = "top";
+            // 字符分隔为数组
+            var arrText = text.split('');
+            var line = '';
+            for (var n = 0; n < arrText.length; n++) {
+                var metrics = this.context.measureText(line + arrText[n]);
+                var testWidth = metrics.width;
+                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
+                    this.context.fillText(line, textPos.x, textPos.y);
+                    line = "";
+                    textPos.y += size;
+                }
+                else {
+                    line += arrText[n];
+                }
+            }
+            this.context.fillText(line, textPos.x, textPos.y);
+            textPos.y += size;
+        });
+        this.texture.needsUpdate = true;
+        this.dispatchEvent({ type: "loaded" } as never);
+    }
+}

package/PlaneModal1/index.ts

@@ -0,0 +1 @@
+export { default } from "./PlaneModal1";

package/PlaneText.d.ts

@@ -1,4 +1,4 @@
-import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
+import { Mesh, MeshBasicMaterial, PlaneGeometry } from "three";
 import SpriteText from "./SpriteText";
 type Props = {
     text?: string;
@@ -22,18 +22,6 @@ export default class PlaneText extends Mesh {
     spriteText: SpriteText;
     material: MeshBasicMaterial;
     set(parame: Props): void;
-    get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | ((callback: (object: import("three").Object3D) => any) => void) | import("three").Material | Record<string, any> | import("three").Euler | import("three").Matrix4 | import("three").Object3D<import("three").Object3DEventMap>[] | import("three").Quaternion | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry, depthMaterial: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry, depthMaterial: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry, material: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry, material: import("three").Material, group: import("three").Group) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
-        (vector: Vector3): void;
-        (x: number, y: number, z: number): void;
-    } | ((id: number) => import("three").Object3D | undefined) | ((name: string) => import("three").Object3D | undefined) | ((name: string, value: any) => import("three").Object3D | undefined) | ((name: string, value: any, optionalTarget?: import("three").Object3D[]) => import("three").Object3D[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection[]) => void) | ((callback: (object: import("three").Object3D) => any) => void) | ((callback: (object: import("three").Object3D) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: import("three").JSONMeta) => import("three").Object3DJSON) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D[]) => SpriteText) | ((...object: import("three").Object3D[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((object: import("three").Object3D, recursive?: boolean) => SpriteText) | {
-        <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): void;
-        <T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): void;
-    } | {
-        <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): boolean;
-        <T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): boolean;
-    } | {
-        <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): void;
-        <T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): void;
-    } | (() => void);
+    get<K extends keyof SpriteText>(prop: K): SpriteText[K];
 }
 export {};

package/PlaneText.js

@@ -17,8 +17,13 @@ export default class PlaneText extends Mesh {
     material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
     set(parame) {
         for (let key in parame) {
-            //@ts-ignore
-            this.spriteText[key] = parame[key];
+            const value = parame[key];
+            if (value !== undefined) {
+                // Only set properties that exist on SpriteText and are writable
+                if (key in this.spriteText) {
+                    this.spriteText[key] = value;
+                }
+            }
         }
         this.scale.copy(this.spriteText.scale);
         this.scale.max(new Vector3(1, 1, 1));

package/PlaneText.ts

@@ -0,0 +1,55 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-05-23 13:53:06
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-03 02:54:52
+ */
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
+import SpriteText from "./SpriteText";
+
+type Props = {
+    text?: string;
+    textHeight?: number;
+    color?: string;
+    backgroundColor?: string;
+    fontFace?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    padding?: number | [number, number];
+    borderWidth?: number;
+    borderRadius?: number;
+    borderColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+};
+
+export default class PlaneText extends Mesh {
+    constructor(text: string = "planeText") {
+        super(PlaneText.geometry);
+        this.set({ text });
+    }
+
+    type: string = "PlaneText";
+    static geometry: PlaneGeometry = new PlaneGeometry(1, 1, 1, 1);
+    spriteText: SpriteText = new SpriteText("");
+    material: MeshBasicMaterial = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
+
+    set(parame: Props): void {
+        for (let key in parame) {
+            const value = parame[key];
+            if (value !== undefined) {
+                // Only set properties that exist on SpriteText and are writable
+                if (key in this.spriteText) {
+                    ((this.spriteText as unknown) as { [key: string]: unknown })[key] = value;
+                }
+            }
+        }
+        this.scale.copy(this.spriteText.scale);
+        this.scale.max(new Vector3(1, 1, 1));
+        this.material.map = this.spriteText.material.map;
+    }
+
+    get<K extends keyof SpriteText>(prop: K): SpriteText[K] {
+        return this.spriteText[prop];
+    }
+}

package/PlaneWithHtml.d.ts

@@ -1,11 +1,13 @@
 import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
+type HexColorString = `#${string}`;
 export default class PlaneWithHtml extends Mesh {
-    constructor(html?: string, backgroundColor?: `#${string}`);
+    constructor(html?: string, backgroundColor?: HexColorString);
     visible: boolean;
     size: Vector2;
     geometry: PlaneGeometry;
     material: MeshBasicMaterial;
     div: HTMLDivElement;
     setGeoSize(width: number, height: number): void;
-    setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
+    setHtml(html?: string, backgroundColor?: HexColorString): Promise<void>;
 }
+export {};

package/PlaneWithHtml.js

@@ -6,7 +6,8 @@
  */
 import { snapdom } from "@zumer/snapdom";
 import { Texture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
-import { degToRad } from "three/src/math/MathUtils";
+import { MathUtils } from "three";
+const { degToRad } = MathUtils;
 import threeLoader from "./threeLoader";
 // html 文本面板
 export default class PlaneWithHtml extends Mesh {

package/PlaneWithHtml.ts

@@ -0,0 +1,70 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-04-15 11:26:32
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-15 12:38:09
+ */
+import { snapdom } from "@zumer/snapdom";
+import { Texture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
+import { MathUtils } from "three";
+const { degToRad } = MathUtils;
+import threeLoader from "./threeLoader";
+
+type HexColorString = `#${string}`;
+
+// html 文本面板
+export default class PlaneWithHtml extends Mesh {
+    constructor(html: string = "", backgroundColor: HexColorString = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+
+    visible: boolean = false;
+    size: Vector2 = new Vector2(10, 10);
+    geometry: PlaneGeometry = (() => {
+        const geometry = new PlaneGeometry(10, 10, 1, 1);
+        geometry.rotateX(degToRad(-90));
+        return geometry;
+    })();
+    material: MeshBasicMaterial = new MeshBasicMaterial({
+        side: DoubleSide,
+        transparent: true,
+        alphaTest: 0.1
+    });
+    div: HTMLDivElement = (() => {
+        const div = document.createElement("div");
+        div.style.position = "fixed";
+        div.style.top = "100%";
+        div.style.left = "100%";
+        div.style.pointerEvents = "none";
+        div.style.userSelect = "none";
+        div.style.lineHeight = "1";
+        div.style.whiteSpace = "nowrap";
+        return div;
+    })();
+
+    // 设置网格尺寸
+    setGeoSize(width: number, height: number): void {
+        this.size.set(width, height);
+        this.geometry.dispose();
+        const geometry = new PlaneGeometry(width, height, 1, 1);
+        geometry.rotateX(degToRad(-90));
+        this.geometry = geometry;
+    }
+
+    async setHtml(html: string = "", backgroundColor: HexColorString = "#00000000"): Promise<void> {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+        const img = await snapdom.toPng(this.div, { backgroundColor });
+        this.setGeoSize(img.naturalWidth, img.naturalHeight);
+        const texture = new Texture(img);
+        texture.needsUpdate = true;
+        this.material.map = texture;
+        this.material.map.anisotropy = threeLoader.anisotropy;
+        this.material.needsUpdate = true;
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        this.visible = true;
+        this.div.remove();
+        this.dispatchEvent({ type: "loaded" } as never);
+    }
+}

package/PointLight/PointLight.d.ts

@@ -1,4 +1,4 @@
-import { Sprite, PointLight as THREEPointLight, Mesh, SphereGeometry, MeshBasicMaterial } from "three";
+import { Sprite, PointLight as THREEPointLight, Object3DEventMap } from "three";
 import SpriteText from "../SpriteText";
 /**
  * 点光源
@@ -8,7 +8,6 @@ import SpriteText from "../SpriteText";
  */
 export default class PointLight extends THREEPointLight {
     constructor(color?: string, intensity?: number, distance?: number, decay?: number);
-    pointLinghtHelper: Sprite<import("three").Object3DEventMap>;
-    wireframeSphere: Mesh<SphereGeometry, MeshBasicMaterial, import("three").Object3DEventMap>;
-    label: SpriteText;
+    pointLinghtHelper: Sprite<Object3DEventMap> | false;
+    label: SpriteText | false;
 }