three-base 1.0.77 → 1.0.78

package/index.js

@@ -9,7 +9,7 @@ export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
 //实例模型组对象
 export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
 //点光源
-export { default as PointLight } from "./lib/PointLight";
+export { default as PointLight } from "./lib/PointLight/PointLight";
 //天空球
 export { default as Sky } from "./lib/Sky/Sky";
 //键盘控制器
@@ -26,6 +26,8 @@ export { default as FPScontrol } from "./lib/FPScontrol";
 export { default as PlaneText } from "./lib/PlaneText";
 // 精灵文字
 export { default as SpriteText } from "three-spritetext";
+// 精灵文字样式2
+export { default as SpriteText2 } from "./lib/SpriteText2";
 //精灵文本框
 export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
 //平面文本框

package/index.ts

@@ -19,7 +19,7 @@ export type { Keyframe } from "./lib/KeyFrameAnimation";
 export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
 
 //点光源
-export { default as PointLight } from "./lib/PointLight";
+export { default as PointLight } from "./lib/PointLight/PointLight";
 
 //天空球
 export { default as Sky } from "./lib/Sky/Sky";
@@ -45,6 +45,9 @@ export { default as PlaneText } from "./lib/PlaneText";
 // 精灵文字
 export { default as SpriteText } from "three-spritetext";
 
+// 精灵文字样式2
+export { default as SpriteText2 } from "./lib/SpriteText2";
+
 //精灵文本框
 export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
 

package/lib/PlaneText.d.ts

@@ -32,6 +32,6 @@ export default class PlaneText extends Mesh {
         materials: any;
         textures: any;
         images: any;
-    }) => any) | ((event: import("three").Event) => void) | 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<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void);
+    }) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | import("three").SpriteMaterial | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((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<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void);
 }
 export {};

package/lib/PlaneWithHtml.d.ts

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

package/lib/PlaneWithHtml.js

@@ -10,10 +10,11 @@ import { degToRad } from "three/src/math/MathUtils";
 import threeLoader from "./threeLoader";
 // html 文本面板
 export default class PlaneWithHtml extends Mesh {
-    constructor(html = "") {
+    constructor(html = "", backgroundColor = "#00000000") {
         super();
-        this.setHtml(html);
+        this.setHtml(html, backgroundColor);
     }
+    visible = false;
     size = new Vector2(10, 10);
     geometry = (() => {
         const geometry = new PlaneGeometry(10, 10, 1, 1);
@@ -30,7 +31,6 @@ export default class PlaneWithHtml extends Mesh {
         div.style.top = "100%";
         div.style.left = "100%";
         div.style.pointerEvents = "none";
-        // div.style.border = "1px dashed #ff0000";
         div.style.userSelect = "none";
         div.style.lineHeight = "1";
         div.style.whiteSpace = "nowrap";
@@ -44,19 +44,23 @@ export default class PlaneWithHtml extends Mesh {
         geometry.rotateX(degToRad(-90));
         this.geometry = geometry;
     }
-    async setHtml(html = "") {
+    async setHtml(html = "", backgroundColor = "#00000000") {
         this.div.innerHTML = html;
         document.body.appendChild(this.div);
-        html2canvas(this.div, {
-            backgroundColor: "#00000000",
-            removeContainer: true
-        }).then(async (canvas) => {
-            this.setGeoSize(canvas.width, canvas.height);
-            this.material.map = new CanvasTexture(canvas);
-            this.material.map.anisotropy = threeLoader.anisotropy;
-            this.material.needsUpdate = true;
-            await new Promise(resolve => requestAnimationFrame(resolve));
-            this.div.remove();
+        await new Promise((resolve, reject) => {
+            html2canvas(this.div, {
+                backgroundColor,
+                removeContainer: true
+            }).then(async (canvas) => {
+                this.setGeoSize(canvas.width, canvas.height);
+                this.material.map = new CanvasTexture(canvas);
+                this.material.map.anisotropy = threeLoader.anisotropy;
+                this.material.needsUpdate = true;
+                this.visible = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.div.remove();
+                resolve();
+            });
         });
     }
 }

package/lib/PlaneWithHtml.ts

@@ -14,11 +14,13 @@ import threeLoader from "./threeLoader";
 // html 文本面板
 export default class PlaneWithHtml extends Mesh {
 
-    constructor(html: string = "") {
+    constructor(html: string = "", backgroundColor: `#${string}` = "#00000000") {
         super();
-        this.setHtml(html);
+        this.setHtml(html, backgroundColor);
     }
 
+    visible = false;
+
     size = new Vector2(10, 10);
 
     geometry = (() => {
@@ -38,7 +40,6 @@ export default class PlaneWithHtml extends Mesh {
         div.style.top = "100%";
         div.style.left = "100%";
         div.style.pointerEvents = "none";
-        // div.style.border = "1px dashed #ff0000";
         div.style.userSelect = "none";
         div.style.lineHeight = "1";
         div.style.whiteSpace = "nowrap";
@@ -54,21 +55,29 @@ export default class PlaneWithHtml extends Mesh {
         this.geometry = geometry;
     }
 
-    async setHtml(html: string = "") {
+    async setHtml(html: string = "", backgroundColor: `#${string}` = "#00000000") {
         this.div.innerHTML = html;
         document.body.appendChild(this.div);
-        html2canvas(this.div, {
-            backgroundColor: "#00000000",
-            removeContainer: true
-        }).then(async (canvas) => {
-            this.setGeoSize(canvas.width, canvas.height);
-            this.material.map = new CanvasTexture(canvas);
-            this.material.map.anisotropy = threeLoader.anisotropy;
-            this.material.needsUpdate = true;
-            await new Promise(resolve => requestAnimationFrame(resolve));
-            this.div.remove();
+
+        await new Promise<void>((resolve, reject) => {
+
+            html2canvas(this.div, {
+                backgroundColor,
+                removeContainer: true
+            }).then(async (canvas) => {
+                this.setGeoSize(canvas.width, canvas.height);
+                this.material.map = new CanvasTexture(canvas);
+                this.material.map.anisotropy = threeLoader.anisotropy;
+                this.material.needsUpdate = true;
+                this.visible = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.div.remove();
+                resolve();
+            });
+
         });
 
+
     }
 
 

package/lib/{PointLight.d.ts → PointLight/PointLight.d.ts}

@@ -1,4 +1,4 @@
-import { PointLight as THREEPointLight } from "three";
+import { Sprite, PointLight as THREEPointLight } from "three";
 import threeSpritetext from "three-spritetext";
 /**
  * 点光源
@@ -8,6 +8,6 @@ import threeSpritetext from "three-spritetext";
  */
 export default class PointLight extends THREEPointLight {
     constructor(color?: string, intensity?: number, distance?: number, decay?: number);
-    sphere: void;
+    pointLinghtHelper: Sprite;
     label: threeSpritetext;
 }

package/lib/PointLight/PointLight.js

@@ -0,0 +1,63 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-05-18 16:02:55
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-21 17:22:59
+ */
+import { Sprite, PointLight as THREEPointLight } from "three";
+import threeSpritetext from "three-spritetext";
+import threeLoader from "../threeLoader";
+import threeUtils from "../threeUtils";
+import pointLight_mapPNG from "./pointLight_map.png";
+/**
+ * 点光源
+ * @export
+ * @class PointLight
+ * @extends {THREEPointLight}
+ */
+export default class PointLight extends THREEPointLight {
+    constructor(color = "#fff", intensity, distance, decay) {
+        super(color, intensity, distance, decay);
+    }
+    // 灯光辅助器
+    pointLinghtHelper = threeUtils.isDev && (() => {
+        const pointLinghtHelper = new Sprite();
+        pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
+        pointLinghtHelper.material.color = this.color;
+        pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
+        pointLinghtHelper.material.sizeAttenuation = false;
+        pointLinghtHelper.userData = {
+            cursor: "pointer"
+        };
+        pointLinghtHelper.addEventListener("mouseenter", () => {
+            if (this.label) {
+                this.label.visible = true;
+            }
+        });
+        pointLinghtHelper.addEventListener("mouseleave", () => {
+            if (this.label) {
+                this.label.visible = false;
+            }
+        });
+        this.add(pointLinghtHelper);
+        return pointLinghtHelper;
+    })();
+    label = threeUtils.isDev && (() => {
+        const label = new threeSpritetext("点光源\n\n\n");
+        label.renderOrder = Infinity;
+        // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        label.padding = 4;
+        label.strokeColor = "#333";
+        label.strokeWidth = 2;
+        // label.borderRadius = 4;
+        // label.borderWidth = 1;
+        label.position.set(0, 0, 0);
+        label.visible = false;
+        label.material.color = this.color;
+        label.material.depthTest = false;
+        label.material.sizeAttenuation = false;
+        label.scale.multiplyScalar(0.002);
+        this.add(label);
+        return label;
+    })();
+}

package/lib/PointLight/PointLight.ts

@@ -0,0 +1,74 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2022-05-18 16:02:55 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-21 17:22:59
+ */
+
+import { Sprite, PointLight as THREEPointLight } from "three";
+import threeSpritetext from "three-spritetext";
+import threeLoader from "../threeLoader";
+import threeUtils from "../threeUtils";
+import pointLight_mapPNG from "./pointLight_map.png";
+
+
+/**
+ * 点光源
+ * @export
+ * @class PointLight
+ * @extends {THREEPointLight}
+ */
+export default class PointLight extends THREEPointLight {
+
+    constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
+        super(color, intensity, distance, decay);
+    }
+
+    // 灯光辅助器
+    pointLinghtHelper = threeUtils.isDev && (() => {
+        const pointLinghtHelper = new Sprite();
+        pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
+        pointLinghtHelper.material.color = this.color;
+        pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
+        pointLinghtHelper.material.sizeAttenuation = false;
+
+        pointLinghtHelper.userData = {
+            cursor: "pointer"
+        };
+
+        pointLinghtHelper.addEventListener("mouseenter", () => {
+            if (this.label) {
+                this.label.visible = true;
+            }
+        });
+
+        pointLinghtHelper.addEventListener("mouseleave", () => {
+            if (this.label) {
+                this.label.visible = false;
+            }
+        });
+
+        this.add(pointLinghtHelper);
+        return pointLinghtHelper;
+    })();
+
+    label = threeUtils.isDev && (() => {
+        const label = new threeSpritetext("点光源\n\n\n");
+        label.renderOrder = Infinity;
+        // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        label.padding = 4;
+        label.strokeColor = "#333";
+        label.strokeWidth = 2;
+        // label.borderRadius = 4;
+        // label.borderWidth = 1;
+        label.position.set(0, 0, 0);
+        label.visible = false;
+        label.material.color = this.color;
+        label.material.depthTest = false;
+        label.material.sizeAttenuation = false;
+        label.scale.multiplyScalar(0.002);
+        this.add(label);
+        return label;
+    })();
+
+}

package/lib/SpriteText2.d.ts

@@ -0,0 +1,47 @@
+import { Intersection, Raycaster, Sprite } from 'three';
+export default class SpriteText2 extends Sprite {
+    constructor(text?: string, textHeight?: number, color?: `rgb(${string})` | `rgba(${string})` | `#${string}`);
+    _text: string;
+    _textHeight: number;
+    _color: `rgb(${string})` | `rgba(${string})` | `#${string}`;
+    _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false;
+    _padding: number;
+    _borderWidth: number;
+    _borderRadius: number;
+    _borderColor: string;
+    _strokeWidth: number;
+    _strokeColor: string;
+    _fontFace: string;
+    _fontSize: number;
+    _fontWeight: string;
+    _canvas: HTMLCanvasElement;
+    get text(): string;
+    set text(text: string);
+    get textHeight(): number;
+    set textHeight(textHeight: number);
+    get color(): `rgb(${string})` | `rgba(${string})` | `#${string}`;
+    set color(color: `rgb(${string})` | `rgba(${string})` | `#${string}`);
+    get backgroundColor(): false | `rgb(${string})` | `rgba(${string})` | `#${string}`;
+    set backgroundColor(color: false | `rgb(${string})` | `rgba(${string})` | `#${string}`);
+    get padding(): number;
+    set padding(padding: number);
+    get borderWidth(): number;
+    set borderWidth(borderWidth: number);
+    get borderRadius(): number;
+    set borderRadius(borderRadius: number);
+    get borderColor(): string;
+    set borderColor(borderColor: string);
+    get fontFace(): string;
+    set fontFace(fontFace: string);
+    get fontSize(): number;
+    set fontSize(fontSize: number);
+    get fontWeight(): string;
+    set fontWeight(fontWeight: string);
+    get strokeWidth(): number;
+    set strokeWidth(strokeWidth: number);
+    get strokeColor(): string;
+    set strokeColor(strokeColor: string);
+    _genCanvas(): void;
+    raycast(raycaster: Raycaster, intersects: Intersection[]): void;
+    copy(source: any): this;
+}

package/lib/SpriteText2.js

@@ -0,0 +1,197 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-04-24 15:31:02
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-24 16:18:47
+ */
+import { LinearFilter, Sprite, Texture } from 'three';
+// 带箭头的精灵文字
+export default class SpriteText2 extends Sprite {
+    constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
+        super();
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+        this._backgroundColor = false; // no background color
+        this._padding = 0;
+        this._borderWidth = 0;
+        this._borderRadius = 0;
+        this._borderColor = 'white';
+        this._strokeWidth = 0;
+        this._strokeColor = 'white';
+        this._fontFace = 'Arial';
+        this._fontSize = 90; // defines text resolution
+        this._fontWeight = 'normal';
+        this._genCanvas();
+    }
+    _text = "";
+    _textHeight = 0;
+    _color = "#ffffff";
+    _backgroundColor = false; // no background color
+    _padding = 0;
+    _borderWidth = 0;
+    _borderRadius = 0;
+    _borderColor = 'white';
+    _strokeWidth = 0;
+    _strokeColor = 'white';
+    _fontFace = 'Arial';
+    _fontSize = 90; // defines text resolution
+    _fontWeight = 'normal';
+    _canvas = document.createElement('canvas');
+    get text() { return this._text; }
+    set text(text) { this._text = text; this._genCanvas(); }
+    get textHeight() { return this._textHeight; }
+    set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
+    get color() { return this._color; }
+    set color(color) { this._color = color; this._genCanvas(); }
+    get backgroundColor() { return this._backgroundColor; }
+    set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
+    get padding() { return this._padding; }
+    set padding(padding) { this._padding = padding; this._genCanvas(); }
+    get borderWidth() { return this._borderWidth; }
+    set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
+    get borderRadius() { return this._borderRadius; }
+    set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
+    get borderColor() { return this._borderColor; }
+    set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
+    get fontFace() { return this._fontFace; }
+    set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
+    get fontSize() { return this._fontSize; }
+    set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
+    get fontWeight() { return this._fontWeight; }
+    set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
+    get strokeWidth() { return this._strokeWidth; }
+    set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
+    get strokeColor() { return this._strokeColor; }
+    set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
+    _genCanvas() {
+        const canvas = this._canvas;
+        const ctx = canvas.getContext('2d');
+        const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+        const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
+        const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+        const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
+        const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+        const relPadding = padding.map(p => p * this.fontSize * 0.1); // padding in canvas units
+        const lines = this.text.split('\n');
+        const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
+        ctx.font = font; // measure canvas with appropriate font
+        const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
+        const innerHeight = this.fontSize * lines.length;
+        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
+        // paint border
+        if (this.borderWidth) {
+            ctx.strokeStyle = this.borderColor;
+            if (relBorder[0]) { // left + right borders
+                const hb = relBorder[0] / 2;
+                ctx.lineWidth = relBorder[0];
+                ctx.beginPath();
+                ctx.moveTo(hb, relBorderRadius[0]);
+                ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.stroke();
+            }
+            if (relBorder[1]) { // top + bottom borders
+                const hb = relBorder[1] / 2;
+                ctx.lineWidth = relBorder[1];
+                ctx.beginPath();
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
+                ctx.stroke();
+            }
+            if (this.borderRadius) { // strike rounded corners
+                const cornerWidth = Math.max(...relBorder);
+                const hb = cornerWidth / 2;
+                ctx.lineWidth = cornerWidth;
+                ctx.beginPath();
+                [
+                    !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
+                    !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
+                    !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
+                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+        // paint background
+        if (this.backgroundColor) {
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
+            }
+            else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+                ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
+                ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
+                ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+        ctx.translate(relBorder[0], relBorder[1]);
+        ctx.translate(relPadding[0], relPadding[0]);
+        // paint text
+        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+        ctx.fillStyle = this.color;
+        ctx.textBaseline = 'bottom';
+        const drawTextStroke = this.strokeWidth > 0;
+        if (drawTextStroke) {
+            ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+            ctx.strokeStyle = this.strokeColor;
+        }
+        lines.forEach((line, index) => {
+            const lineX = (innerWidth - ctx.measureText(line).width) / 2;
+            const lineY = (index + 1) * this.fontSize;
+            drawTextStroke && ctx.strokeText(line, lineX, lineY);
+            ctx.fillText(line, lineX, lineY);
+        });
+        // Inject canvas into sprite
+        if (this.material.map)
+            this.material.map.dispose(); // gc previous texture
+        const texture = this.material.map = new Texture(canvas);
+        texture.minFilter = LinearFilter;
+        texture.needsUpdate = true;
+        const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+    //鼠标拾取计算
+    raycast(raycaster, intersects) {
+        let intersect = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv.y > 0.55)) {
+            intersects.push(inte);
+        }
+    }
+    copy(source) {
+        this.color = source.color;
+        this.backgroundColor = source.backgroundColor;
+        this.padding = source.padding;
+        this.borderWidth = source.borderWidth;
+        this.borderColor = source.borderColor;
+        this.fontFace = source.fontFace;
+        this.fontSize = source.fontSize;
+        this.fontWeight = source.fontWeight;
+        this.strokeWidth = source.strokeWidth;
+        this.strokeColor = source.strokeColor;
+        return this;
+    }
+}

package/lib/SpriteText2.ts

@@ -0,0 +1,236 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-04-24 15:31:02 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-24 16:18:47
+ */
+
+
+import { Intersection, LinearFilter, Raycaster, Sprite, SpriteMaterial, Texture } from 'three';
+
+// 带箭头的精灵文字
+export default class SpriteText2 extends Sprite {
+    constructor(text = '', textHeight = 10, color: `rgb(${string})` | `rgba(${string})` | `#${string}` = 'rgba(255, 255, 255, 1)') {
+        super();
+
+        this._text = `${text}`;
+        this._textHeight = textHeight;
+        this._color = color;
+        this._backgroundColor = false; // no background color
+
+        this._padding = 0;
+        this._borderWidth = 0;
+        this._borderRadius = 0;
+        this._borderColor = 'white';
+
+        this._strokeWidth = 0;
+        this._strokeColor = 'white';
+
+        this._fontFace = 'Arial';
+        this._fontSize = 90; // defines text resolution
+        this._fontWeight = 'normal';
+
+        this._genCanvas();
+    }
+
+    _text = "";
+    _textHeight = 0;
+    _color: `rgb(${string})` | `rgba(${string})` | `#${string}` = "#ffffff";
+    _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false = false; // no background color
+
+    _padding = 0;
+    _borderWidth = 0;
+    _borderRadius = 0;
+    _borderColor = 'white';
+
+    _strokeWidth = 0;
+    _strokeColor = 'white';
+
+    _fontFace = 'Arial';
+    _fontSize = 90; // defines text resolution
+    _fontWeight = 'normal';
+    _canvas = document.createElement('canvas');
+
+    get text() { return this._text; }
+    set text(text) { this._text = text; this._genCanvas(); }
+    get textHeight() { return this._textHeight; }
+    set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
+    get color() { return this._color; }
+    set color(color) { this._color = color; this._genCanvas(); }
+    get backgroundColor() { return this._backgroundColor; }
+    set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
+    get padding() { return this._padding; }
+    set padding(padding) { this._padding = padding; this._genCanvas(); }
+    get borderWidth() { return this._borderWidth; }
+    set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
+    get borderRadius() { return this._borderRadius; }
+    set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
+    get borderColor() { return this._borderColor; }
+    set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
+    get fontFace() { return this._fontFace; }
+    set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
+    get fontSize() { return this._fontSize; }
+    set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
+    get fontWeight() { return this._fontWeight; }
+    set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
+    get strokeWidth() { return this._strokeWidth; }
+    set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
+    get strokeColor() { return this._strokeColor; }
+    set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
+
+    _genCanvas() {
+        const canvas = this._canvas;
+        const ctx = canvas.getContext('2d')!;
+
+        const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
+        const relBorder: number[] = border.map(b => b * this.fontSize * 0.1); // border in canvas units
+
+        const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
+        const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
+
+        const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
+        const relPadding = padding.map(p => p * this.fontSize * 0.1); // padding in canvas units
+
+        const lines = this.text.split('\n');
+        const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
+
+        ctx.font = font; // measure canvas with appropriate font
+        const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
+        const innerHeight = this.fontSize * lines.length;
+        canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
+        canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
+
+        // paint border
+        if (this.borderWidth) {
+            ctx.strokeStyle = this.borderColor;
+
+            if (relBorder[0]) { // left + right borders
+                const hb = relBorder[0] / 2;
+                ctx.lineWidth = relBorder[0];
+                ctx.beginPath();
+                ctx.moveTo(hb, relBorderRadius[0]);
+                ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
+                ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
+                ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.stroke();
+            }
+
+            if (relBorder[1]) { // top + bottom borders
+                const hb = relBorder[1] / 2;
+                ctx.lineWidth = relBorder[1];
+                ctx.beginPath();
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
+                ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
+
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
+
+                ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
+                ctx.stroke();
+            }
+
+            if (this.borderRadius) { // strike rounded corners
+                const cornerWidth = Math.max(...relBorder);
+                const hb = cornerWidth / 2;
+                ctx.lineWidth = cornerWidth;
+                ctx.beginPath();
+                [
+                    !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
+                    !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
+                    !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
+                    !!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
+                ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
+                    ctx.moveTo(x0, y0);
+                    ctx.quadraticCurveTo(x1, y0, x1, y1);
+                });
+                ctx.stroke();
+            }
+        }
+
+        // paint background
+        if (this.backgroundColor) {
+            ctx.fillStyle = this.backgroundColor;
+            if (!this.borderRadius) {
+                ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
+            } else { // fill with rounded corners
+                ctx.beginPath();
+                ctx.moveTo(relBorder[0], relBorderRadius[0]);
+
+                ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
+                ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
+                ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
+                ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
+
+                ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
+                ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
+
+                ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
+                ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
+
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+
+        ctx.translate(relBorder[0], relBorder[1]);
+        ctx.translate(relPadding[0], relPadding[0]);
+
+        // paint text
+        ctx.font = font; // Set font again after canvas is resized, as context properties are reset
+        ctx.fillStyle = this.color;
+        ctx.textBaseline = 'bottom';
+
+        const drawTextStroke = this.strokeWidth > 0;
+        if (drawTextStroke) {
+            ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
+            ctx.strokeStyle = this.strokeColor;
+        }
+
+        lines.forEach((line, index) => {
+            const lineX = (innerWidth - ctx.measureText(line).width) / 2;
+            const lineY = (index + 1) * this.fontSize;
+
+            drawTextStroke && ctx.strokeText(line, lineX, lineY);
+            ctx.fillText(line, lineX, lineY);
+        });
+
+        // Inject canvas into sprite
+        if (this.material.map) this.material.map.dispose(); // gc previous texture
+        const texture = this.material.map = new Texture(canvas);
+        texture.minFilter = LinearFilter;
+        texture.needsUpdate = true;
+
+        const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+        this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]) {
+
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv!.y > 0.55)) {
+            intersects.push(inte);
+        }
+
+    }
+
+    copy(source) {
+        this.color = source.color;
+        this.backgroundColor = source.backgroundColor;
+        this.padding = source.padding;
+        this.borderWidth = source.borderWidth;
+        this.borderColor = source.borderColor;
+        this.fontFace = source.fontFace;
+        this.fontSize = source.fontSize;
+        this.fontWeight = source.fontWeight;
+        this.strokeWidth = source.strokeWidth;
+        this.strokeColor = source.strokeColor;
+        return this;
+    }
+}

package/lib/Text3D/fontController.ts

@@ -6,8 +6,8 @@
  */
 
 import Dexie, { Table } from "dexie";
-import _, { filter, first, isEmpty } from "lodash";
-import { Font, FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
+import { filter, first, isEmpty } from "lodash";
+import { Font } from "three/examples/jsm/loaders/FontLoader.js";
 import threeUtils from "../threeUtils";
 import gentilisJSON from "./gentilis.json";
 

package/lib/planeModal1/PlaneModal1.d.ts

@@ -11,7 +11,6 @@ export type PlaneModal1Config = {
 };
 export default class PlaneModal1 extends Mesh {
     constructor(config?: PlaneModal1Config);
-    renderOrder: number;
     geometry: PlaneGeometry;
     material: MeshBasicMaterial;
     static img: HTMLImageElement;

package/lib/planeModal1/PlaneModal1.js

@@ -14,7 +14,6 @@ export default class PlaneModal1 extends Mesh {
         this.material.map = this.texture;
         this.scale.set(10, 10, 10);
     }
-    renderOrder = 99;
     geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
     material = new MeshBasicMaterial({
         side: DoubleSide,

package/lib/planeModal1/PlaneModal1.ts

@@ -30,8 +30,6 @@ export default class PlaneModal1 extends Mesh {
         this.scale.set(10, 10, 10);
     }
 
-    renderOrder = 99;
-
     geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
 
     material = new MeshBasicMaterial({

package/lib/spriteModal1/SpriteModal1.d.ts

@@ -11,7 +11,6 @@ export type SpritModal1Config = {
 };
 export default class SpritModal1 extends Sprite {
     constructor(config?: SpritModal1Config);
-    renderOrder: number;
     static img: HTMLImageElement;
     canvas: HTMLCanvasElement;
     context: CanvasRenderingContext2D;

package/lib/spriteModal1/SpriteModal1.js

@@ -15,7 +15,6 @@ export default class SpritModal1 extends Sprite {
         this.material.transparent = true;
         this.material.alphaTest = 0.01;
     }
-    renderOrder = 99;
     // 背景图
     static img = (() => {
         const img = new Image();

package/lib/spriteModal1/SpriteModal1.ts

@@ -34,8 +34,6 @@ export default class SpritModal1 extends Sprite {
         this.material.alphaTest = 0.01;
     }
 
-    renderOrder = 99;
-
     // 背景图
     static img = (() => {
         const img = new Image();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.77",
+    "version": "1.0.78",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",

package/lib/PointLight.js

@@ -1,64 +0,0 @@
-/*
- * @Author: xiaosihan
- * @Date: 2022-05-18 16:02:55
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-06-23 21:02:45
- */
-import { Mesh, MeshBasicMaterial, PointLight as THREEPointLight, SphereGeometry } from "three";
-import threeSpritetext from "three-spritetext";
-import threeUtils from "./threeUtils";
-/**
- * 点光源
- * @export
- * @class PointLight
- * @extends {THREEPointLight}
- */
-export default class PointLight extends THREEPointLight {
-    constructor(color = "#fff", intensity, distance, decay) {
-        super(color, intensity, distance, decay);
-        if (threeUtils.isDev) {
-            if (this.label) {
-                this.label.borderColor = color;
-                this.label.color = color;
-                this.label.scale.multiplyScalar(0.03);
-            }
-        }
-    }
-    sphere = threeUtils.isDev && (() => {
-        // 点光源辅助小球
-        const sphere = new SphereGeometry(0.1, 10, 10);
-        const materils = new MeshBasicMaterial({
-            color: this.color,
-            wireframe: true
-        });
-        const mesh = new Mesh(sphere, materils);
-        mesh.userData = {
-            cursor: "pointer"
-        };
-        mesh.addEventListener("mouseenter", () => {
-            if (this.label) {
-                this.label.visible = true;
-            }
-        });
-        mesh.addEventListener("mouseleave", () => {
-            if (this.label) {
-                this.label.visible = false;
-            }
-        });
-        this.add(mesh);
-    })();
-    label = threeUtils.isDev && (() => {
-        const label = new threeSpritetext("点光源");
-        label.renderOrder = Infinity;
-        label.backgroundColor = "rgba(0, 0, 0, 0.5)";
-        label.padding = 4;
-        label.borderRadius = 4;
-        label.borderWidth = 1;
-        label.position.set(0, 0.5, 0);
-        label.visible = false;
-        label.material.depthTest = false;
-        label.scale.multiplyScalar(0.001);
-        this.add(label);
-        return label;
-    })();
-}

package/lib/PointLight.ts

@@ -1,78 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-05-18 16:02:55 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-06-23 21:02:45
- */
-
-import { Mesh, MeshBasicMaterial, PointLight as THREEPointLight, SphereGeometry } from "three";
-import threeSpritetext from "three-spritetext";
-import threeUtils from "./threeUtils";
-
-
-/**
- * 点光源
- * @export
- * @class PointLight
- * @extends {THREEPointLight}
- */
-export default class PointLight extends THREEPointLight {
-
-    constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
-        super(color, intensity, distance, decay);
-
-        if (threeUtils.isDev) {
-            if (this.label) {
-                this.label.borderColor = color;
-                this.label.color = color;
-                this.label.scale.multiplyScalar(0.03);
-            }
-
-        }
-
-    }
-
-    sphere = threeUtils.isDev && (() => {
-        // 点光源辅助小球
-        const sphere = new SphereGeometry(0.1, 10, 10);
-        const materils = new MeshBasicMaterial({
-            color: this.color,
-            wireframe: true
-        });
-        const mesh = new Mesh(sphere, materils);
-
-        mesh.userData = {
-            cursor: "pointer"
-        };
-
-        mesh.addEventListener("mouseenter", () => {
-            if (this.label) {
-                this.label.visible = true;
-            }
-        });
-
-        mesh.addEventListener("mouseleave", () => {
-            if (this.label) {
-                this.label.visible = false;
-            }
-        });
-
-        this.add(mesh);
-    })();
-
-    label = threeUtils.isDev && (() => {
-        const label = new threeSpritetext("点光源");
-        label.renderOrder = Infinity;
-        label.backgroundColor = "rgba(0, 0, 0, 0.5)";
-        label.padding = 4;
-        label.borderRadius = 4;
-        label.borderWidth = 1;
-        label.position.set(0, 0.5, 0);
-        label.visible = false;
-        label.material.depthTest = false;
-        label.scale.multiplyScalar(0.001);
-        this.add(label);
-        return label;
-    })();
-
-}

package/lib/index.d.ts

@@ -1,22 +0,0 @@
-export { default } from "./lib/ThreeBase";
-export { default as EventMesh } from "./lib/EventMesh";
-export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
-export type { ExtrudePath } from "./lib/ExtrudeMesh";
-export type { ExtrudeMeshProps } from "./lib/ExtrudeMesh";
-export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
-export type { KeyframeAnimationProps } from "./lib/KeyFrameAnimation";
-export type { Keyframe } from "./lib/KeyFrameAnimation";
-export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
-export { default as PointLight } from "./lib/PointLight";
-export { default as Sky } from "./lib/Sky/Sky";
-export { default as keyContorls } from "./lib/keyContorls";
-export { default as Transition } from "./lib/Transition";
-export { default as threeUtils } from "./lib/threeUtils";
-export { default as threeLoader } from "./lib/threeLoader";
-export { default as FPScontrol } from "./lib/FPScontrol";
-export { default as PlaneText } from "./lib/PlaneText";
-export { default as SpriteText } from "three-spritetext";
-export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
-export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
-export { default as Text3D } from "./lib/Text3D/Text3D";
-export type { Text3DProps } from "./lib/Text3D/Text3D";