three-base 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/PlaneWithHtml.js +3 -2
  2. package/PlaneWithHtml.ts +3 -2
  3. package/SpriteWithHtml.d.ts +7 -0
  4. package/SpriteWithHtml.js +49 -0
  5. package/SpriteWithHtml.ts +62 -0
  6. package/package.json +1 -1
package/PlaneWithHtml.js CHANGED
@@ -23,7 +23,8 @@ export default class PlaneWithHtml extends Mesh {
23
23
  })();
24
24
  material = new MeshBasicMaterial({
25
25
  side: DoubleSide,
26
- transparent: true
26
+ transparent: true,
27
+ alphaTest: 0.1
27
28
  });
28
29
  div = (() => {
29
30
  const div = document.createElement("div");
@@ -56,8 +57,8 @@ export default class PlaneWithHtml extends Mesh {
56
57
  this.material.map = new CanvasTexture(canvas);
57
58
  this.material.map.anisotropy = threeLoader.anisotropy;
58
59
  this.material.needsUpdate = true;
59
- this.visible = true;
60
60
  await new Promise(resolve => requestAnimationFrame(resolve));
61
+ this.visible = true;
61
62
  this.div.remove();
62
63
  resolve();
63
64
  });
package/PlaneWithHtml.ts CHANGED
@@ -31,7 +31,8 @@ export default class PlaneWithHtml extends Mesh {
31
31
 
32
32
  material = new MeshBasicMaterial({
33
33
  side: DoubleSide,
34
- transparent: true
34
+ transparent: true,
35
+ alphaTest: 0.1
35
36
  });
36
37
 
37
38
  div = (() => {
@@ -69,8 +70,8 @@ export default class PlaneWithHtml extends Mesh {
69
70
  this.material.map = new CanvasTexture(canvas);
70
71
  this.material.map.anisotropy = threeLoader.anisotropy;
71
72
  this.material.needsUpdate = true;
72
- this.visible = true;
73
73
  await new Promise(resolve => requestAnimationFrame(resolve));
74
+ this.visible = true;
74
75
  this.div.remove();
75
76
  resolve();
76
77
  });
package/SpriteWithHtml.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Sprite } from "three";
2
+ export default class SpriteWithHtml extends Sprite {
3
+ constructor(html?: string, backgroundColor?: `#${string}`);
4
+ visible: boolean;
5
+ div: HTMLDivElement;
6
+ setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
7
+ }
package/SpriteWithHtml.js ADDED
@@ -0,0 +1,49 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-04-15 11:26:32
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-04-15 12:38:09
6
+ */
7
+ import html2canvas from "html2canvas";
8
+ import { CanvasTexture, Sprite } from "three";
9
+ import threeLoader from "./threeLoader";
10
+ // html 文本面板
11
+ export default class SpriteWithHtml extends Sprite {
12
+ constructor(html = "", backgroundColor = "#00000000") {
13
+ super();
14
+ this.setHtml(html, backgroundColor);
15
+ }
16
+ visible = false;
17
+ div = (() => {
18
+ const div = document.createElement("div");
19
+ div.style.position = "fixed";
20
+ div.style.top = "100%";
21
+ div.style.left = "100%";
22
+ div.style.pointerEvents = "none";
23
+ div.style.userSelect = "none";
24
+ div.style.lineHeight = "1";
25
+ div.style.whiteSpace = "nowrap";
26
+ return div;
27
+ })();
28
+ async setHtml(html = "", backgroundColor = "#00000000") {
29
+ this.div.innerHTML = html;
30
+ document.body.appendChild(this.div);
31
+ await new Promise((resolve, reject) => {
32
+ html2canvas(this.div, {
33
+ backgroundColor,
34
+ removeContainer: true
35
+ }).then(async (canvas) => {
36
+ this.scale.set(canvas.width, canvas.height, 1);
37
+ this.material.map = new CanvasTexture(canvas);
38
+ this.material.map.anisotropy = threeLoader.anisotropy;
39
+ this.material.alphaTest = 0.1;
40
+ this.material.needsUpdate = true;
41
+ await new Promise(resolve => requestAnimationFrame(resolve));
42
+ this.visible = true;
43
+ this.div.remove();
44
+ resolve();
45
+ });
46
+ });
47
+ this.dispatchEvent({ type: "loaded" });
48
+ }
49
+ }
package/SpriteWithHtml.ts ADDED
@@ -0,0 +1,62 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-04-15 11:26:32
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-04-15 12:38:09
6
+ */
7
+
8
+ import html2canvas from "html2canvas";
9
+ import { CanvasTexture, Sprite } from "three";
10
+ import threeLoader from "./threeLoader";
11
+
12
+
13
+ // html 文本面板
14
+ export default class SpriteWithHtml extends Sprite {
15
+
16
+ constructor(html: string = "", backgroundColor: `#${string}` = "#00000000") {
17
+ super();
18
+ this.setHtml(html, backgroundColor);
19
+ }
20
+
21
+ visible = false;
22
+
23
+ div = (() => {
24
+ const div = document.createElement("div");
25
+ div.style.position = "fixed";
26
+ div.style.top = "100%";
27
+ div.style.left = "100%";
28
+ div.style.pointerEvents = "none";
29
+ div.style.userSelect = "none";
30
+ div.style.lineHeight = "1";
31
+ div.style.whiteSpace = "nowrap";
32
+ return div;
33
+ })();
34
+
35
+ async setHtml(html: string = "", backgroundColor: `#${string}` = "#00000000") {
36
+ this.div.innerHTML = html;
37
+ document.body.appendChild(this.div);
38
+
39
+ await new Promise<void>((resolve, reject) => {
40
+
41
+ html2canvas(this.div, {
42
+ backgroundColor,
43
+ removeContainer: true
44
+ }).then(async (canvas) => {
45
+ this.scale.set(canvas.width, canvas.height, 1);
46
+ this.material.map = new CanvasTexture(canvas);
47
+ this.material.map.anisotropy = threeLoader.anisotropy;
48
+ this.material.alphaTest = 0.1;
49
+ this.material.needsUpdate = true;
50
+ await new Promise(resolve => requestAnimationFrame(resolve));
51
+ this.visible = true;
52
+ this.div.remove();
53
+ resolve();
54
+ });
55
+
56
+ });
57
+
58
+ this.dispatchEvent({ type: "loaded" });
59
+ }
60
+
61
+
62
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "three-base",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "description": "three 3d three-base",
5
5
  "repository": {
6
6
  "type": "git",