three-base 2.0.129 → 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.
- package/ApngTexture.d.ts +13 -13
- package/ApngTexture.js +61 -61
- package/ApngTextureManage.d.ts +18 -18
- package/ApngTextureManage.js +87 -87
- package/DirectionalLight.d.ts +6 -0
- package/DirectionalLight.js +68 -0
- package/EventMesh.d.ts +18 -18
- package/EventMesh.js +59 -59
- package/ExtrudeMesh.d.ts +112 -112
- package/ExtrudeMesh.js +366 -366
- package/FPScontrol.d.ts +71 -50
- package/FPScontrol.js +505 -232
- package/Fire/Fire.d.ts +28 -28
- package/Fire/Fire.js +79 -79
- package/Fire/FireGromtry.d.ts +9 -9
- package/Fire/FireGromtry.js +40 -40
- package/Fire/FireMaterial.d.ts +28 -28
- package/Fire/FireMaterial.js +32 -32
- package/Fire/index.d.ts +1 -1
- package/Fire/index.js +1 -1
- package/Grass/Grass.d.ts +8 -8
- package/Grass/Grass.js +38 -38
- package/Grass/index.d.ts +1 -1
- package/Grass/index.js +1 -1
- package/Ground1/Ground1.d.ts +11 -11
- package/Ground1/Ground1.js +54 -54
- package/Ground1/index.d.ts +1 -1
- package/Ground1/index.js +1 -1
- package/InstancedMeshBase.d.ts +39 -39
- package/InstancedMeshBase.js +293 -293
- package/KeyFrameAnimation.d.ts +25 -25
- package/KeyFrameAnimation.js +78 -78
- package/MeshBase.d.ts +35 -35
- package/MeshBase.js +223 -223
- package/Mirror.d.ts +25 -25
- package/Mirror.js +139 -139
- package/PipeMesh/PathGeometry.d.ts +44 -44
- package/PipeMesh/PathGeometry.js +300 -300
- package/PipeMesh/PathPoint.d.ts +17 -17
- package/PipeMesh/PathPoint.js +31 -31
- package/PipeMesh/PathPointList.d.ts +31 -31
- package/PipeMesh/PathPointList.js +208 -208
- package/PipeMesh/PathTubeGeometry.d.ts +25 -25
- package/PipeMesh/PathTubeGeometry.js +130 -130
- package/PipeMesh/PipeMesh.d.ts +25 -25
- package/PipeMesh/PipeMesh.js +63 -63
- package/PipeMesh/index.d.ts +1 -1
- package/PipeMesh/index.js +1 -1
- package/PlaneModal1/PlaneModal1.d.ts +31 -31
- package/PlaneModal1/PlaneModal1.js +105 -105
- package/PlaneModal1/index.d.ts +1 -1
- package/PlaneModal1/index.js +1 -1
- package/PlaneText.d.ts +39 -39
- package/PlaneText.js +30 -30
- package/PlaneWithHtml.d.ts +11 -11
- package/PlaneWithHtml.js +63 -68
- package/PointLight/PointLight.d.ts +14 -13
- package/PointLight/PointLight.js +70 -64
- package/PointLight/index.d.ts +1 -1
- package/PointLight/index.js +1 -1
- package/Sky/Sky.d.ts +9 -9
- package/Sky/Sky.js +22 -22
- package/Sky/index.d.ts +1 -1
- package/Sky/index.js +1 -1
- package/SpotLight.d.ts +6 -0
- package/SpotLight.js +72 -0
- package/SpriteModal1/SpriteModal1.d.ts +30 -30
- package/SpriteModal1/SpriteModal1.js +110 -110
- package/SpriteModal1/index.d.ts +1 -1
- package/SpriteModal1/index.js +1 -1
- package/SpriteText.d.ts +45 -45
- package/SpriteText.js +163 -163
- package/SpriteText2.d.ts +47 -47
- package/SpriteText2.js +198 -198
- package/SpriteWithHtml.d.ts +7 -7
- package/SpriteWithHtml.js +44 -49
- package/Text3D/Text3D.d.ts +20 -20
- package/Text3D/Text3D.js +62 -62
- package/Text3D/fontController.d.ts +59 -59
- package/Text3D/fontController.js +199 -199
- package/Text3D/index.d.ts +1 -1
- package/Text3D/index.js +1 -1
- package/ThreeBase.d.ts +97 -81
- package/ThreeBase.js +613 -559
- package/ThreeMouse.d.ts +40 -40
- package/ThreeMouse.js +407 -409
- package/Transition.d.ts +40 -40
- package/Transition.js +210 -207
- package/Water/Water.d.ts +5 -0
- package/Water/Water.js +26 -0
- package/Water/waternormals.jpg +0 -0
- package/declare.d.ts +167 -0
- package/index.d.ts +1 -1
- package/index.js +2 -2
- package/keyContorls.d.ts +25 -25
- package/keyContorls.js +98 -98
- package/package.json +1 -1
- package/pass/bloom_pass.d.ts +2 -2
- package/pass/bloom_pass.js +99 -99
- package/pass/cover_pass.d.ts +2 -2
- package/pass/cover_pass.js +95 -95
- package/pass/frosted_glass_pass.d.ts +2 -0
- package/pass/frosted_glass_pass.js +275 -0
- package/pass/fsQuad.d.ts +9 -9
- package/pass/fsQuad.js +28 -28
- package/pass/glow_pass.d.ts +2 -2
- package/pass/glow_pass.js +310 -254
- package/pass/ssao_pass.d.ts +11 -0
- package/pass/ssao_pass.js +294 -0
- package/pass/stroke_pass.d.ts +2 -2
- package/pass/stroke_pass.js +199 -199
- package/shaders/FXAAShaderMaterial.d.ts +3 -3
- package/shaders/FXAAShaderMaterial.js +21 -21
- package/shaders/baseTextureToRenderShader.d.ts +2 -2
- package/shaders/baseTextureToRenderShader.js +14 -14
- package/shaders/copyShader.d.ts +3 -3
- package/shaders/copyShader.js +14 -14
- package/shaders.d.ts +5 -5
- package/shaders.js +42 -42
- package/threeLoader.d.ts +34 -34
- package/threeLoader.js +527 -527
- package/threeUtils.d.ts +52 -52
- 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
|
+
}
|