three-base 2.0.3 → 2.0.5

package/PlaneWithHtml.js

@@ -23,7 +23,8 @@ export default class PlaneWithHtml extends Mesh {
     })();
     material = new MeshBasicMaterial({
         side: DoubleSide,
-        transparent: true
+        transparent: true,
+        alphaTest: 0.1
     });
     div = (() => {
         const div = document.createElement("div");
@@ -56,8 +57,8 @@ export default class PlaneWithHtml extends Mesh {
                 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.visible = true;
                 this.div.remove();
                 resolve();
             });

package/PlaneWithHtml.ts

@@ -31,7 +31,8 @@ export default class PlaneWithHtml extends Mesh {
 
     material = new MeshBasicMaterial({
         side: DoubleSide,
-        transparent: true
+        transparent: true,
+        alphaTest: 0.1
     });
 
     div = (() => {
@@ -69,8 +70,8 @@ export default class PlaneWithHtml extends Mesh {
                 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.visible = true;
                 this.div.remove();
                 resolve();
             });

package/SpriteWithHtml.d.ts

@@ -0,0 +1,7 @@
+import { Sprite } from "three";
+export default class SpriteWithHtml extends Sprite {
+    constructor(html?: string, backgroundColor?: `#${string}`);
+    visible: boolean;
+    div: HTMLDivElement;
+    setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
+}

package/SpriteWithHtml.js

@@ -0,0 +1,49 @@
+/*
+ * @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, Sprite } from "three";
+import threeLoader from "./threeLoader";
+// html 文本面板
+export default class SpriteWithHtml extends Sprite {
+    constructor(html = "", backgroundColor = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+    visible = false;
+    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;
+    })();
+    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.scale.set(canvas.width, canvas.height, 1);
+                this.material.map = new CanvasTexture(canvas);
+                this.material.map.anisotropy = threeLoader.anisotropy;
+                this.material.alphaTest = 0.1;
+                this.material.needsUpdate = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.visible = true;
+                this.div.remove();
+                resolve();
+            });
+        });
+        this.dispatchEvent({ type: "loaded" });
+    }
+}

package/SpriteWithHtml.ts

@@ -0,0 +1,62 @@
+/*
+ * @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, Sprite } from "three";
+import threeLoader from "./threeLoader";
+
+
+// html 文本面板
+export default class SpriteWithHtml extends Sprite {
+
+    constructor(html: string = "", backgroundColor: `#${string}` = "#00000000") {
+        super();
+        this.setHtml(html, backgroundColor);
+    }
+
+    visible = false;
+
+    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;
+    })();
+
+    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.scale.set(canvas.width, canvas.height, 1);
+                this.material.map = new CanvasTexture(canvas);
+                this.material.map.anisotropy = threeLoader.anisotropy;
+                this.material.alphaTest = 0.1;
+                this.material.needsUpdate = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.visible = true;
+                this.div.remove();
+                resolve();
+            });
+
+        });
+
+        this.dispatchEvent({ type: "loaded" });
+    }
+
+
+}

package/package.json

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

package/threeUtils.d.ts

@@ -35,7 +35,7 @@ declare class ThreeUtils extends EventDispatcher {
     alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
     centerObject3D(object3d: Object3D | BufferGeometry): void;
     center(object3d: Object3D | BufferGeometry): void;
-    scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Partial<["x", "y", "z"]>): void;
+    scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Array<"x" | "y" | "z">): void;
     exportGLB(input: Object3D): void;
     getVolume(geometry: BufferGeometry): number;
     signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;

package/threeUtils.ts

@@ -188,9 +188,9 @@ class ThreeUtils extends EventDispatcher {
     }
 
     // 使用指定的纬度计算, 缩放至指定大小
-    scaleTo(object3d: Object3D | BufferGeometry, size: number = 1, key: Partial<["x", "y", "z"]> = ["x", "y", "z"]) {
+    scaleTo(object3d: Object3D | BufferGeometry, size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
-        const scale = size / Math.max(...key.map(k => originSize[k as "x" | "y" | "z"]));
+        const scale = size / Math.max(...key.map(k => originSize[k]));
 
         if (object3d instanceof Object3D) {
             object3d.scale.multiplyScalar(scale);