three-base 2.0.4 → 2.0.6

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/ThreeBase.js

@@ -37,7 +37,7 @@ export default class ThreeBase extends EventDispatcher {
             antialias: true,
             precision: "highp",
             logarithmicDepthBuffer: true,
-            preserveDrawingBuffer: false,
+            preserveDrawingBuffer: true,
             stencil: false, // 模版
         });
         renderer.domElement.id = generateUUID();

package/ThreeBase.ts

@@ -46,7 +46,7 @@ export default class ThreeBase extends EventDispatcher {
             antialias: true, // 阴影抗锯齿
             precision: "highp", //precision:highp/mediump/lowp着色精度选择
             logarithmicDepthBuffer: true, // 对数深度缓冲区 避免当2个面完全重合时闪烁
-            preserveDrawingBuffer: false, // 是否保存绘图缓冲
+            preserveDrawingBuffer: true, // 是否保存绘图缓冲
             stencil: false, // 模版
         });
 

package/package.json

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