three-base 1.0.75 → 1.0.77

package/index.js

@@ -32,3 +32,5 @@ 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

@@ -53,4 +53,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/PlaneWithHtml.d.ts

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

package/lib/PlaneWithHtml.js

@@ -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, 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 = "") {
+        super();
+        this.setHtml(html);
+    }
+    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.border = "1px dashed #ff0000";
+        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 = "") {
+        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();
+        });
+    }
+}

package/lib/PlaneWithHtml.ts

@@ -0,0 +1,75 @@
+/*
+ * @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 = "") {
+        super();
+        this.setHtml(html);
+    }
+
+    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.border = "1px dashed #ff0000";
+        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 = "") {
+        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();
+        });
+
+    }
+
+
+}

package/lib/ThreeBase.js

@@ -70,10 +70,7 @@ export default class ThreeBase extends EventDispatcher {
     // 设置 dom 容器
     async setContainer(div) {
         if (div) {
-            //删除这个容器里面的所有canvas
-            const canvas = div.getElementsByTagName("canvas");
-            for (let c of canvas)
-                c.remove();
+            div.innerHTML = "";
             div.append(this.renderer.domElement);
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {

package/lib/ThreeBase.ts

@@ -87,9 +87,7 @@ export default class ThreeBase extends EventDispatcher {
     // 设置 dom 容器
     async setContainer(div: HTMLDivElement | null) {
         if (div) {
-            //删除这个容器里面的所有canvas
-            const canvas = div.getElementsByTagName("canvas");
-            for (let c of canvas) c.remove();
+            div.innerHTML = "";
             div.append(this.renderer.domElement);
 
             // 如果上下文被销毁了,  就恢复上下文

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.75",
+    "version": "1.0.77",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -49,6 +49,7 @@
         "@types/element-resize-event": "^3",
         "@types/lodash": "^4",
         "vite": "*",
-        "@types/node": "*"
+        "@types/node": "*",
+        "html2canvas": "^1.4.1"
     }
 }