three-base 1.129.14 → 1.129.17

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";
 //键盘控制器
@@ -25,10 +25,14 @@ export { default as FPScontrol } from "./lib/FPScontrol";
 // 平面文字
 export { default as PlaneText } from "./lib/PlaneText";
 // 精灵文字
-export { default as SpriteText } from "three-spritetext";
+export { default as SpriteText } from "./lib/SpriteText";
+// 精灵文字样式2
+export { default as SpriteText2 } from "./lib/SpriteText2";
 //精灵文本框
 export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
 //平面文本框
 export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
 // 3D文字
 export { default as Text3D } from "./lib/Text3D/Text3D";
+// html面板
+export { default as PlaneWithHtml } from "./lib/PlaneWithHtml";

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";
@@ -43,7 +43,10 @@ export { default as FPScontrol } from "./lib/FPScontrol";
 export { default as PlaneText } from "./lib/PlaneText";
 
 // 精灵文字
-export { default as SpriteText } from "three-spritetext";
+export { default as SpriteText } from "./lib/SpriteText";
+
+// 精灵文字样式2
+export { default as SpriteText2 } from "./lib/SpriteText2";
 
 //精灵文本框
 export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
@@ -53,4 +56,7 @@ export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
 
 // 3D文字
 export { default as Text3D } from "./lib/Text3D/Text3D";
-export type { Text3DProps } from "./lib/Text3D/Text3D";
+export type { Text3DProps } from "./lib/Text3D/Text3D";
+
+// html面板
+export { default as PlaneWithHtml } from "./lib/PlaneWithHtml";

package/lib/ExtrudeMesh.js

@@ -358,5 +358,6 @@ export default class ExtrudeMesh extends Mesh {
         geometry.computeVertexNormals();
         this.geometry.dispose();
         this.geometry = geometry;
+        this.dispatchEvent({ type: "loaded" });
     }
 }

package/lib/ExtrudeMesh.ts

@@ -563,6 +563,8 @@ export default class ExtrudeMesh extends Mesh<BufferGeometry, Material> {
 
         this.geometry.dispose();
         this.geometry = geometry;
+
+        this.dispatchEvent({ type: "loaded" });
     }
 
 

package/lib/PlaneText.d.ts

@@ -1,5 +1,5 @@
 import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
+import SpriteText from "./SpriteText";
 type Props = {
     text?: string;
     textHeight?: number;
@@ -22,16 +22,16 @@ export default class PlaneText extends Mesh {
     spriteText: SpriteText;
     material: MeshBasicMaterial;
     set(parame: Props): void;
-    get(prop: keyof SpriteText): string | number | boolean | import("three").BufferGeometry | import("three").Matrix3 | import("three").Matrix4 | import("three").Material | import("three").Object3D | {
+    get(prop: keyof SpriteText): string | number | boolean | import("three").BufferGeometry | import("three").Matrix3 | import("three").Matrix4 | import("three").Material | import("three").Object3D<import("three").Event> | Vector3 | import("three").Object3D<import("three").Event>[] | import("three").Euler | import("three").Quaternion | import("three").Layers | import("three").AnimationClip[] | {
         [key: string]: any;
-    } | ((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) | import("three").Quaternion | Vector3 | ((vector: number | Vector3, y?: number, z?: number) => void) | import("three").Object3D[] | ((id: number) => import("three").Object3D) | ((name: string) => import("three").Object3D) | ((name: string, value: string) => import("three").Object3D) | ((callback: (object: import("three").Object3D) => any) => void) | ((callback: (object: import("three").Object3D) => any) => void) | ((callback: (object: import("three").Object3D) => any) => void) | ((meta?: {
+    } | ((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<import("three").Event>) | ((name: string) => import("three").Object3D<import("three").Event>) | ((name: string, value: any) => import("three").Object3D<import("three").Event>) | ((name: string, value: any) => import("three").Object3D<import("three").Event>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((callback: (object: import("three").Object3D<import("three").Event>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Event>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Event>) => any) => void) | (() => void) | ((force?: boolean) => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
         geometries: any;
         materials: any;
         textures: any;
         images: any;
-    }) => any) | ((type: string, listener: (event: import("three").Event) => void) => void) | ((type: string, listener: (event: import("three").Event) => void) => boolean) | ((type: string, listener: (event: import("three").Event) => void) => void) | ((event: {
-        [attachment: string]: any;
-        type: string;
-    }) => void) | import("three").Vector2 | ((force?: boolean) => void) | import("three").Euler | (() => void) | import("three").Layers | import("three").AnimationClip[] | 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) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection[]) => void) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | ((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) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((updateParents: boolean, updateChildren: boolean) => void);
+    }) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | HTMLCanvasElement | 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) | (() => void);
 }
 export {};

package/lib/PlaneText.js

@@ -2,10 +2,10 @@
  * @Author: xiaosihan
  * @Date: 2022-05-23 13:53:06
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-05-23 19:38:24
+ * @Last Modified time: 2023-05-03 02:54:52
  */
 import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
+import SpriteText from "./SpriteText";
 export default class PlaneText extends Mesh {
     constructor(text = "planeText") {
         super(PlaneText.geometry);

package/lib/PlaneText.ts

@@ -2,12 +2,11 @@
  * @Author: xiaosihan 
  * @Date: 2022-05-23 13:53:06 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-05-23 19:38:24
+ * @Last Modified time: 2023-05-03 02:54:52
  */
 
 import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "three-spritetext";
-
+import SpriteText from "./SpriteText";
 
 
 type Props = {

package/lib/PlaneWithHtml.d.ts

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

package/lib/PlaneWithHtml.js

@@ -0,0 +1,67 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-04-15 11:26:32
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-15 12:38:09
+ */
+import html2canvas from "html2canvas";
+import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
+import { degToRad } from "three/src/math/MathUtils";
+import threeLoader from "./threeLoader";
+// html 文本面板
+export default class PlaneWithHtml extends Mesh {
+    constructor(html = "", backgroundColor = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+    visible = false;
+    size = new Vector2(10, 10);
+    geometry = (() => {
+        const geometry = new PlaneGeometry(10, 10, 1, 1);
+        geometry.rotateX(degToRad(-90));
+        return geometry;
+    })();
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        transparent: true
+    });
+    div = (() => {
+        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, height) {
+        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 = "", backgroundColor = "#00000000") {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+        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();
+            });
+        });
+        this.dispatchEvent({ type: "loaded" });
+    }
+}

package/lib/PlaneWithHtml.ts

@@ -0,0 +1,84 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-04-15 11:26:32 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-04-15 12:38:09
+ */
+
+import html2canvas from "html2canvas";
+import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
+import { degToRad } from "three/src/math/MathUtils";
+import threeLoader from "./threeLoader";
+
+
+// html 文本面板
+export default class PlaneWithHtml extends Mesh {
+
+    constructor(html: string = "", backgroundColor: `#${string}` = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+
+    visible = false;
+
+    size = new Vector2(10, 10);
+
+    geometry = (() => {
+        const geometry = new PlaneGeometry(10, 10, 1, 1);
+        geometry.rotateX(degToRad(-90));
+        return geometry;
+    })();
+
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        transparent: true
+    });
+
+    div = (() => {
+        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) {
+        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: `#${string}` = "#00000000") {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+
+        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();
+            });
+
+        });
+
+        this.dispatchEvent({ type: "loaded" });
+    }
+
+
+}

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

@@ -1,5 +1,5 @@
-import { PointLight as THREEPointLight } from "three";
-import threeSpritetext from "three-spritetext";
+import { Sprite, PointLight as THREEPointLight } from "three";
+import SpriteText from "../SpriteText";
 /**
  * 点光源
  * @export
@@ -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;
-    label: threeSpritetext;
+    pointLinghtHelper: Sprite;
+    label: SpriteText;
 }

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-05-03 02:55:28
+ */
+import { Sprite, PointLight as THREEPointLight } from "three";
+import threeLoader from "../threeLoader";
+import threeUtils from "../threeUtils";
+import pointLight_mapPNG from "./pointLight_map.png";
+import SpriteText from "../SpriteText";
+/**
+ * 点光源
+ * @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 SpriteText("点光源\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-05-03 02:55:28
+ */
+
+import { Sprite, PointLight as THREEPointLight } from "three";
+import threeLoader from "../threeLoader";
+import threeUtils from "../threeUtils";
+import pointLight_mapPNG from "./pointLight_map.png";
+import SpriteText from "../SpriteText";
+
+
+/**
+ * 点光源
+ * @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 SpriteText("点光源\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/SpriteText.d.ts

@@ -0,0 +1,45 @@
+import { Sprite } from "three";
+export default class SpriteText extends Sprite {
+    constructor(text?: string, textHeight?: number, color?: `#${string}` | `rgba(${string})`);
+    _text: string;
+    _textHeight: number;
+    _color: `#${string}` | `rgba(${string})`;
+    _backgroundColor: boolean;
+    _padding: number;
+    _borderWidth: number;
+    _borderRadius: number;
+    _borderColor: `#${string}` | `rgba(${string})`;
+    _strokeWidth: number;
+    _strokeColor: `#${string}` | `rgba(${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(): `#${string}` | `rgba(${string})`;
+    set color(color: `#${string}` | `rgba(${string})`);
+    get backgroundColor(): boolean;
+    set backgroundColor(color: boolean);
+    get padding(): number;
+    set padding(padding: number);
+    get borderWidth(): number;
+    set borderWidth(borderWidth: number);
+    get borderRadius(): number;
+    set borderRadius(borderRadius: number);
+    get borderColor(): `#${string}` | `rgba(${string})`;
+    set borderColor(borderColor: `#${string}` | `rgba(${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}` | `rgba(${string})`;
+    set strokeColor(strokeColor: `#${string}` | `rgba(${string})`);
+    _genCanvas(): void;
+}