three-base 1.0.77 → 1.0.79
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/index.js +3 -1
- package/index.ts +4 -1
- package/lib/ExtrudeMesh.js +1 -0
- package/lib/ExtrudeMesh.ts +2 -0
- package/lib/PlaneText.d.ts +1 -1
- package/lib/PlaneWithHtml.d.ts +3 -2
- package/lib/PlaneWithHtml.js +19 -14
- package/lib/PlaneWithHtml.ts +23 -14
- package/lib/{PointLight.d.ts → PointLight/PointLight.d.ts} +2 -2
- package/lib/PointLight/PointLight.js +63 -0
- package/lib/PointLight/PointLight.ts +74 -0
- package/lib/PointLight/pointLight_map.png +0 -0
- package/lib/SpriteText2.d.ts +47 -0
- package/lib/SpriteText2.js +197 -0
- package/lib/SpriteText2.ts +236 -0
- package/lib/Text3D/Text3D.js +1 -0
- package/lib/Text3D/Text3D.ts +1 -0
- package/lib/Text3D/fontController.ts +2 -2
- package/lib/planeModal1/PlaneModal1.d.ts +0 -1
- package/lib/planeModal1/PlaneModal1.js +1 -1
- package/lib/planeModal1/PlaneModal1.ts +1 -2
- package/lib/spriteModal1/SpriteModal1.d.ts +0 -1
- package/lib/spriteModal1/SpriteModal1.js +1 -1
- package/lib/spriteModal1/SpriteModal1.ts +1 -2
- package/package.json +1 -1
- package/lib/PointLight.js +0 -64
- package/lib/PointLight.ts +0 -78
- package/lib/index.d.ts +0 -22
package/index.js
CHANGED
|
@@ -9,7 +9,7 @@ export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
|
|
|
9
9
|
//实例模型组对象
|
|
10
10
|
export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
|
|
11
11
|
//点光源
|
|
12
|
-
export { default as PointLight } from "./lib/PointLight";
|
|
12
|
+
export { default as PointLight } from "./lib/PointLight/PointLight";
|
|
13
13
|
//天空球
|
|
14
14
|
export { default as Sky } from "./lib/Sky/Sky";
|
|
15
15
|
//键盘控制器
|
|
@@ -26,6 +26,8 @@ export { default as FPScontrol } from "./lib/FPScontrol";
|
|
|
26
26
|
export { default as PlaneText } from "./lib/PlaneText";
|
|
27
27
|
// 精灵文字
|
|
28
28
|
export { default as SpriteText } from "three-spritetext";
|
|
29
|
+
// 精灵文字样式2
|
|
30
|
+
export { default as SpriteText2 } from "./lib/SpriteText2";
|
|
29
31
|
//精灵文本框
|
|
30
32
|
export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
|
|
31
33
|
//平面文本框
|
package/index.ts
CHANGED
|
@@ -19,7 +19,7 @@ export type { Keyframe } from "./lib/KeyFrameAnimation";
|
|
|
19
19
|
export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
|
|
20
20
|
|
|
21
21
|
//点光源
|
|
22
|
-
export { default as PointLight } from "./lib/PointLight";
|
|
22
|
+
export { default as PointLight } from "./lib/PointLight/PointLight";
|
|
23
23
|
|
|
24
24
|
//天空球
|
|
25
25
|
export { default as Sky } from "./lib/Sky/Sky";
|
|
@@ -45,6 +45,9 @@ export { default as PlaneText } from "./lib/PlaneText";
|
|
|
45
45
|
// 精灵文字
|
|
46
46
|
export { default as SpriteText } from "three-spritetext";
|
|
47
47
|
|
|
48
|
+
// 精灵文字样式2
|
|
49
|
+
export { default as SpriteText2 } from "./lib/SpriteText2";
|
|
50
|
+
|
|
48
51
|
//精灵文本框
|
|
49
52
|
export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
|
|
50
53
|
|
package/lib/ExtrudeMesh.js
CHANGED
package/lib/ExtrudeMesh.ts
CHANGED
package/lib/PlaneText.d.ts
CHANGED
|
@@ -32,6 +32,6 @@ export default class PlaneText extends Mesh {
|
|
|
32
32
|
materials: any;
|
|
33
33
|
textures: any;
|
|
34
34
|
images: any;
|
|
35
|
-
}) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | import("three").SpriteMaterial | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((
|
|
35
|
+
}) => any) | ((event: import("three").Event) => void) | import("three").Vector2 | import("three").SpriteMaterial | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((source: SpriteText) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void);
|
|
36
36
|
}
|
|
37
37
|
export {};
|
package/lib/PlaneWithHtml.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
|
|
2
2
|
export default class PlaneWithHtml extends Mesh {
|
|
3
|
-
constructor(html?: string);
|
|
3
|
+
constructor(html?: string, backgroundColor?: `#${string}`);
|
|
4
|
+
visible: boolean;
|
|
4
5
|
size: Vector2;
|
|
5
6
|
geometry: PlaneGeometry;
|
|
6
7
|
material: MeshBasicMaterial;
|
|
7
8
|
div: HTMLDivElement;
|
|
8
9
|
setGeoSize(width: number, height: number): void;
|
|
9
|
-
setHtml(html?: string): Promise<void>;
|
|
10
|
+
setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
|
|
10
11
|
}
|
package/lib/PlaneWithHtml.js
CHANGED
|
@@ -10,10 +10,11 @@ import { degToRad } from "three/src/math/MathUtils";
|
|
|
10
10
|
import threeLoader from "./threeLoader";
|
|
11
11
|
// html 文本面板
|
|
12
12
|
export default class PlaneWithHtml extends Mesh {
|
|
13
|
-
constructor(html = "") {
|
|
13
|
+
constructor(html = "", backgroundColor = "#00000000") {
|
|
14
14
|
super();
|
|
15
|
-
this.setHtml(html);
|
|
15
|
+
this.setHtml(html, backgroundColor);
|
|
16
16
|
}
|
|
17
|
+
visible = false;
|
|
17
18
|
size = new Vector2(10, 10);
|
|
18
19
|
geometry = (() => {
|
|
19
20
|
const geometry = new PlaneGeometry(10, 10, 1, 1);
|
|
@@ -30,7 +31,6 @@ export default class PlaneWithHtml extends Mesh {
|
|
|
30
31
|
div.style.top = "100%";
|
|
31
32
|
div.style.left = "100%";
|
|
32
33
|
div.style.pointerEvents = "none";
|
|
33
|
-
// div.style.border = "1px dashed #ff0000";
|
|
34
34
|
div.style.userSelect = "none";
|
|
35
35
|
div.style.lineHeight = "1";
|
|
36
36
|
div.style.whiteSpace = "nowrap";
|
|
@@ -44,19 +44,24 @@ export default class PlaneWithHtml extends Mesh {
|
|
|
44
44
|
geometry.rotateX(degToRad(-90));
|
|
45
45
|
this.geometry = geometry;
|
|
46
46
|
}
|
|
47
|
-
async setHtml(html = "") {
|
|
47
|
+
async setHtml(html = "", backgroundColor = "#00000000") {
|
|
48
48
|
this.div.innerHTML = html;
|
|
49
49
|
document.body.appendChild(this.div);
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
50
|
+
await new Promise((resolve, reject) => {
|
|
51
|
+
html2canvas(this.div, {
|
|
52
|
+
backgroundColor,
|
|
53
|
+
removeContainer: true
|
|
54
|
+
}).then(async (canvas) => {
|
|
55
|
+
this.setGeoSize(canvas.width, canvas.height);
|
|
56
|
+
this.material.map = new CanvasTexture(canvas);
|
|
57
|
+
this.material.map.anisotropy = threeLoader.anisotropy;
|
|
58
|
+
this.material.needsUpdate = true;
|
|
59
|
+
this.visible = true;
|
|
60
|
+
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
61
|
+
this.div.remove();
|
|
62
|
+
resolve();
|
|
63
|
+
});
|
|
60
64
|
});
|
|
65
|
+
this.dispatchEvent({ type: "loaded" });
|
|
61
66
|
}
|
|
62
67
|
}
|
package/lib/PlaneWithHtml.ts
CHANGED
|
@@ -14,11 +14,13 @@ import threeLoader from "./threeLoader";
|
|
|
14
14
|
// html 文本面板
|
|
15
15
|
export default class PlaneWithHtml extends Mesh {
|
|
16
16
|
|
|
17
|
-
constructor(html: string = "") {
|
|
17
|
+
constructor(html: string = "", backgroundColor: `#${string}` = "#00000000") {
|
|
18
18
|
super();
|
|
19
|
-
this.setHtml(html);
|
|
19
|
+
this.setHtml(html, backgroundColor);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
visible = false;
|
|
23
|
+
|
|
22
24
|
size = new Vector2(10, 10);
|
|
23
25
|
|
|
24
26
|
geometry = (() => {
|
|
@@ -38,7 +40,6 @@ export default class PlaneWithHtml extends Mesh {
|
|
|
38
40
|
div.style.top = "100%";
|
|
39
41
|
div.style.left = "100%";
|
|
40
42
|
div.style.pointerEvents = "none";
|
|
41
|
-
// div.style.border = "1px dashed #ff0000";
|
|
42
43
|
div.style.userSelect = "none";
|
|
43
44
|
div.style.lineHeight = "1";
|
|
44
45
|
div.style.whiteSpace = "nowrap";
|
|
@@ -54,21 +55,29 @@ export default class PlaneWithHtml extends Mesh {
|
|
|
54
55
|
this.geometry = geometry;
|
|
55
56
|
}
|
|
56
57
|
|
|
57
|
-
async setHtml(html: string = "") {
|
|
58
|
+
async setHtml(html: string = "", backgroundColor: `#${string}` = "#00000000") {
|
|
58
59
|
this.div.innerHTML = html;
|
|
59
60
|
document.body.appendChild(this.div);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
61
|
+
|
|
62
|
+
await new Promise<void>((resolve, reject) => {
|
|
63
|
+
|
|
64
|
+
html2canvas(this.div, {
|
|
65
|
+
backgroundColor,
|
|
66
|
+
removeContainer: true
|
|
67
|
+
}).then(async (canvas) => {
|
|
68
|
+
this.setGeoSize(canvas.width, canvas.height);
|
|
69
|
+
this.material.map = new CanvasTexture(canvas);
|
|
70
|
+
this.material.map.anisotropy = threeLoader.anisotropy;
|
|
71
|
+
this.material.needsUpdate = true;
|
|
72
|
+
this.visible = true;
|
|
73
|
+
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
74
|
+
this.div.remove();
|
|
75
|
+
resolve();
|
|
76
|
+
});
|
|
77
|
+
|
|
70
78
|
});
|
|
71
79
|
|
|
80
|
+
this.dispatchEvent({ type: "loaded" });
|
|
72
81
|
}
|
|
73
82
|
|
|
74
83
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PointLight as THREEPointLight } from "three";
|
|
1
|
+
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
2
2
|
import threeSpritetext from "three-spritetext";
|
|
3
3
|
/**
|
|
4
4
|
* 点光源
|
|
@@ -8,6 +8,6 @@ import threeSpritetext from "three-spritetext";
|
|
|
8
8
|
*/
|
|
9
9
|
export default class PointLight extends THREEPointLight {
|
|
10
10
|
constructor(color?: string, intensity?: number, distance?: number, decay?: number);
|
|
11
|
-
|
|
11
|
+
pointLinghtHelper: Sprite;
|
|
12
12
|
label: threeSpritetext;
|
|
13
13
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2022-05-18 16:02:55
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-04-21 17:22:59
|
|
6
|
+
*/
|
|
7
|
+
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
8
|
+
import threeSpritetext from "three-spritetext";
|
|
9
|
+
import threeLoader from "../threeLoader";
|
|
10
|
+
import threeUtils from "../threeUtils";
|
|
11
|
+
import pointLight_mapPNG from "./pointLight_map.png";
|
|
12
|
+
/**
|
|
13
|
+
* 点光源
|
|
14
|
+
* @export
|
|
15
|
+
* @class PointLight
|
|
16
|
+
* @extends {THREEPointLight}
|
|
17
|
+
*/
|
|
18
|
+
export default class PointLight extends THREEPointLight {
|
|
19
|
+
constructor(color = "#fff", intensity, distance, decay) {
|
|
20
|
+
super(color, intensity, distance, decay);
|
|
21
|
+
}
|
|
22
|
+
// 灯光辅助器
|
|
23
|
+
pointLinghtHelper = threeUtils.isDev && (() => {
|
|
24
|
+
const pointLinghtHelper = new Sprite();
|
|
25
|
+
pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
|
|
26
|
+
pointLinghtHelper.material.color = this.color;
|
|
27
|
+
pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
|
|
28
|
+
pointLinghtHelper.material.sizeAttenuation = false;
|
|
29
|
+
pointLinghtHelper.userData = {
|
|
30
|
+
cursor: "pointer"
|
|
31
|
+
};
|
|
32
|
+
pointLinghtHelper.addEventListener("mouseenter", () => {
|
|
33
|
+
if (this.label) {
|
|
34
|
+
this.label.visible = true;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
pointLinghtHelper.addEventListener("mouseleave", () => {
|
|
38
|
+
if (this.label) {
|
|
39
|
+
this.label.visible = false;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
this.add(pointLinghtHelper);
|
|
43
|
+
return pointLinghtHelper;
|
|
44
|
+
})();
|
|
45
|
+
label = threeUtils.isDev && (() => {
|
|
46
|
+
const label = new threeSpritetext("点光源\n\n\n");
|
|
47
|
+
label.renderOrder = Infinity;
|
|
48
|
+
// label.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
|
49
|
+
label.padding = 4;
|
|
50
|
+
label.strokeColor = "#333";
|
|
51
|
+
label.strokeWidth = 2;
|
|
52
|
+
// label.borderRadius = 4;
|
|
53
|
+
// label.borderWidth = 1;
|
|
54
|
+
label.position.set(0, 0, 0);
|
|
55
|
+
label.visible = false;
|
|
56
|
+
label.material.color = this.color;
|
|
57
|
+
label.material.depthTest = false;
|
|
58
|
+
label.material.sizeAttenuation = false;
|
|
59
|
+
label.scale.multiplyScalar(0.002);
|
|
60
|
+
this.add(label);
|
|
61
|
+
return label;
|
|
62
|
+
})();
|
|
63
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2022-05-18 16:02:55
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-04-21 17:22:59
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
9
|
+
import threeSpritetext from "three-spritetext";
|
|
10
|
+
import threeLoader from "../threeLoader";
|
|
11
|
+
import threeUtils from "../threeUtils";
|
|
12
|
+
import pointLight_mapPNG from "./pointLight_map.png";
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* 点光源
|
|
17
|
+
* @export
|
|
18
|
+
* @class PointLight
|
|
19
|
+
* @extends {THREEPointLight}
|
|
20
|
+
*/
|
|
21
|
+
export default class PointLight extends THREEPointLight {
|
|
22
|
+
|
|
23
|
+
constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
|
|
24
|
+
super(color, intensity, distance, decay);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// 灯光辅助器
|
|
28
|
+
pointLinghtHelper = threeUtils.isDev && (() => {
|
|
29
|
+
const pointLinghtHelper = new Sprite();
|
|
30
|
+
pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
|
|
31
|
+
pointLinghtHelper.material.color = this.color;
|
|
32
|
+
pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
|
|
33
|
+
pointLinghtHelper.material.sizeAttenuation = false;
|
|
34
|
+
|
|
35
|
+
pointLinghtHelper.userData = {
|
|
36
|
+
cursor: "pointer"
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
pointLinghtHelper.addEventListener("mouseenter", () => {
|
|
40
|
+
if (this.label) {
|
|
41
|
+
this.label.visible = true;
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
pointLinghtHelper.addEventListener("mouseleave", () => {
|
|
46
|
+
if (this.label) {
|
|
47
|
+
this.label.visible = false;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
this.add(pointLinghtHelper);
|
|
52
|
+
return pointLinghtHelper;
|
|
53
|
+
})();
|
|
54
|
+
|
|
55
|
+
label = threeUtils.isDev && (() => {
|
|
56
|
+
const label = new threeSpritetext("点光源\n\n\n");
|
|
57
|
+
label.renderOrder = Infinity;
|
|
58
|
+
// label.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
|
59
|
+
label.padding = 4;
|
|
60
|
+
label.strokeColor = "#333";
|
|
61
|
+
label.strokeWidth = 2;
|
|
62
|
+
// label.borderRadius = 4;
|
|
63
|
+
// label.borderWidth = 1;
|
|
64
|
+
label.position.set(0, 0, 0);
|
|
65
|
+
label.visible = false;
|
|
66
|
+
label.material.color = this.color;
|
|
67
|
+
label.material.depthTest = false;
|
|
68
|
+
label.material.sizeAttenuation = false;
|
|
69
|
+
label.scale.multiplyScalar(0.002);
|
|
70
|
+
this.add(label);
|
|
71
|
+
return label;
|
|
72
|
+
})();
|
|
73
|
+
|
|
74
|
+
}
|
|
Binary file
|
|
@@ -0,0 +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(): `rgb(${string})` | `rgba(${string})` | `#${string}`;
|
|
23
|
+
set color(color: `rgb(${string})` | `rgba(${string})` | `#${string}`);
|
|
24
|
+
get backgroundColor(): false | `rgb(${string})` | `rgba(${string})` | `#${string}`;
|
|
25
|
+
set backgroundColor(color: false | `rgb(${string})` | `rgba(${string})` | `#${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: any): this;
|
|
47
|
+
}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2023-04-24 15:31:02
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-04-24 16:18:47
|
|
6
|
+
*/
|
|
7
|
+
import { LinearFilter, Sprite, Texture } from 'three';
|
|
8
|
+
// 带箭头的精灵文字
|
|
9
|
+
export default class SpriteText2 extends Sprite {
|
|
10
|
+
constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
|
|
11
|
+
super();
|
|
12
|
+
this._text = `${text}`;
|
|
13
|
+
this._textHeight = textHeight;
|
|
14
|
+
this._color = color;
|
|
15
|
+
this._backgroundColor = false; // no background color
|
|
16
|
+
this._padding = 0;
|
|
17
|
+
this._borderWidth = 0;
|
|
18
|
+
this._borderRadius = 0;
|
|
19
|
+
this._borderColor = 'white';
|
|
20
|
+
this._strokeWidth = 0;
|
|
21
|
+
this._strokeColor = 'white';
|
|
22
|
+
this._fontFace = 'Arial';
|
|
23
|
+
this._fontSize = 90; // defines text resolution
|
|
24
|
+
this._fontWeight = 'normal';
|
|
25
|
+
this._genCanvas();
|
|
26
|
+
}
|
|
27
|
+
_text = "";
|
|
28
|
+
_textHeight = 0;
|
|
29
|
+
_color = "#ffffff";
|
|
30
|
+
_backgroundColor = false; // no background color
|
|
31
|
+
_padding = 0;
|
|
32
|
+
_borderWidth = 0;
|
|
33
|
+
_borderRadius = 0;
|
|
34
|
+
_borderColor = 'white';
|
|
35
|
+
_strokeWidth = 0;
|
|
36
|
+
_strokeColor = 'white';
|
|
37
|
+
_fontFace = 'Arial';
|
|
38
|
+
_fontSize = 90; // defines text resolution
|
|
39
|
+
_fontWeight = 'normal';
|
|
40
|
+
_canvas = document.createElement('canvas');
|
|
41
|
+
get text() { return this._text; }
|
|
42
|
+
set text(text) { this._text = text; this._genCanvas(); }
|
|
43
|
+
get textHeight() { return this._textHeight; }
|
|
44
|
+
set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
|
|
45
|
+
get color() { return this._color; }
|
|
46
|
+
set color(color) { this._color = color; this._genCanvas(); }
|
|
47
|
+
get backgroundColor() { return this._backgroundColor; }
|
|
48
|
+
set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
|
|
49
|
+
get padding() { return this._padding; }
|
|
50
|
+
set padding(padding) { this._padding = padding; this._genCanvas(); }
|
|
51
|
+
get borderWidth() { return this._borderWidth; }
|
|
52
|
+
set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
|
|
53
|
+
get borderRadius() { return this._borderRadius; }
|
|
54
|
+
set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
|
|
55
|
+
get borderColor() { return this._borderColor; }
|
|
56
|
+
set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
|
|
57
|
+
get fontFace() { return this._fontFace; }
|
|
58
|
+
set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
|
|
59
|
+
get fontSize() { return this._fontSize; }
|
|
60
|
+
set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
|
|
61
|
+
get fontWeight() { return this._fontWeight; }
|
|
62
|
+
set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
|
|
63
|
+
get strokeWidth() { return this._strokeWidth; }
|
|
64
|
+
set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
|
|
65
|
+
get strokeColor() { return this._strokeColor; }
|
|
66
|
+
set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
|
|
67
|
+
_genCanvas() {
|
|
68
|
+
const canvas = this._canvas;
|
|
69
|
+
const ctx = canvas.getContext('2d');
|
|
70
|
+
const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
|
|
71
|
+
const relBorder = border.map(b => b * this.fontSize * 0.1); // border in canvas units
|
|
72
|
+
const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
|
|
73
|
+
const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
|
|
74
|
+
const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
|
|
75
|
+
const relPadding = padding.map(p => p * this.fontSize * 0.1); // padding in canvas units
|
|
76
|
+
const lines = this.text.split('\n');
|
|
77
|
+
const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
|
|
78
|
+
ctx.font = font; // measure canvas with appropriate font
|
|
79
|
+
const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
|
|
80
|
+
const innerHeight = this.fontSize * lines.length;
|
|
81
|
+
canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
|
|
82
|
+
canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
|
|
83
|
+
// paint border
|
|
84
|
+
if (this.borderWidth) {
|
|
85
|
+
ctx.strokeStyle = this.borderColor;
|
|
86
|
+
if (relBorder[0]) { // left + right borders
|
|
87
|
+
const hb = relBorder[0] / 2;
|
|
88
|
+
ctx.lineWidth = relBorder[0];
|
|
89
|
+
ctx.beginPath();
|
|
90
|
+
ctx.moveTo(hb, relBorderRadius[0]);
|
|
91
|
+
ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
|
|
92
|
+
ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
|
|
93
|
+
ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
|
|
94
|
+
ctx.stroke();
|
|
95
|
+
}
|
|
96
|
+
if (relBorder[1]) { // top + bottom borders
|
|
97
|
+
const hb = relBorder[1] / 2;
|
|
98
|
+
ctx.lineWidth = relBorder[1];
|
|
99
|
+
ctx.beginPath();
|
|
100
|
+
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
|
|
101
|
+
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
|
|
102
|
+
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
|
|
103
|
+
ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
|
|
104
|
+
ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
|
|
105
|
+
ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
|
|
106
|
+
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
|
|
107
|
+
ctx.stroke();
|
|
108
|
+
}
|
|
109
|
+
if (this.borderRadius) { // strike rounded corners
|
|
110
|
+
const cornerWidth = Math.max(...relBorder);
|
|
111
|
+
const hb = cornerWidth / 2;
|
|
112
|
+
ctx.lineWidth = cornerWidth;
|
|
113
|
+
ctx.beginPath();
|
|
114
|
+
[
|
|
115
|
+
!!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
|
|
116
|
+
!!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
|
|
117
|
+
!!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
|
|
118
|
+
!!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
|
|
119
|
+
].filter(d => d).forEach(([x0, x1, y0, y1]) => {
|
|
120
|
+
ctx.moveTo(x0, y0);
|
|
121
|
+
ctx.quadraticCurveTo(x1, y0, x1, y1);
|
|
122
|
+
});
|
|
123
|
+
ctx.stroke();
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
// paint background
|
|
127
|
+
if (this.backgroundColor) {
|
|
128
|
+
ctx.fillStyle = this.backgroundColor;
|
|
129
|
+
if (!this.borderRadius) {
|
|
130
|
+
ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
|
|
131
|
+
}
|
|
132
|
+
else { // fill with rounded corners
|
|
133
|
+
ctx.beginPath();
|
|
134
|
+
ctx.moveTo(relBorder[0], relBorderRadius[0]);
|
|
135
|
+
ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
|
|
136
|
+
ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
|
|
137
|
+
ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
|
|
138
|
+
ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
|
|
139
|
+
ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
|
|
140
|
+
ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
|
|
141
|
+
ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
|
|
142
|
+
ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
|
|
143
|
+
ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
|
|
144
|
+
ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
|
|
145
|
+
ctx.closePath();
|
|
146
|
+
ctx.fill();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
ctx.translate(relBorder[0], relBorder[1]);
|
|
150
|
+
ctx.translate(relPadding[0], relPadding[0]);
|
|
151
|
+
// paint text
|
|
152
|
+
ctx.font = font; // Set font again after canvas is resized, as context properties are reset
|
|
153
|
+
ctx.fillStyle = this.color;
|
|
154
|
+
ctx.textBaseline = 'bottom';
|
|
155
|
+
const drawTextStroke = this.strokeWidth > 0;
|
|
156
|
+
if (drawTextStroke) {
|
|
157
|
+
ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
|
|
158
|
+
ctx.strokeStyle = this.strokeColor;
|
|
159
|
+
}
|
|
160
|
+
lines.forEach((line, index) => {
|
|
161
|
+
const lineX = (innerWidth - ctx.measureText(line).width) / 2;
|
|
162
|
+
const lineY = (index + 1) * this.fontSize;
|
|
163
|
+
drawTextStroke && ctx.strokeText(line, lineX, lineY);
|
|
164
|
+
ctx.fillText(line, lineX, lineY);
|
|
165
|
+
});
|
|
166
|
+
// Inject canvas into sprite
|
|
167
|
+
if (this.material.map)
|
|
168
|
+
this.material.map.dispose(); // gc previous texture
|
|
169
|
+
const texture = this.material.map = new Texture(canvas);
|
|
170
|
+
texture.minFilter = LinearFilter;
|
|
171
|
+
texture.needsUpdate = true;
|
|
172
|
+
const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
|
|
173
|
+
this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
|
|
174
|
+
}
|
|
175
|
+
//鼠标拾取计算
|
|
176
|
+
raycast(raycaster, intersects) {
|
|
177
|
+
let intersect = [];
|
|
178
|
+
super.raycast(raycaster, intersect);
|
|
179
|
+
let inte = intersect[0];
|
|
180
|
+
if (inte && (inte.uv.y > 0.55)) {
|
|
181
|
+
intersects.push(inte);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
copy(source) {
|
|
185
|
+
this.color = source.color;
|
|
186
|
+
this.backgroundColor = source.backgroundColor;
|
|
187
|
+
this.padding = source.padding;
|
|
188
|
+
this.borderWidth = source.borderWidth;
|
|
189
|
+
this.borderColor = source.borderColor;
|
|
190
|
+
this.fontFace = source.fontFace;
|
|
191
|
+
this.fontSize = source.fontSize;
|
|
192
|
+
this.fontWeight = source.fontWeight;
|
|
193
|
+
this.strokeWidth = source.strokeWidth;
|
|
194
|
+
this.strokeColor = source.strokeColor;
|
|
195
|
+
return this;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2023-04-24 15:31:02
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-04-24 16:18:47
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
import { Intersection, LinearFilter, Raycaster, Sprite, SpriteMaterial, Texture } from 'three';
|
|
10
|
+
|
|
11
|
+
// 带箭头的精灵文字
|
|
12
|
+
export default class SpriteText2 extends Sprite {
|
|
13
|
+
constructor(text = '', textHeight = 10, color: `rgb(${string})` | `rgba(${string})` | `#${string}` = 'rgba(255, 255, 255, 1)') {
|
|
14
|
+
super();
|
|
15
|
+
|
|
16
|
+
this._text = `${text}`;
|
|
17
|
+
this._textHeight = textHeight;
|
|
18
|
+
this._color = color;
|
|
19
|
+
this._backgroundColor = false; // no background color
|
|
20
|
+
|
|
21
|
+
this._padding = 0;
|
|
22
|
+
this._borderWidth = 0;
|
|
23
|
+
this._borderRadius = 0;
|
|
24
|
+
this._borderColor = 'white';
|
|
25
|
+
|
|
26
|
+
this._strokeWidth = 0;
|
|
27
|
+
this._strokeColor = 'white';
|
|
28
|
+
|
|
29
|
+
this._fontFace = 'Arial';
|
|
30
|
+
this._fontSize = 90; // defines text resolution
|
|
31
|
+
this._fontWeight = 'normal';
|
|
32
|
+
|
|
33
|
+
this._genCanvas();
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
_text = "";
|
|
37
|
+
_textHeight = 0;
|
|
38
|
+
_color: `rgb(${string})` | `rgba(${string})` | `#${string}` = "#ffffff";
|
|
39
|
+
_backgroundColor: `rgb(${string})` | `rgba(${string})` | `#${string}` | false = false; // no background color
|
|
40
|
+
|
|
41
|
+
_padding = 0;
|
|
42
|
+
_borderWidth = 0;
|
|
43
|
+
_borderRadius = 0;
|
|
44
|
+
_borderColor = 'white';
|
|
45
|
+
|
|
46
|
+
_strokeWidth = 0;
|
|
47
|
+
_strokeColor = 'white';
|
|
48
|
+
|
|
49
|
+
_fontFace = 'Arial';
|
|
50
|
+
_fontSize = 90; // defines text resolution
|
|
51
|
+
_fontWeight = 'normal';
|
|
52
|
+
_canvas = document.createElement('canvas');
|
|
53
|
+
|
|
54
|
+
get text() { return this._text; }
|
|
55
|
+
set text(text) { this._text = text; this._genCanvas(); }
|
|
56
|
+
get textHeight() { return this._textHeight; }
|
|
57
|
+
set textHeight(textHeight) { this._textHeight = textHeight; this._genCanvas(); }
|
|
58
|
+
get color() { return this._color; }
|
|
59
|
+
set color(color) { this._color = color; this._genCanvas(); }
|
|
60
|
+
get backgroundColor() { return this._backgroundColor; }
|
|
61
|
+
set backgroundColor(color) { this._backgroundColor = color; this._genCanvas(); }
|
|
62
|
+
get padding() { return this._padding; }
|
|
63
|
+
set padding(padding) { this._padding = padding; this._genCanvas(); }
|
|
64
|
+
get borderWidth() { return this._borderWidth; }
|
|
65
|
+
set borderWidth(borderWidth) { this._borderWidth = borderWidth; this._genCanvas(); }
|
|
66
|
+
get borderRadius() { return this._borderRadius; }
|
|
67
|
+
set borderRadius(borderRadius) { this._borderRadius = borderRadius; this._genCanvas(); }
|
|
68
|
+
get borderColor() { return this._borderColor; }
|
|
69
|
+
set borderColor(borderColor) { this._borderColor = borderColor; this._genCanvas(); }
|
|
70
|
+
get fontFace() { return this._fontFace; }
|
|
71
|
+
set fontFace(fontFace) { this._fontFace = fontFace; this._genCanvas(); }
|
|
72
|
+
get fontSize() { return this._fontSize; }
|
|
73
|
+
set fontSize(fontSize) { this._fontSize = fontSize; this._genCanvas(); }
|
|
74
|
+
get fontWeight() { return this._fontWeight; }
|
|
75
|
+
set fontWeight(fontWeight) { this._fontWeight = fontWeight; this._genCanvas(); }
|
|
76
|
+
get strokeWidth() { return this._strokeWidth; }
|
|
77
|
+
set strokeWidth(strokeWidth) { this._strokeWidth = strokeWidth; this._genCanvas(); }
|
|
78
|
+
get strokeColor() { return this._strokeColor; }
|
|
79
|
+
set strokeColor(strokeColor) { this._strokeColor = strokeColor; this._genCanvas(); }
|
|
80
|
+
|
|
81
|
+
_genCanvas() {
|
|
82
|
+
const canvas = this._canvas;
|
|
83
|
+
const ctx = canvas.getContext('2d')!;
|
|
84
|
+
|
|
85
|
+
const border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth]; // x,y border
|
|
86
|
+
const relBorder: number[] = border.map(b => b * this.fontSize * 0.1); // border in canvas units
|
|
87
|
+
|
|
88
|
+
const borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius]; // tl tr br bl corners
|
|
89
|
+
const relBorderRadius = borderRadius.map(b => b * this.fontSize * 0.1); // border radius in canvas units
|
|
90
|
+
|
|
91
|
+
const padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding]; // x,y padding
|
|
92
|
+
const relPadding = padding.map(p => p * this.fontSize * 0.1); // padding in canvas units
|
|
93
|
+
|
|
94
|
+
const lines = this.text.split('\n');
|
|
95
|
+
const font = `${this.fontWeight} ${this.fontSize}px ${this.fontFace}`;
|
|
96
|
+
|
|
97
|
+
ctx.font = font; // measure canvas with appropriate font
|
|
98
|
+
const innerWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
|
|
99
|
+
const innerHeight = this.fontSize * lines.length;
|
|
100
|
+
canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2;
|
|
101
|
+
canvas.height = (innerHeight + relBorder[1] * 2 + relPadding[1] * 2) * 2 + 40;
|
|
102
|
+
|
|
103
|
+
// paint border
|
|
104
|
+
if (this.borderWidth) {
|
|
105
|
+
ctx.strokeStyle = this.borderColor;
|
|
106
|
+
|
|
107
|
+
if (relBorder[0]) { // left + right borders
|
|
108
|
+
const hb = relBorder[0] / 2;
|
|
109
|
+
ctx.lineWidth = relBorder[0];
|
|
110
|
+
ctx.beginPath();
|
|
111
|
+
ctx.moveTo(hb, relBorderRadius[0]);
|
|
112
|
+
ctx.lineTo(hb, ((canvas.height - 40) / 2) - relBorderRadius[3]);
|
|
113
|
+
ctx.moveTo(canvas.width - hb, relBorderRadius[1]);
|
|
114
|
+
ctx.lineTo(canvas.width - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]);
|
|
115
|
+
ctx.stroke();
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
if (relBorder[1]) { // top + bottom borders
|
|
119
|
+
const hb = relBorder[1] / 2;
|
|
120
|
+
ctx.lineWidth = relBorder[1];
|
|
121
|
+
ctx.beginPath();
|
|
122
|
+
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), hb);
|
|
123
|
+
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), hb);
|
|
124
|
+
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), ((canvas.height - 40) / 2) - hb);
|
|
125
|
+
|
|
126
|
+
ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - hb);
|
|
127
|
+
ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - hb);
|
|
128
|
+
ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - hb);
|
|
129
|
+
|
|
130
|
+
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), ((canvas.height - 40) / 2) - hb);
|
|
131
|
+
ctx.stroke();
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
if (this.borderRadius) { // strike rounded corners
|
|
135
|
+
const cornerWidth = Math.max(...relBorder);
|
|
136
|
+
const hb = cornerWidth / 2;
|
|
137
|
+
ctx.lineWidth = cornerWidth;
|
|
138
|
+
ctx.beginPath();
|
|
139
|
+
[
|
|
140
|
+
!!relBorderRadius[0] && [relBorderRadius[0], hb, hb, relBorderRadius[0]],
|
|
141
|
+
!!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - hb, hb, relBorderRadius[1]],
|
|
142
|
+
!!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[2]],
|
|
143
|
+
!!relBorderRadius[3] && [relBorderRadius[3], hb, ((canvas.height - 40) / 2) - hb, ((canvas.height - 40) / 2) - relBorderRadius[3]]
|
|
144
|
+
].filter(d => d).forEach(([x0, x1, y0, y1]) => {
|
|
145
|
+
ctx.moveTo(x0, y0);
|
|
146
|
+
ctx.quadraticCurveTo(x1, y0, x1, y1);
|
|
147
|
+
});
|
|
148
|
+
ctx.stroke();
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// paint background
|
|
153
|
+
if (this.backgroundColor) {
|
|
154
|
+
ctx.fillStyle = this.backgroundColor;
|
|
155
|
+
if (!this.borderRadius) {
|
|
156
|
+
ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, ((canvas.height - 40) / 2) - relBorder[1] * 2);
|
|
157
|
+
} else { // fill with rounded corners
|
|
158
|
+
ctx.beginPath();
|
|
159
|
+
ctx.moveTo(relBorder[0], relBorderRadius[0]);
|
|
160
|
+
|
|
161
|
+
ctx.quadraticCurveTo(relBorder[0], relBorder[1], relBorderRadius[0], relBorder[1]);
|
|
162
|
+
ctx.lineTo(canvas.width - relBorderRadius[1], relBorder[1]);
|
|
163
|
+
ctx.quadraticCurveTo(canvas.width - relBorder[0], relBorder[1], canvas.width - relBorder[0], relBorderRadius[1]);
|
|
164
|
+
ctx.lineTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[2]);
|
|
165
|
+
ctx.quadraticCurveTo(canvas.width - relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], canvas.width - relBorderRadius[2], ((canvas.height - 40) / 2) - relBorder[1]);
|
|
166
|
+
|
|
167
|
+
ctx.lineTo((canvas.width / 2 + 20), ((canvas.height - 40) / 2) - relBorder[1]);
|
|
168
|
+
ctx.lineTo((canvas.width / 2), ((canvas.height - 40) / 2) + 20 - relBorder[1]);
|
|
169
|
+
ctx.lineTo((canvas.width / 2 - 20), ((canvas.height - 40) / 2) - relBorder[1]);
|
|
170
|
+
|
|
171
|
+
ctx.lineTo(relBorderRadius[3], ((canvas.height - 40) / 2) - relBorder[1]);
|
|
172
|
+
ctx.quadraticCurveTo(relBorder[0], ((canvas.height - 40) / 2) - relBorder[1], relBorder[0], ((canvas.height - 40) / 2) - relBorderRadius[3]);
|
|
173
|
+
|
|
174
|
+
ctx.closePath();
|
|
175
|
+
ctx.fill();
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
ctx.translate(relBorder[0], relBorder[1]);
|
|
180
|
+
ctx.translate(relPadding[0], relPadding[0]);
|
|
181
|
+
|
|
182
|
+
// paint text
|
|
183
|
+
ctx.font = font; // Set font again after canvas is resized, as context properties are reset
|
|
184
|
+
ctx.fillStyle = this.color;
|
|
185
|
+
ctx.textBaseline = 'bottom';
|
|
186
|
+
|
|
187
|
+
const drawTextStroke = this.strokeWidth > 0;
|
|
188
|
+
if (drawTextStroke) {
|
|
189
|
+
ctx.lineWidth = this.strokeWidth * this.fontSize / 10;
|
|
190
|
+
ctx.strokeStyle = this.strokeColor;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
lines.forEach((line, index) => {
|
|
194
|
+
const lineX = (innerWidth - ctx.measureText(line).width) / 2;
|
|
195
|
+
const lineY = (index + 1) * this.fontSize;
|
|
196
|
+
|
|
197
|
+
drawTextStroke && ctx.strokeText(line, lineX, lineY);
|
|
198
|
+
ctx.fillText(line, lineX, lineY);
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
// Inject canvas into sprite
|
|
202
|
+
if (this.material.map) this.material.map.dispose(); // gc previous texture
|
|
203
|
+
const texture = this.material.map = new Texture(canvas);
|
|
204
|
+
texture.minFilter = LinearFilter;
|
|
205
|
+
texture.needsUpdate = true;
|
|
206
|
+
|
|
207
|
+
const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
|
|
208
|
+
this.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
//鼠标拾取计算
|
|
212
|
+
raycast(raycaster: Raycaster, intersects: Intersection[]) {
|
|
213
|
+
|
|
214
|
+
let intersect: Intersection[] = [];
|
|
215
|
+
super.raycast(raycaster, intersect);
|
|
216
|
+
let inte = intersect[0];
|
|
217
|
+
if (inte && (inte.uv!.y > 0.55)) {
|
|
218
|
+
intersects.push(inte);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
copy(source) {
|
|
224
|
+
this.color = source.color;
|
|
225
|
+
this.backgroundColor = source.backgroundColor;
|
|
226
|
+
this.padding = source.padding;
|
|
227
|
+
this.borderWidth = source.borderWidth;
|
|
228
|
+
this.borderColor = source.borderColor;
|
|
229
|
+
this.fontFace = source.fontFace;
|
|
230
|
+
this.fontSize = source.fontSize;
|
|
231
|
+
this.fontWeight = source.fontWeight;
|
|
232
|
+
this.strokeWidth = source.strokeWidth;
|
|
233
|
+
this.strokeColor = source.strokeColor;
|
|
234
|
+
return this;
|
|
235
|
+
}
|
|
236
|
+
}
|
package/lib/Text3D/Text3D.js
CHANGED
package/lib/Text3D/Text3D.ts
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import Dexie, { Table } from "dexie";
|
|
9
|
-
import
|
|
10
|
-
import { Font
|
|
9
|
+
import { filter, first, isEmpty } from "lodash";
|
|
10
|
+
import { Font } from "three/examples/jsm/loaders/FontLoader.js";
|
|
11
11
|
import threeUtils from "../threeUtils";
|
|
12
12
|
import gentilisJSON from "./gentilis.json";
|
|
13
13
|
|
|
@@ -14,7 +14,6 @@ export default class PlaneModal1 extends Mesh {
|
|
|
14
14
|
this.material.map = this.texture;
|
|
15
15
|
this.scale.set(10, 10, 10);
|
|
16
16
|
}
|
|
17
|
-
renderOrder = 99;
|
|
18
17
|
geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
|
|
19
18
|
material = new MeshBasicMaterial({
|
|
20
19
|
side: DoubleSide,
|
|
@@ -100,5 +99,6 @@ export default class PlaneModal1 extends Mesh {
|
|
|
100
99
|
textPos.y += size;
|
|
101
100
|
});
|
|
102
101
|
this.texture.needsUpdate = true;
|
|
102
|
+
this.dispatchEvent({ type: "loaded" });
|
|
103
103
|
}
|
|
104
104
|
}
|
|
@@ -30,8 +30,6 @@ export default class PlaneModal1 extends Mesh {
|
|
|
30
30
|
this.scale.set(10, 10, 10);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
renderOrder = 99;
|
|
34
|
-
|
|
35
33
|
geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
|
|
36
34
|
|
|
37
35
|
material = new MeshBasicMaterial({
|
|
@@ -145,6 +143,7 @@ export default class PlaneModal1 extends Mesh {
|
|
|
145
143
|
|
|
146
144
|
this.texture.needsUpdate = true;
|
|
147
145
|
|
|
146
|
+
this.dispatchEvent({ type: "loaded" });
|
|
148
147
|
}
|
|
149
148
|
|
|
150
149
|
|
|
@@ -15,7 +15,6 @@ export default class SpritModal1 extends Sprite {
|
|
|
15
15
|
this.material.transparent = true;
|
|
16
16
|
this.material.alphaTest = 0.01;
|
|
17
17
|
}
|
|
18
|
-
renderOrder = 99;
|
|
19
18
|
// 背景图
|
|
20
19
|
static img = (() => {
|
|
21
20
|
const img = new Image();
|
|
@@ -96,6 +95,7 @@ export default class SpritModal1 extends Sprite {
|
|
|
96
95
|
textPos.y += size;
|
|
97
96
|
});
|
|
98
97
|
this.texture.needsUpdate = true;
|
|
98
|
+
this.dispatchEvent({ type: "loaded" });
|
|
99
99
|
}
|
|
100
100
|
//鼠标拾取计算
|
|
101
101
|
raycast(raycaster, intersects) {
|
|
@@ -34,8 +34,6 @@ export default class SpritModal1 extends Sprite {
|
|
|
34
34
|
this.material.alphaTest = 0.01;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
renderOrder = 99;
|
|
38
|
-
|
|
39
37
|
// 背景图
|
|
40
38
|
static img = (() => {
|
|
41
39
|
const img = new Image();
|
|
@@ -142,6 +140,7 @@ export default class SpritModal1 extends Sprite {
|
|
|
142
140
|
|
|
143
141
|
this.texture.needsUpdate = true;
|
|
144
142
|
|
|
143
|
+
this.dispatchEvent({ type: "loaded" });
|
|
145
144
|
}
|
|
146
145
|
|
|
147
146
|
//鼠标拾取计算
|
package/package.json
CHANGED
package/lib/PointLight.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-05-18 16:02:55
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2022-06-23 21:02:45
|
|
6
|
-
*/
|
|
7
|
-
import { Mesh, MeshBasicMaterial, PointLight as THREEPointLight, SphereGeometry } from "three";
|
|
8
|
-
import threeSpritetext from "three-spritetext";
|
|
9
|
-
import threeUtils from "./threeUtils";
|
|
10
|
-
/**
|
|
11
|
-
* 点光源
|
|
12
|
-
* @export
|
|
13
|
-
* @class PointLight
|
|
14
|
-
* @extends {THREEPointLight}
|
|
15
|
-
*/
|
|
16
|
-
export default class PointLight extends THREEPointLight {
|
|
17
|
-
constructor(color = "#fff", intensity, distance, decay) {
|
|
18
|
-
super(color, intensity, distance, decay);
|
|
19
|
-
if (threeUtils.isDev) {
|
|
20
|
-
if (this.label) {
|
|
21
|
-
this.label.borderColor = color;
|
|
22
|
-
this.label.color = color;
|
|
23
|
-
this.label.scale.multiplyScalar(0.03);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
sphere = threeUtils.isDev && (() => {
|
|
28
|
-
// 点光源辅助小球
|
|
29
|
-
const sphere = new SphereGeometry(0.1, 10, 10);
|
|
30
|
-
const materils = new MeshBasicMaterial({
|
|
31
|
-
color: this.color,
|
|
32
|
-
wireframe: true
|
|
33
|
-
});
|
|
34
|
-
const mesh = new Mesh(sphere, materils);
|
|
35
|
-
mesh.userData = {
|
|
36
|
-
cursor: "pointer"
|
|
37
|
-
};
|
|
38
|
-
mesh.addEventListener("mouseenter", () => {
|
|
39
|
-
if (this.label) {
|
|
40
|
-
this.label.visible = true;
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
mesh.addEventListener("mouseleave", () => {
|
|
44
|
-
if (this.label) {
|
|
45
|
-
this.label.visible = false;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
this.add(mesh);
|
|
49
|
-
})();
|
|
50
|
-
label = threeUtils.isDev && (() => {
|
|
51
|
-
const label = new threeSpritetext("点光源");
|
|
52
|
-
label.renderOrder = Infinity;
|
|
53
|
-
label.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
|
54
|
-
label.padding = 4;
|
|
55
|
-
label.borderRadius = 4;
|
|
56
|
-
label.borderWidth = 1;
|
|
57
|
-
label.position.set(0, 0.5, 0);
|
|
58
|
-
label.visible = false;
|
|
59
|
-
label.material.depthTest = false;
|
|
60
|
-
label.scale.multiplyScalar(0.001);
|
|
61
|
-
this.add(label);
|
|
62
|
-
return label;
|
|
63
|
-
})();
|
|
64
|
-
}
|
package/lib/PointLight.ts
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-05-18 16:02:55
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2022-06-23 21:02:45
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { Mesh, MeshBasicMaterial, PointLight as THREEPointLight, SphereGeometry } from "three";
|
|
9
|
-
import threeSpritetext from "three-spritetext";
|
|
10
|
-
import threeUtils from "./threeUtils";
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* 点光源
|
|
15
|
-
* @export
|
|
16
|
-
* @class PointLight
|
|
17
|
-
* @extends {THREEPointLight}
|
|
18
|
-
*/
|
|
19
|
-
export default class PointLight extends THREEPointLight {
|
|
20
|
-
|
|
21
|
-
constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
|
|
22
|
-
super(color, intensity, distance, decay);
|
|
23
|
-
|
|
24
|
-
if (threeUtils.isDev) {
|
|
25
|
-
if (this.label) {
|
|
26
|
-
this.label.borderColor = color;
|
|
27
|
-
this.label.color = color;
|
|
28
|
-
this.label.scale.multiplyScalar(0.03);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
sphere = threeUtils.isDev && (() => {
|
|
36
|
-
// 点光源辅助小球
|
|
37
|
-
const sphere = new SphereGeometry(0.1, 10, 10);
|
|
38
|
-
const materils = new MeshBasicMaterial({
|
|
39
|
-
color: this.color,
|
|
40
|
-
wireframe: true
|
|
41
|
-
});
|
|
42
|
-
const mesh = new Mesh(sphere, materils);
|
|
43
|
-
|
|
44
|
-
mesh.userData = {
|
|
45
|
-
cursor: "pointer"
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
mesh.addEventListener("mouseenter", () => {
|
|
49
|
-
if (this.label) {
|
|
50
|
-
this.label.visible = true;
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
mesh.addEventListener("mouseleave", () => {
|
|
55
|
-
if (this.label) {
|
|
56
|
-
this.label.visible = false;
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
this.add(mesh);
|
|
61
|
-
})();
|
|
62
|
-
|
|
63
|
-
label = threeUtils.isDev && (() => {
|
|
64
|
-
const label = new threeSpritetext("点光源");
|
|
65
|
-
label.renderOrder = Infinity;
|
|
66
|
-
label.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
|
67
|
-
label.padding = 4;
|
|
68
|
-
label.borderRadius = 4;
|
|
69
|
-
label.borderWidth = 1;
|
|
70
|
-
label.position.set(0, 0.5, 0);
|
|
71
|
-
label.visible = false;
|
|
72
|
-
label.material.depthTest = false;
|
|
73
|
-
label.scale.multiplyScalar(0.001);
|
|
74
|
-
this.add(label);
|
|
75
|
-
return label;
|
|
76
|
-
})();
|
|
77
|
-
|
|
78
|
-
}
|
package/lib/index.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export { default } from "./lib/ThreeBase";
|
|
2
|
-
export { default as EventMesh } from "./lib/EventMesh";
|
|
3
|
-
export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
|
|
4
|
-
export type { ExtrudePath } from "./lib/ExtrudeMesh";
|
|
5
|
-
export type { ExtrudeMeshProps } from "./lib/ExtrudeMesh";
|
|
6
|
-
export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
|
|
7
|
-
export type { KeyframeAnimationProps } from "./lib/KeyFrameAnimation";
|
|
8
|
-
export type { Keyframe } from "./lib/KeyFrameAnimation";
|
|
9
|
-
export { default as InstancedGroupMesh } from "./lib/InstancedGroupMesh";
|
|
10
|
-
export { default as PointLight } from "./lib/PointLight";
|
|
11
|
-
export { default as Sky } from "./lib/Sky/Sky";
|
|
12
|
-
export { default as keyContorls } from "./lib/keyContorls";
|
|
13
|
-
export { default as Transition } from "./lib/Transition";
|
|
14
|
-
export { default as threeUtils } from "./lib/threeUtils";
|
|
15
|
-
export { default as threeLoader } from "./lib/threeLoader";
|
|
16
|
-
export { default as FPScontrol } from "./lib/FPScontrol";
|
|
17
|
-
export { default as PlaneText } from "./lib/PlaneText";
|
|
18
|
-
export { default as SpriteText } from "three-spritetext";
|
|
19
|
-
export { default as SpriteModal1 } from "./lib/spriteModal1/SpriteModal1";
|
|
20
|
-
export { default as PlaneModal1 } from "./lib/planeModal1/PlaneModal1";
|
|
21
|
-
export { default as Text3D } from "./lib/Text3D/Text3D";
|
|
22
|
-
export type { Text3DProps } from "./lib/Text3D/Text3D";
|