three-base 2.0.130 → 2.0.134

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 (123) hide show
  1. package/ApngTexture.d.ts +13 -13
  2. package/ApngTexture.js +61 -61
  3. package/ApngTextureManage.d.ts +18 -18
  4. package/ApngTextureManage.js +87 -87
  5. package/DirectionalLight.d.ts +6 -0
  6. package/DirectionalLight.js +68 -0
  7. package/EventMesh.d.ts +18 -18
  8. package/EventMesh.js +59 -59
  9. package/ExtrudeMesh.d.ts +112 -112
  10. package/ExtrudeMesh.js +366 -366
  11. package/FPScontrol.d.ts +71 -50
  12. package/FPScontrol.js +505 -232
  13. package/Fire/Fire.d.ts +28 -28
  14. package/Fire/Fire.js +79 -79
  15. package/Fire/FireGromtry.d.ts +9 -9
  16. package/Fire/FireGromtry.js +40 -40
  17. package/Fire/FireMaterial.d.ts +28 -28
  18. package/Fire/FireMaterial.js +32 -32
  19. package/Fire/index.d.ts +1 -1
  20. package/Fire/index.js +1 -1
  21. package/Grass/Grass.d.ts +8 -8
  22. package/Grass/Grass.js +38 -38
  23. package/Grass/index.d.ts +1 -1
  24. package/Grass/index.js +1 -1
  25. package/Ground1/Ground1.d.ts +11 -11
  26. package/Ground1/Ground1.js +54 -54
  27. package/Ground1/index.d.ts +1 -1
  28. package/Ground1/index.js +1 -1
  29. package/InstancedMeshBase.d.ts +39 -39
  30. package/InstancedMeshBase.js +293 -293
  31. package/KeyFrameAnimation.d.ts +25 -25
  32. package/KeyFrameAnimation.js +78 -78
  33. package/MeshBase.d.ts +35 -35
  34. package/MeshBase.js +223 -223
  35. package/Mirror.d.ts +25 -25
  36. package/Mirror.js +139 -139
  37. package/PipeMesh/PathGeometry.d.ts +44 -44
  38. package/PipeMesh/PathGeometry.js +300 -300
  39. package/PipeMesh/PathPoint.d.ts +17 -17
  40. package/PipeMesh/PathPoint.js +31 -31
  41. package/PipeMesh/PathPointList.d.ts +31 -31
  42. package/PipeMesh/PathPointList.js +208 -208
  43. package/PipeMesh/PathTubeGeometry.d.ts +25 -25
  44. package/PipeMesh/PathTubeGeometry.js +130 -130
  45. package/PipeMesh/PipeMesh.d.ts +25 -25
  46. package/PipeMesh/PipeMesh.js +63 -63
  47. package/PipeMesh/index.d.ts +1 -1
  48. package/PipeMesh/index.js +1 -1
  49. package/PlaneModal1/PlaneModal1.d.ts +31 -31
  50. package/PlaneModal1/PlaneModal1.js +105 -105
  51. package/PlaneModal1/index.d.ts +1 -1
  52. package/PlaneModal1/index.js +1 -1
  53. package/PlaneText.d.ts +39 -39
  54. package/PlaneText.js +30 -30
  55. package/PlaneWithHtml.d.ts +11 -11
  56. package/PlaneWithHtml.js +63 -68
  57. package/PointLight/PointLight.d.ts +14 -13
  58. package/PointLight/PointLight.js +70 -64
  59. package/PointLight/index.d.ts +1 -1
  60. package/PointLight/index.js +1 -1
  61. package/Sky/Sky.d.ts +9 -9
  62. package/Sky/Sky.js +22 -22
  63. package/Sky/index.d.ts +1 -1
  64. package/Sky/index.js +1 -1
  65. package/SpotLight.d.ts +6 -0
  66. package/SpotLight.js +72 -0
  67. package/SpriteModal1/SpriteModal1.d.ts +30 -30
  68. package/SpriteModal1/SpriteModal1.js +110 -110
  69. package/SpriteModal1/index.d.ts +1 -1
  70. package/SpriteModal1/index.js +1 -1
  71. package/SpriteText.d.ts +45 -45
  72. package/SpriteText.js +163 -163
  73. package/SpriteText2.d.ts +47 -47
  74. package/SpriteText2.js +198 -198
  75. package/SpriteWithHtml.d.ts +7 -7
  76. package/SpriteWithHtml.js +44 -49
  77. package/Text3D/Text3D.d.ts +20 -20
  78. package/Text3D/Text3D.js +62 -62
  79. package/Text3D/fontController.d.ts +59 -59
  80. package/Text3D/fontController.js +199 -199
  81. package/Text3D/index.d.ts +1 -1
  82. package/Text3D/index.js +1 -1
  83. package/ThreeBase.d.ts +97 -81
  84. package/ThreeBase.js +613 -560
  85. package/ThreeMouse.d.ts +40 -40
  86. package/ThreeMouse.js +407 -407
  87. package/Transition.d.ts +40 -40
  88. package/Transition.js +210 -210
  89. package/Water/Water.d.ts +5 -0
  90. package/Water/Water.js +26 -0
  91. package/Water/waternormals.jpg +0 -0
  92. package/declare.d.ts +167 -0
  93. package/index.d.ts +1 -1
  94. package/index.js +2 -2
  95. package/keyContorls.d.ts +25 -25
  96. package/keyContorls.js +98 -98
  97. package/package.json +1 -1
  98. package/pass/bloom_pass.d.ts +2 -2
  99. package/pass/bloom_pass.js +99 -99
  100. package/pass/cover_pass.d.ts +2 -2
  101. package/pass/cover_pass.js +95 -95
  102. package/pass/frosted_glass_pass.d.ts +2 -0
  103. package/pass/frosted_glass_pass.js +275 -0
  104. package/pass/fsQuad.d.ts +9 -9
  105. package/pass/fsQuad.js +28 -28
  106. package/pass/glow_pass.d.ts +2 -2
  107. package/pass/glow_pass.js +310 -254
  108. package/pass/ssao_pass.d.ts +11 -0
  109. package/pass/ssao_pass.js +294 -0
  110. package/pass/stroke_pass.d.ts +2 -2
  111. package/pass/stroke_pass.js +199 -199
  112. package/shaders/FXAAShaderMaterial.d.ts +3 -3
  113. package/shaders/FXAAShaderMaterial.js +21 -21
  114. package/shaders/baseTextureToRenderShader.d.ts +2 -2
  115. package/shaders/baseTextureToRenderShader.js +14 -14
  116. package/shaders/copyShader.d.ts +3 -3
  117. package/shaders/copyShader.js +14 -14
  118. package/shaders.d.ts +5 -5
  119. package/shaders.js +42 -42
  120. package/threeLoader.d.ts +34 -34
  121. package/threeLoader.js +527 -527
  122. package/threeUtils.d.ts +52 -52
  123. package/threeUtils.js +330 -330
package/SpriteText.d.ts CHANGED
@@ -1,45 +1,45 @@
1
- import { Sprite } from "three";
2
- export default class SpriteText extends Sprite {
3
- constructor(text?: string, textHeight?: number, color?: `#${string}` | `rgba(${string})`);
4
- _text: string;
5
- _textHeight: number;
6
- _color: `#${string}` | `rgba(${string})`;
7
- _backgroundColor: boolean | `#${string}` | `rgba(${string})`;
8
- _padding: number;
9
- _borderWidth: number;
10
- _borderRadius: number;
11
- _borderColor: `#${string}` | `rgba(${string})`;
12
- _strokeWidth: number;
13
- _strokeColor: `#${string}` | `rgba(${string})`;
14
- _fontFace: string;
15
- _fontSize: number;
16
- _fontWeight: string;
17
- _canvas: HTMLCanvasElement;
18
- get text(): string;
19
- set text(text: string);
20
- get textHeight(): number;
21
- set textHeight(textHeight: number);
22
- get color(): `#${string}` | `rgba(${string})`;
23
- set color(color: `#${string}` | `rgba(${string})`);
24
- get backgroundColor(): boolean | `#${string}` | `rgba(${string})`;
25
- set backgroundColor(color: boolean | `#${string}` | `rgba(${string})`);
26
- get padding(): number;
27
- set padding(padding: number);
28
- get borderWidth(): number;
29
- set borderWidth(borderWidth: number);
30
- get borderRadius(): number;
31
- set borderRadius(borderRadius: number);
32
- get borderColor(): `#${string}` | `rgba(${string})`;
33
- set borderColor(borderColor: `#${string}` | `rgba(${string})`);
34
- get fontFace(): string;
35
- set fontFace(fontFace: string);
36
- get fontSize(): number;
37
- set fontSize(fontSize: number);
38
- get fontWeight(): string;
39
- set fontWeight(fontWeight: string);
40
- get strokeWidth(): number;
41
- set strokeWidth(strokeWidth: number);
42
- get strokeColor(): `#${string}` | `rgba(${string})`;
43
- set strokeColor(strokeColor: `#${string}` | `rgba(${string})`);
44
- _genCanvas(): void;
45
- }
1
+ import { Sprite } from "three";
2
+ export default class SpriteText extends Sprite {
3
+ constructor(text?: string, textHeight?: number, color?: `#${string}` | `rgba(${string})`);
4
+ _text: string;
5
+ _textHeight: number;
6
+ _color: `#${string}` | `rgba(${string})`;
7
+ _backgroundColor: boolean | `#${string}` | `rgba(${string})`;
8
+ _padding: number;
9
+ _borderWidth: number;
10
+ _borderRadius: number;
11
+ _borderColor: `#${string}` | `rgba(${string})`;
12
+ _strokeWidth: number;
13
+ _strokeColor: `#${string}` | `rgba(${string})`;
14
+ _fontFace: string;
15
+ _fontSize: number;
16
+ _fontWeight: string;
17
+ _canvas: HTMLCanvasElement;
18
+ get text(): string;
19
+ set text(text: string);
20
+ get textHeight(): number;
21
+ set textHeight(textHeight: number);
22
+ get color(): `#${string}` | `rgba(${string})`;
23
+ set color(color: `#${string}` | `rgba(${string})`);
24
+ get backgroundColor(): boolean | `#${string}` | `rgba(${string})`;
25
+ set backgroundColor(color: boolean | `#${string}` | `rgba(${string})`);
26
+ get padding(): number;
27
+ set padding(padding: number);
28
+ get borderWidth(): number;
29
+ set borderWidth(borderWidth: number);
30
+ get borderRadius(): number;
31
+ set borderRadius(borderRadius: number);
32
+ get borderColor(): `#${string}` | `rgba(${string})`;
33
+ set borderColor(borderColor: `#${string}` | `rgba(${string})`);
34
+ get fontFace(): string;
35
+ set fontFace(fontFace: string);
36
+ get fontSize(): number;
37
+ set fontSize(fontSize: number);
38
+ get fontWeight(): string;
39
+ set fontWeight(fontWeight: string);
40
+ get strokeWidth(): number;
41
+ set strokeWidth(strokeWidth: number);
42
+ get strokeColor(): `#${string}` | `rgba(${string})`;
43
+ set strokeColor(strokeColor: `#${string}` | `rgba(${string})`);
44
+ _genCanvas(): void;
45
+ }
package/SpriteText.js CHANGED
@@ -1,163 +1,163 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2023-05-03 02:42:07
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-05-03 02:53:00
6
- */
7
- import { Sprite, SpriteMaterial, Texture, LinearFilter } from "three";
8
- export default class SpriteText extends Sprite {
9
- constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
10
- super(new SpriteMaterial());
11
- this.material.alphaTest = 0.1;
12
- this._text = `${text}`;
13
- this._textHeight = textHeight;
14
- this._color = color;
15
- this._genCanvas();
16
- }
17
- _text = "";
18
- _textHeight = 10;
19
- _color = "#fffff";
20
- _backgroundColor = false; // no background color
21
- _padding = 0;
22
- _borderWidth = 0;
23
- _borderRadius = 0;
24
- _borderColor = "#fffff";
25
- _strokeWidth = 0;
26
- _strokeColor = "#fffff";
27
- _fontFace = 'Arial';
28
- _fontSize = 90; // defines text resolution
29
- _fontWeight = 'normal';
30
- _canvas = document.createElement('canvas');
31
- get text() { return this._text; }
32
- set text(text) { this._text = text; this._genCanvas(); }
33
- get textHeight() { return this._textHeight; }
34
- set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
35
- get color() { return this._color; }
36
- set color(color) { this._color = color; this._genCanvas(); }
37
- get backgroundColor() { return this._backgroundColor; }
38
- set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
39
- get padding() { return this._padding; }
40
- set padding(padding) { this._padding = padding; this._genCanvas(); }
41
- get borderWidth() { return this._borderWidth; }
42
- set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
43
- get borderRadius() { return this._borderRadius; }
44
- set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
45
- get borderColor() { return this._borderColor; }
46
- set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
47
- get fontFace() { return this._fontFace; }
48
- set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
49
- get fontSize() { return this._fontSize; }
50
- set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
51
- get fontWeight() { return this._fontWeight; }
52
- set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
53
- get strokeWidth() { return this._strokeWidth; }
54
- set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
55
- get strokeColor() { return this._strokeColor; }
56
- set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
57
- _genCanvas() {
58
- const canvas = this._canvas;
59
- const ctx = canvas.getContext('2d');
60
- const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
61
- const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
62
- const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
63
- const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
64
- const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
65
- const relPadding = padding.map(p => p * this.fontSize * 0.1);
66
- ; // padding in canvas units
67
- const lines = this.text.split('\n');
68
- const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
69
- ctx.font = font; // measure canvas with appropriate font
70
- const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
71
- const innerHeight = this.fontSize * lines.length;
72
- canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
73
- canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2;
74
- // paint border
75
- if (this.borderWidth) {
76
- ctx.strokeStyle = this.borderColor;
77
- if (relBorder[0]) { // left + right borders
78
- const hb = relBorder[0] / 2;
79
- ctx.lineWidth = relBorder[0];
80
- ctx.beginPath();
81
- ctx.moveTo(hb, relBorderRadius[0]);
82
- ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
83
- ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
84
- ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
85
- ctx.stroke();
86
- }
87
- if (relBorder[1]) { // top + bottom borders
88
- const hb = relBorder[1] / 2;
89
- ctx.lineWidth = relBorder[1];
90
- ctx.beginPath();
91
- ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
92
- ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
93
- ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - hb);
94
- ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - hb);
95
- ctx.stroke();
96
- }
97
- if (this.borderRadius) { // strike rounded corners
98
- const cornerWidth = Math.max(...relBorder);
99
- const hb = cornerWidth / 2;
100
- ctx.lineWidth = cornerWidth;
101
- ctx.beginPath();
102
- [
103
- !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
104
- !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
105
- !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, canvas.height - hb, canvas.height - relBorderRadius[2]],
106
- !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
107
- ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
108
- ctx.moveTo(x0, y0);
109
- ctx.quadraticCurveTo(x1, y0, x1, y1);
110
- });
111
- ctx.stroke();
112
- }
113
- }
114
- // paint background
115
- if (this.backgroundColor) {
116
- //@ts-ignore
117
- ctx.fillStyle = this.backgroundColor;
118
- if (!this.borderRadius) {
119
- ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
120
- }
121
- else { // fill with rounded corners
122
- ctx.beginPath();
123
- ctx.moveTo(relBorder[0], relBorderRadius[0]);
124
- [
125
- [relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]],
126
- [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]],
127
- [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]],
128
- [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]], // t
129
- ].forEach(([x0, x1, x2, y0, y1, y2]) => {
130
- ctx.quadraticCurveTo(x0, y0, x1, y1);
131
- ctx.lineTo(x2, y2);
132
- });
133
- ctx.closePath();
134
- ctx.fill();
135
- }
136
- }
137
- ctx.translate(...relBorder);
138
- ctx.translate(...relPadding);
139
- // paint text
140
- ctx.font = font; // Set font again after canvas is resized, as context properties are reset
141
- ctx.fillStyle = this.color;
142
- ctx.textBaseline = 'bottom';
143
- const drawTextStroke = this.strokeWidth > 0;
144
- if (drawTextStroke) {
145
- ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
146
- ctx.strokeStyle = this.strokeColor;
147
- }
148
- lines.forEach((line, index) => {
149
- const lineX = (innerWidth - ctx.measureText(line).width) / 2;
150
- const lineY = (index + 1) * this.fontSize;
151
- drawTextStroke && ctx.strokeText(line, lineX, lineY);
152
- ctx.fillText(line, lineX, lineY);
153
- });
154
- // Inject canvas into sprite
155
- if (this.material.map)
156
- this.material.map.dispose(); // gc previous texture
157
- const texture = this.material.map = new Texture(canvas);
158
- texture.minFilter = LinearFilter;
159
- texture.needsUpdate = true;
160
- const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
161
- this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
162
- }
163
- }
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-05-03 02:42:07
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-05-03 02:53:00
6
+ */
7
+ import { Sprite, SpriteMaterial, Texture, LinearFilter } from "three";
8
+ export default class SpriteText extends Sprite {
9
+ constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
10
+ super(new SpriteMaterial());
11
+ this.material.alphaTest = 0.1;
12
+ this._text = `${text}`;
13
+ this._textHeight = textHeight;
14
+ this._color = color;
15
+ this._genCanvas();
16
+ }
17
+ _text = "";
18
+ _textHeight = 10;
19
+ _color = "#fffff";
20
+ _backgroundColor = false; // no background color
21
+ _padding = 0;
22
+ _borderWidth = 0;
23
+ _borderRadius = 0;
24
+ _borderColor = "#fffff";
25
+ _strokeWidth = 0;
26
+ _strokeColor = "#fffff";
27
+ _fontFace = 'Arial';
28
+ _fontSize = 90; // defines text resolution
29
+ _fontWeight = 'normal';
30
+ _canvas = document.createElement('canvas');
31
+ get text() { return this._text; }
32
+ set text(text) { this._text = text; this._genCanvas(); }
33
+ get textHeight() { return this._textHeight; }
34
+ set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
35
+ get color() { return this._color; }
36
+ set color(color) { this._color = color; this._genCanvas(); }
37
+ get backgroundColor() { return this._backgroundColor; }
38
+ set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
39
+ get padding() { return this._padding; }
40
+ set padding(padding) { this._padding = padding; this._genCanvas(); }
41
+ get borderWidth() { return this._borderWidth; }
42
+ set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
43
+ get borderRadius() { return this._borderRadius; }
44
+ set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
45
+ get borderColor() { return this._borderColor; }
46
+ set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
47
+ get fontFace() { return this._fontFace; }
48
+ set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
49
+ get fontSize() { return this._fontSize; }
50
+ set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
51
+ get fontWeight() { return this._fontWeight; }
52
+ set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
53
+ get strokeWidth() { return this._strokeWidth; }
54
+ set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
55
+ get strokeColor() { return this._strokeColor; }
56
+ set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
57
+ _genCanvas() {
58
+ const canvas = this._canvas;
59
+ const ctx = canvas.getContext('2d');
60
+ const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
61
+ const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
62
+ const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
63
+ const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
64
+ const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
65
+ const relPadding = padding.map(p => p * this.fontSize * 0.1);
66
+ ; // padding in canvas units
67
+ const lines = this.text.split('\n');
68
+ const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
69
+ ctx.font = font; // measure canvas with appropriate font
70
+ const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
71
+ const innerHeight = this.fontSize * lines.length;
72
+ canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
73
+ canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2;
74
+ // paint border
75
+ if (this.borderWidth) {
76
+ ctx.strokeStyle = this.borderColor;
77
+ if (relBorder[0]) { // left + right borders
78
+ const hb = relBorder[0] / 2;
79
+ ctx.lineWidth = relBorder[0];
80
+ ctx.beginPath();
81
+ ctx.moveTo(hb, relBorderRadius[0]);
82
+ ctx.lineTo(hb, canvas.height - relBorderRadius[3]);
83
+ ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
84
+ ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2]);
85
+ ctx.stroke();
86
+ }
87
+ if (relBorder[1]) { // top + bottom borders
88
+ const hb = relBorder[1] / 2;
89
+ ctx.lineWidth = relBorder[1];
90
+ ctx.beginPath();
91
+ ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
92
+ ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
93
+ ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - hb);
94
+ ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - hb);
95
+ ctx.stroke();
96
+ }
97
+ if (this.borderRadius) { // strike rounded corners
98
+ const cornerWidth = Math.max(...relBorder);
99
+ const hb = cornerWidth / 2;
100
+ ctx.lineWidth = cornerWidth;
101
+ ctx.beginPath();
102
+ [
103
+ !!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
104
+ !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
105
+ !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, canvas.height - hb, canvas.height - relBorderRadius[2]],
106
+ !!relBorderRadius[3] && [relBorderRadius[3], hb, canvas.height - hb, canvas.height - relBorderRadius[3]]
107
+ ].filter(d => d).forEach(([x0, x1, y0, y1]) => {
108
+ ctx.moveTo(x0, y0);
109
+ ctx.quadraticCurveTo(x1, y0, x1, y1);
110
+ });
111
+ ctx.stroke();
112
+ }
113
+ }
114
+ // paint background
115
+ if (this.backgroundColor) {
116
+ //@ts-ignore
117
+ ctx.fillStyle = this.backgroundColor;
118
+ if (!this.borderRadius) {
119
+ ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2);
120
+ }
121
+ else { // fill with rounded corners
122
+ ctx.beginPath();
123
+ ctx.moveTo(relBorder[0], relBorderRadius[0]);
124
+ [
125
+ [relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
126
+ [canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
127
+ [canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
128
+ [relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]], // t
129
+ ].forEach(([x0, x1, x2, y0, y1, y2]) => {
130
+ ctx.quadraticCurveTo(x0, y0, x1, y1);
131
+ ctx.lineTo(x2, y2);
132
+ });
133
+ ctx.closePath();
134
+ ctx.fill();
135
+ }
136
+ }
137
+ ctx.translate(...relBorder);
138
+ ctx.translate(...relPadding);
139
+ // paint text
140
+ ctx.font = font; // Set font again after canvas is resized, as context properties are reset
141
+ ctx.fillStyle = this.color;
142
+ ctx.textBaseline = 'bottom';
143
+ const drawTextStroke = this.strokeWidth > 0;
144
+ if (drawTextStroke) {
145
+ ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
146
+ ctx.strokeStyle = this.strokeColor;
147
+ }
148
+ lines.forEach((line, index) => {
149
+ const lineX = (innerWidth - ctx.measureText(line).width) / 2;
150
+ const lineY = (index + 1) * this.fontSize;
151
+ drawTextStroke && ctx.strokeText(line, lineX, lineY);
152
+ ctx.fillText(line, lineX, lineY);
153
+ });
154
+ // Inject canvas into sprite
155
+ if (this.material.map)
156
+ this.material.map.dispose(); // gc previous texture
157
+ const texture = this.material.map = new Texture(canvas);
158
+ texture.minFilter = LinearFilter;
159
+ texture.needsUpdate = true;
160
+ const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
161
+ this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
162
+ }
163
+ }
package/SpriteText2.d.ts CHANGED
@@ -1,47 +1,47 @@
1
- import { Intersection, Raycaster, Sprite } from 'three';
2
- export default class SpriteText2 extends Sprite {
3
- constructor(text?: string, textHeight?: number, color?: `rgb(${string})` | `rgba(${string})` | `#${string}`);
4
- _text: string;
5
- _textHeight: number;
6
- _color: `rgb(${string})` | `rgba(${string})` | `#${string}`;
7
- _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false;
8
- _padding: number;
9
- _borderWidth: number;
10
- _borderRadius: number;
11
- _borderColor: string;
12
- _strokeWidth: number;
13
- _strokeColor: string;
14
- _fontFace: string;
15
- _fontSize: number;
16
- _fontWeight: string;
17
- _canvas: HTMLCanvasElement;
18
- get text(): string;
19
- set text(text: string);
20
- get textHeight(): number;
21
- set textHeight(textHeight: number);
22
- get color(): `#${string}` | `rgba(${string})` | `rgb(${string})`;
23
- set color(color: `#${string}` | `rgba(${string})` | `rgb(${string})`);
24
- get backgroundColor(): false | `#${string}` | `rgba(${string})` | `rgb(${string})`;
25
- set backgroundColor(color: false | `#${string}` | `rgba(${string})` | `rgb(${string})`);
26
- get padding(): number;
27
- set padding(padding: number);
28
- get borderWidth(): number;
29
- set borderWidth(borderWidth: number);
30
- get borderRadius(): number;
31
- set borderRadius(borderRadius: number);
32
- get borderColor(): string;
33
- set borderColor(borderColor: string);
34
- get fontFace(): string;
35
- set fontFace(fontFace: string);
36
- get fontSize(): number;
37
- set fontSize(fontSize: number);
38
- get fontWeight(): string;
39
- set fontWeight(fontWeight: string);
40
- get strokeWidth(): number;
41
- set strokeWidth(strokeWidth: number);
42
- get strokeColor(): string;
43
- set strokeColor(strokeColor: string);
44
- _genCanvas(): void;
45
- raycast(raycaster: Raycaster, intersects: Intersection[]): void;
46
- copy(source: SpriteText2): this;
47
- }
1
+ import { Intersection, Raycaster, Sprite } from 'three';
2
+ export default class SpriteText2 extends Sprite {
3
+ constructor(text?: string, textHeight?: number, color?: `rgb(${string})` | `rgba(${string})` | `#${string}`);
4
+ _text: string;
5
+ _textHeight: number;
6
+ _color: `rgb(${string})` | `rgba(${string})` | `#${string}`;
7
+ _backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false;
8
+ _padding: number;
9
+ _borderWidth: number;
10
+ _borderRadius: number;
11
+ _borderColor: string;
12
+ _strokeWidth: number;
13
+ _strokeColor: string;
14
+ _fontFace: string;
15
+ _fontSize: number;
16
+ _fontWeight: string;
17
+ _canvas: HTMLCanvasElement;
18
+ get text(): string;
19
+ set text(text: string);
20
+ get textHeight(): number;
21
+ set textHeight(textHeight: number);
22
+ get color(): `#${string}` | `rgba(${string})` | `rgb(${string})`;
23
+ set color(color: `#${string}` | `rgba(${string})` | `rgb(${string})`);
24
+ get backgroundColor(): false | `#${string}` | `rgba(${string})` | `rgb(${string})`;
25
+ set backgroundColor(color: false | `#${string}` | `rgba(${string})` | `rgb(${string})`);
26
+ get padding(): number;
27
+ set padding(padding: number);
28
+ get borderWidth(): number;
29
+ set borderWidth(borderWidth: number);
30
+ get borderRadius(): number;
31
+ set borderRadius(borderRadius: number);
32
+ get borderColor(): string;
33
+ set borderColor(borderColor: string);
34
+ get fontFace(): string;
35
+ set fontFace(fontFace: string);
36
+ get fontSize(): number;
37
+ set fontSize(fontSize: number);
38
+ get fontWeight(): string;
39
+ set fontWeight(fontWeight: string);
40
+ get strokeWidth(): number;
41
+ set strokeWidth(strokeWidth: number);
42
+ get strokeColor(): string;
43
+ set strokeColor(strokeColor: string);
44
+ _genCanvas(): void;
45
+ raycast(raycaster: Raycaster, intersects: Intersection[]): void;
46
+ copy(source: SpriteText2): this;
47
+ }