three-base 2.0.65 → 2.0.67
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/EventMesh.d.ts +18 -18
- package/EventMesh.js +59 -59
- package/ExtrudeMesh.d.ts +111 -111
- package/ExtrudeMesh.js +363 -363
- package/FPScontrol.d.ts +45 -45
- package/FPScontrol.js +171 -171
- 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/InstancedMeshBase.d.ts +24 -24
- package/InstancedMeshBase.js +190 -190
- package/KeyFrameAnimation.d.ts +25 -25
- package/KeyFrameAnimation.js +78 -78
- package/MeshBase.d.ts +32 -32
- package/MeshBase.js +172 -172
- package/Mirror.d.ts +25 -25
- package/Mirror.js +139 -139
- 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 +44 -44
- package/PlaneText.js +30 -30
- package/PlaneWithHtml.d.ts +11 -11
- package/PlaneWithHtml.js +68 -68
- package/PointLight/PointLight.d.ts +13 -13
- package/PointLight/PointLight.js +64 -64
- package/PointLight/index.d.ts +1 -1
- package/PointLight/index.js +1 -1
- package/Sky/Sky.d.ts +13 -13
- package/Sky/Sky.js +28 -28
- package/Sky/index.d.ts +1 -1
- package/Sky/index.js +1 -1
- 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 +49 -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 +200 -200
- package/Text3D/index.d.ts +1 -1
- package/Text3D/index.js +1 -1
- package/ThreeBase.d.ts +91 -91
- package/ThreeBase.js +611 -611
- package/ThreeBase.ts +2 -2
- package/ThreeMouse.d.ts +39 -39
- package/ThreeMouse.js +359 -359
- package/Transition.d.ts +40 -40
- package/Transition.js +207 -207
- 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/FullScreenQuad.d.ts +7 -7
- package/pass/FullScreenQuad.js +25 -25
- package/pass/glow_pass.d.ts +2 -2
- package/pass/glow_pass.js +236 -236
- package/pass/stroke_pass.d.ts +2 -2
- package/pass/stroke_pass.js +202 -202
- package/shaders/FXAAShaderMaterial.d.ts +3 -3
- package/shaders/FXAAShaderMaterial.js +21 -21
- package/shaders.d.ts +17 -17
- package/shaders.js +99 -99
- package/threeLoader.d.ts +26 -26
- package/threeLoader.js +189 -174
- package/threeLoader.ts +17 -1
- package/threeUtils.d.ts +47 -47
- package/threeUtils.js +266 -266
package/PlaneText.d.ts
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
2
|
-
import SpriteText from "./SpriteText";
|
|
3
|
-
type Props = {
|
|
4
|
-
text?: string;
|
|
5
|
-
textHeight?: number;
|
|
6
|
-
color?: string;
|
|
7
|
-
backgroundColor?: string;
|
|
8
|
-
fontFace?: string;
|
|
9
|
-
fontSize?: number;
|
|
10
|
-
fontWeight?: string;
|
|
11
|
-
padding?: number | [number, number];
|
|
12
|
-
borderWidth?: number;
|
|
13
|
-
borderRadius?: number;
|
|
14
|
-
borderColor?: string;
|
|
15
|
-
strokeWidth?: number;
|
|
16
|
-
strokeColor?: string;
|
|
17
|
-
};
|
|
18
|
-
export default class PlaneText extends Mesh {
|
|
19
|
-
constructor(text?: string);
|
|
20
|
-
type: string;
|
|
21
|
-
static geometry: PlaneGeometry;
|
|
22
|
-
spriteText: SpriteText;
|
|
23
|
-
material: MeshBasicMaterial;
|
|
24
|
-
set(parame: Props): void;
|
|
25
|
-
get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | ((callback: (object: import("three").Object3D
|
|
26
|
-
(vector: Vector3): void;
|
|
27
|
-
(x: number, y: number, z: number): void;
|
|
28
|
-
} | ((id: number) => import("three").Object3D
|
|
29
|
-
geometries: any;
|
|
30
|
-
materials: any;
|
|
31
|
-
textures: any;
|
|
32
|
-
images: any;
|
|
33
|
-
}) => any) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((source: SpriteText, recursive?: boolean) => SpriteText) | (() => 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
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
} | {
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
} | {
|
|
40
|
-
<
|
|
41
|
-
<
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
|
-
export {};
|
|
1
|
+
import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
2
|
+
import SpriteText from "./SpriteText";
|
|
3
|
+
type Props = {
|
|
4
|
+
text?: string;
|
|
5
|
+
textHeight?: number;
|
|
6
|
+
color?: string;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
fontFace?: string;
|
|
9
|
+
fontSize?: number;
|
|
10
|
+
fontWeight?: string;
|
|
11
|
+
padding?: number | [number, number];
|
|
12
|
+
borderWidth?: number;
|
|
13
|
+
borderRadius?: number;
|
|
14
|
+
borderColor?: string;
|
|
15
|
+
strokeWidth?: number;
|
|
16
|
+
strokeColor?: string;
|
|
17
|
+
};
|
|
18
|
+
export default class PlaneText extends Mesh {
|
|
19
|
+
constructor(text?: string);
|
|
20
|
+
type: string;
|
|
21
|
+
static geometry: PlaneGeometry;
|
|
22
|
+
spriteText: SpriteText;
|
|
23
|
+
material: MeshBasicMaterial;
|
|
24
|
+
set(parame: Props): void;
|
|
25
|
+
get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | ((callback: (object: import("three").Object3D) => any) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | import("three").Euler | import("three").Material | import("three").Matrix4 | import("three").Quaternion | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | Record<string, any> | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry, depthMaterial: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry, depthMaterial: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry, material: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry, material: import("three").Material, group: import("three").Group) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
|
|
26
|
+
(vector: Vector3): void;
|
|
27
|
+
(x: number, y: number, z: number): void;
|
|
28
|
+
} | ((id: number) => import("three").Object3D | undefined) | ((name: string) => import("three").Object3D | undefined) | ((name: string, value: any) => import("three").Object3D | undefined) | ((name: string, value: any, optionalTarget?: import("three").Object3D[]) => import("three").Object3D[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection[]) => void) | ((callback: (object: import("three").Object3D) => any) => void) | ((callback: (object: import("three").Object3D) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
|
|
29
|
+
geometries: any;
|
|
30
|
+
materials: any;
|
|
31
|
+
textures: any;
|
|
32
|
+
images: any;
|
|
33
|
+
}) => any) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((source: SpriteText, recursive?: boolean) => SpriteText) | (() => 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[]) => SpriteText) | ((...object: import("three").Object3D[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D) => SpriteText) | ((recursive?: boolean) => SpriteText) | {
|
|
34
|
+
<T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): void;
|
|
35
|
+
<T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): void;
|
|
36
|
+
} | {
|
|
37
|
+
<T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): boolean;
|
|
38
|
+
<T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): boolean;
|
|
39
|
+
} | {
|
|
40
|
+
<T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): void;
|
|
41
|
+
<T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): void;
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
export {};
|
package/PlaneText.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-05-23 13:53:06
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-05-03 02:54:52
|
|
6
|
-
*/
|
|
7
|
-
import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
8
|
-
import SpriteText from "./SpriteText";
|
|
9
|
-
export default class PlaneText extends Mesh {
|
|
10
|
-
constructor(text = "planeText") {
|
|
11
|
-
super(PlaneText.geometry);
|
|
12
|
-
this.set({ text });
|
|
13
|
-
}
|
|
14
|
-
type = "PlaneText";
|
|
15
|
-
static geometry = new PlaneGeometry(1, 1, 1, 1);
|
|
16
|
-
spriteText = new SpriteText("");
|
|
17
|
-
material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
|
|
18
|
-
set(parame) {
|
|
19
|
-
for (let key in parame) {
|
|
20
|
-
//@ts-ignore
|
|
21
|
-
this.spriteText[key] = parame[key];
|
|
22
|
-
}
|
|
23
|
-
this.scale.copy(this.spriteText.scale);
|
|
24
|
-
this.scale.max(new Vector3(1, 1, 1));
|
|
25
|
-
this.material.map = this.spriteText.material.map;
|
|
26
|
-
}
|
|
27
|
-
get(prop) {
|
|
28
|
-
return this.spriteText[prop];
|
|
29
|
-
}
|
|
30
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2022-05-23 13:53:06
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-05-03 02:54:52
|
|
6
|
+
*/
|
|
7
|
+
import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
|
|
8
|
+
import SpriteText from "./SpriteText";
|
|
9
|
+
export default class PlaneText extends Mesh {
|
|
10
|
+
constructor(text = "planeText") {
|
|
11
|
+
super(PlaneText.geometry);
|
|
12
|
+
this.set({ text });
|
|
13
|
+
}
|
|
14
|
+
type = "PlaneText";
|
|
15
|
+
static geometry = new PlaneGeometry(1, 1, 1, 1);
|
|
16
|
+
spriteText = new SpriteText("");
|
|
17
|
+
material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
|
|
18
|
+
set(parame) {
|
|
19
|
+
for (let key in parame) {
|
|
20
|
+
//@ts-ignore
|
|
21
|
+
this.spriteText[key] = parame[key];
|
|
22
|
+
}
|
|
23
|
+
this.scale.copy(this.spriteText.scale);
|
|
24
|
+
this.scale.max(new Vector3(1, 1, 1));
|
|
25
|
+
this.material.map = this.spriteText.material.map;
|
|
26
|
+
}
|
|
27
|
+
get(prop) {
|
|
28
|
+
return this.spriteText[prop];
|
|
29
|
+
}
|
|
30
|
+
}
|
package/PlaneWithHtml.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
|
|
2
|
-
export default class PlaneWithHtml extends Mesh {
|
|
3
|
-
constructor(html?: string, backgroundColor?: `#${string}`);
|
|
4
|
-
visible: boolean;
|
|
5
|
-
size: Vector2;
|
|
6
|
-
geometry: PlaneGeometry;
|
|
7
|
-
material: MeshBasicMaterial;
|
|
8
|
-
div: HTMLDivElement;
|
|
9
|
-
setGeoSize(width: number, height: number): void;
|
|
10
|
-
setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
|
|
11
|
-
}
|
|
1
|
+
import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
|
|
2
|
+
export default class PlaneWithHtml extends Mesh {
|
|
3
|
+
constructor(html?: string, backgroundColor?: `#${string}`);
|
|
4
|
+
visible: boolean;
|
|
5
|
+
size: Vector2;
|
|
6
|
+
geometry: PlaneGeometry;
|
|
7
|
+
material: MeshBasicMaterial;
|
|
8
|
+
div: HTMLDivElement;
|
|
9
|
+
setGeoSize(width: number, height: number): void;
|
|
10
|
+
setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
|
|
11
|
+
}
|
package/PlaneWithHtml.js
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2023-04-15 11:26:32
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-04-15 12:38:09
|
|
6
|
-
*/
|
|
7
|
-
import html2canvas from "html2canvas";
|
|
8
|
-
import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
|
|
9
|
-
import { degToRad } from "three/src/math/MathUtils";
|
|
10
|
-
import threeLoader from "./threeLoader";
|
|
11
|
-
// html 文本面板
|
|
12
|
-
export default class PlaneWithHtml extends Mesh {
|
|
13
|
-
constructor(html = "", backgroundColor = "#00000000") {
|
|
14
|
-
super();
|
|
15
|
-
this.setHtml(html, backgroundColor);
|
|
16
|
-
}
|
|
17
|
-
visible = false;
|
|
18
|
-
size = new Vector2(10, 10);
|
|
19
|
-
geometry = (() => {
|
|
20
|
-
const geometry = new PlaneGeometry(10, 10, 1, 1);
|
|
21
|
-
geometry.rotateX(degToRad(-90));
|
|
22
|
-
return geometry;
|
|
23
|
-
})();
|
|
24
|
-
material = new MeshBasicMaterial({
|
|
25
|
-
side: DoubleSide,
|
|
26
|
-
transparent: true,
|
|
27
|
-
alphaTest: 0.1
|
|
28
|
-
});
|
|
29
|
-
div = (() => {
|
|
30
|
-
const div = document.createElement("div");
|
|
31
|
-
div.style.position = "fixed";
|
|
32
|
-
div.style.top = "100%";
|
|
33
|
-
div.style.left = "100%";
|
|
34
|
-
div.style.pointerEvents = "none";
|
|
35
|
-
div.style.userSelect = "none";
|
|
36
|
-
div.style.lineHeight = "1";
|
|
37
|
-
div.style.whiteSpace = "nowrap";
|
|
38
|
-
return div;
|
|
39
|
-
})();
|
|
40
|
-
// 设置网格尺寸
|
|
41
|
-
setGeoSize(width, height) {
|
|
42
|
-
this.size.set(width, height);
|
|
43
|
-
this.geometry.dispose();
|
|
44
|
-
const geometry = new PlaneGeometry(width, height, 1, 1);
|
|
45
|
-
geometry.rotateX(degToRad(-90));
|
|
46
|
-
this.geometry = geometry;
|
|
47
|
-
}
|
|
48
|
-
async setHtml(html = "", backgroundColor = "#00000000") {
|
|
49
|
-
this.div.innerHTML = html;
|
|
50
|
-
document.body.appendChild(this.div);
|
|
51
|
-
await new Promise((resolve, reject) => {
|
|
52
|
-
html2canvas(this.div, {
|
|
53
|
-
backgroundColor,
|
|
54
|
-
removeContainer: true
|
|
55
|
-
}).then(async (canvas) => {
|
|
56
|
-
this.setGeoSize(canvas.width, canvas.height);
|
|
57
|
-
this.material.map = new CanvasTexture(canvas);
|
|
58
|
-
this.material.map.anisotropy = threeLoader.anisotropy;
|
|
59
|
-
this.material.needsUpdate = true;
|
|
60
|
-
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
61
|
-
this.visible = true;
|
|
62
|
-
this.div.remove();
|
|
63
|
-
resolve();
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
this.dispatchEvent({ type: "loaded" });
|
|
67
|
-
}
|
|
68
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2023-04-15 11:26:32
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-04-15 12:38:09
|
|
6
|
+
*/
|
|
7
|
+
import html2canvas from "html2canvas";
|
|
8
|
+
import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
|
|
9
|
+
import { degToRad } from "three/src/math/MathUtils";
|
|
10
|
+
import threeLoader from "./threeLoader";
|
|
11
|
+
// html 文本面板
|
|
12
|
+
export default class PlaneWithHtml extends Mesh {
|
|
13
|
+
constructor(html = "", backgroundColor = "#00000000") {
|
|
14
|
+
super();
|
|
15
|
+
this.setHtml(html, backgroundColor);
|
|
16
|
+
}
|
|
17
|
+
visible = false;
|
|
18
|
+
size = new Vector2(10, 10);
|
|
19
|
+
geometry = (() => {
|
|
20
|
+
const geometry = new PlaneGeometry(10, 10, 1, 1);
|
|
21
|
+
geometry.rotateX(degToRad(-90));
|
|
22
|
+
return geometry;
|
|
23
|
+
})();
|
|
24
|
+
material = new MeshBasicMaterial({
|
|
25
|
+
side: DoubleSide,
|
|
26
|
+
transparent: true,
|
|
27
|
+
alphaTest: 0.1
|
|
28
|
+
});
|
|
29
|
+
div = (() => {
|
|
30
|
+
const div = document.createElement("div");
|
|
31
|
+
div.style.position = "fixed";
|
|
32
|
+
div.style.top = "100%";
|
|
33
|
+
div.style.left = "100%";
|
|
34
|
+
div.style.pointerEvents = "none";
|
|
35
|
+
div.style.userSelect = "none";
|
|
36
|
+
div.style.lineHeight = "1";
|
|
37
|
+
div.style.whiteSpace = "nowrap";
|
|
38
|
+
return div;
|
|
39
|
+
})();
|
|
40
|
+
// 设置网格尺寸
|
|
41
|
+
setGeoSize(width, height) {
|
|
42
|
+
this.size.set(width, height);
|
|
43
|
+
this.geometry.dispose();
|
|
44
|
+
const geometry = new PlaneGeometry(width, height, 1, 1);
|
|
45
|
+
geometry.rotateX(degToRad(-90));
|
|
46
|
+
this.geometry = geometry;
|
|
47
|
+
}
|
|
48
|
+
async setHtml(html = "", backgroundColor = "#00000000") {
|
|
49
|
+
this.div.innerHTML = html;
|
|
50
|
+
document.body.appendChild(this.div);
|
|
51
|
+
await new Promise((resolve, reject) => {
|
|
52
|
+
html2canvas(this.div, {
|
|
53
|
+
backgroundColor,
|
|
54
|
+
removeContainer: true
|
|
55
|
+
}).then(async (canvas) => {
|
|
56
|
+
this.setGeoSize(canvas.width, canvas.height);
|
|
57
|
+
this.material.map = new CanvasTexture(canvas);
|
|
58
|
+
this.material.map.anisotropy = threeLoader.anisotropy;
|
|
59
|
+
this.material.needsUpdate = true;
|
|
60
|
+
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
61
|
+
this.visible = true;
|
|
62
|
+
this.div.remove();
|
|
63
|
+
resolve();
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
this.dispatchEvent({ type: "loaded" });
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
2
|
-
import SpriteText from "../SpriteText";
|
|
3
|
-
/**
|
|
4
|
-
* 点光源
|
|
5
|
-
* @export
|
|
6
|
-
* @class PointLight
|
|
7
|
-
* @extends {THREEPointLight}
|
|
8
|
-
*/
|
|
9
|
-
export default class PointLight extends THREEPointLight {
|
|
10
|
-
constructor(color?: string, intensity?: number, distance?: number, decay?: number);
|
|
11
|
-
pointLinghtHelper: Sprite;
|
|
12
|
-
label: SpriteText;
|
|
13
|
-
}
|
|
1
|
+
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
2
|
+
import SpriteText from "../SpriteText";
|
|
3
|
+
/**
|
|
4
|
+
* 点光源
|
|
5
|
+
* @export
|
|
6
|
+
* @class PointLight
|
|
7
|
+
* @extends {THREEPointLight}
|
|
8
|
+
*/
|
|
9
|
+
export default class PointLight extends THREEPointLight {
|
|
10
|
+
constructor(color?: string, intensity?: number, distance?: number, decay?: number);
|
|
11
|
+
pointLinghtHelper: Sprite;
|
|
12
|
+
label: SpriteText;
|
|
13
|
+
}
|
package/PointLight/PointLight.js
CHANGED
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-05-18 16:02:55
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-05-03 02:55:28
|
|
6
|
-
*/
|
|
7
|
-
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
8
|
-
import threeLoader from "../threeLoader";
|
|
9
|
-
import threeUtils from "../threeUtils";
|
|
10
|
-
import pointLight_mapPNG from "./pointLight_map.png";
|
|
11
|
-
import SpriteText from "../SpriteText";
|
|
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.alphaTest = 0.1;
|
|
27
|
-
pointLinghtHelper.material.color = this.color;
|
|
28
|
-
pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
|
|
29
|
-
pointLinghtHelper.material.sizeAttenuation = false;
|
|
30
|
-
pointLinghtHelper.userData = {
|
|
31
|
-
cursor: "pointer"
|
|
32
|
-
};
|
|
33
|
-
pointLinghtHelper.addEventListener("mouseenter", () => {
|
|
34
|
-
if (this.label) {
|
|
35
|
-
this.label.visible = true;
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
pointLinghtHelper.addEventListener("mouseleave", () => {
|
|
39
|
-
if (this.label) {
|
|
40
|
-
this.label.visible = false;
|
|
41
|
-
}
|
|
42
|
-
});
|
|
43
|
-
this.add(pointLinghtHelper);
|
|
44
|
-
return pointLinghtHelper;
|
|
45
|
-
})();
|
|
46
|
-
label = threeUtils.isDev && (() => {
|
|
47
|
-
const label = new SpriteText("点光源\n\n\n");
|
|
48
|
-
label.renderOrder = Infinity;
|
|
49
|
-
// label.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
|
50
|
-
label.padding = 4;
|
|
51
|
-
label.strokeColor = "#333";
|
|
52
|
-
label.strokeWidth = 2;
|
|
53
|
-
// label.borderRadius = 4;
|
|
54
|
-
// label.borderWidth = 1;
|
|
55
|
-
label.position.set(0, 0, 0);
|
|
56
|
-
label.visible = false;
|
|
57
|
-
label.material.color = this.color;
|
|
58
|
-
// label.material.depthTest = false;
|
|
59
|
-
label.material.sizeAttenuation = false;
|
|
60
|
-
label.scale.multiplyScalar(0.002);
|
|
61
|
-
this.add(label);
|
|
62
|
-
return label;
|
|
63
|
-
})();
|
|
64
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2022-05-18 16:02:55
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-05-03 02:55:28
|
|
6
|
+
*/
|
|
7
|
+
import { Sprite, PointLight as THREEPointLight } from "three";
|
|
8
|
+
import threeLoader from "../threeLoader";
|
|
9
|
+
import threeUtils from "../threeUtils";
|
|
10
|
+
import pointLight_mapPNG from "./pointLight_map.png";
|
|
11
|
+
import SpriteText from "../SpriteText";
|
|
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.alphaTest = 0.1;
|
|
27
|
+
pointLinghtHelper.material.color = this.color;
|
|
28
|
+
pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
|
|
29
|
+
pointLinghtHelper.material.sizeAttenuation = false;
|
|
30
|
+
pointLinghtHelper.userData = {
|
|
31
|
+
cursor: "pointer"
|
|
32
|
+
};
|
|
33
|
+
pointLinghtHelper.addEventListener("mouseenter", () => {
|
|
34
|
+
if (this.label) {
|
|
35
|
+
this.label.visible = true;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
pointLinghtHelper.addEventListener("mouseleave", () => {
|
|
39
|
+
if (this.label) {
|
|
40
|
+
this.label.visible = false;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
this.add(pointLinghtHelper);
|
|
44
|
+
return pointLinghtHelper;
|
|
45
|
+
})();
|
|
46
|
+
label = threeUtils.isDev && (() => {
|
|
47
|
+
const label = new SpriteText("点光源\n\n\n");
|
|
48
|
+
label.renderOrder = Infinity;
|
|
49
|
+
// label.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
|
50
|
+
label.padding = 4;
|
|
51
|
+
label.strokeColor = "#333";
|
|
52
|
+
label.strokeWidth = 2;
|
|
53
|
+
// label.borderRadius = 4;
|
|
54
|
+
// label.borderWidth = 1;
|
|
55
|
+
label.position.set(0, 0, 0);
|
|
56
|
+
label.visible = false;
|
|
57
|
+
label.material.color = this.color;
|
|
58
|
+
// label.material.depthTest = false;
|
|
59
|
+
label.material.sizeAttenuation = false;
|
|
60
|
+
label.scale.multiplyScalar(0.002);
|
|
61
|
+
this.add(label);
|
|
62
|
+
return label;
|
|
63
|
+
})();
|
|
64
|
+
}
|
package/PointLight/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./PointLight";
|
|
1
|
+
export { default } from "./PointLight";
|
package/PointLight/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./PointLight";
|
|
1
|
+
export { default } from "./PointLight";
|
package/Sky/Sky.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { Mesh, MeshBasicMaterial, SphereGeometry } from "three";
|
|
2
|
-
/**
|
|
3
|
-
* 天空球
|
|
4
|
-
*/
|
|
5
|
-
export default class Sky extends Mesh {
|
|
6
|
-
constructor();
|
|
7
|
-
static geometry: SphereGeometry;
|
|
8
|
-
material: MeshBasicMaterial;
|
|
9
|
-
/**
|
|
10
|
-
*设置贴图
|
|
11
|
-
*/
|
|
12
|
-
setMap(src: string): void;
|
|
13
|
-
}
|
|
1
|
+
import { Mesh, MeshBasicMaterial, SphereGeometry } from "three";
|
|
2
|
+
/**
|
|
3
|
+
* 天空球
|
|
4
|
+
*/
|
|
5
|
+
export default class Sky extends Mesh {
|
|
6
|
+
constructor();
|
|
7
|
+
static geometry: SphereGeometry;
|
|
8
|
+
material: MeshBasicMaterial;
|
|
9
|
+
/**
|
|
10
|
+
*设置贴图
|
|
11
|
+
*/
|
|
12
|
+
setMap(src: string): void;
|
|
13
|
+
}
|
package/Sky/Sky.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-05-20 18:03:58
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2022-12-27 09:54:23
|
|
6
|
-
*/
|
|
7
|
-
import { DoubleSide, Mesh, MeshBasicMaterial, SphereGeometry } from "three";
|
|
8
|
-
import threeLoader from "../threeLoader";
|
|
9
|
-
import blueskyJPG from "./blueSky.jpg";
|
|
10
|
-
/**
|
|
11
|
-
* 天空球
|
|
12
|
-
*/
|
|
13
|
-
export default class Sky extends Mesh {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(Sky.geometry);
|
|
16
|
-
}
|
|
17
|
-
static geometry = new SphereGeometry(5000, 100, 100);
|
|
18
|
-
material = new MeshBasicMaterial({
|
|
19
|
-
side: DoubleSide,
|
|
20
|
-
map: threeLoader.getTexture(blueskyJPG)
|
|
21
|
-
});
|
|
22
|
-
/**
|
|
23
|
-
*设置贴图
|
|
24
|
-
*/
|
|
25
|
-
setMap(src) {
|
|
26
|
-
this.material.map = threeLoader.getTexture(src);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2022-05-20 18:03:58
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2022-12-27 09:54:23
|
|
6
|
+
*/
|
|
7
|
+
import { DoubleSide, Mesh, MeshBasicMaterial, SphereGeometry } from "three";
|
|
8
|
+
import threeLoader from "../threeLoader";
|
|
9
|
+
import blueskyJPG from "./blueSky.jpg";
|
|
10
|
+
/**
|
|
11
|
+
* 天空球
|
|
12
|
+
*/
|
|
13
|
+
export default class Sky extends Mesh {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(Sky.geometry);
|
|
16
|
+
}
|
|
17
|
+
static geometry = new SphereGeometry(5000, 100, 100);
|
|
18
|
+
material = new MeshBasicMaterial({
|
|
19
|
+
side: DoubleSide,
|
|
20
|
+
map: threeLoader.getTexture(blueskyJPG)
|
|
21
|
+
});
|
|
22
|
+
/**
|
|
23
|
+
*设置贴图
|
|
24
|
+
*/
|
|
25
|
+
setMap(src) {
|
|
26
|
+
this.material.map = threeLoader.getTexture(src);
|
|
27
|
+
}
|
|
28
|
+
}
|
package/Sky/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./Sky";
|
|
1
|
+
export { default } from "./Sky";
|
package/Sky/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from "./Sky";
|
|
1
|
+
export { default } from "./Sky";
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { Sprite, Raycaster, Intersection } from "three";
|
|
2
|
-
export type SpritModal1Config = {
|
|
3
|
-
size?: number;
|
|
4
|
-
title?: string;
|
|
5
|
-
titleColor?: string;
|
|
6
|
-
texts?: Array<{
|
|
7
|
-
text?: string;
|
|
8
|
-
color?: string;
|
|
9
|
-
size?: number;
|
|
10
|
-
}>;
|
|
11
|
-
};
|
|
12
|
-
export default class SpritModal1 extends Sprite {
|
|
13
|
-
constructor(config?: SpritModal1Config);
|
|
14
|
-
static img: HTMLImageElement;
|
|
15
|
-
canvas: HTMLCanvasElement;
|
|
16
|
-
context: CanvasRenderingContext2D;
|
|
17
|
-
texture: import("three").Texture;
|
|
18
|
-
_config: {
|
|
19
|
-
size: number;
|
|
20
|
-
title: string;
|
|
21
|
-
titleColor: string;
|
|
22
|
-
texts: Array<{
|
|
23
|
-
text: string;
|
|
24
|
-
color: string;
|
|
25
|
-
size: number;
|
|
26
|
-
}>;
|
|
27
|
-
};
|
|
28
|
-
updata(config: SpritModal1Config): Promise<void>;
|
|
29
|
-
raycast(raycaster: Raycaster, intersects: Intersection[]): void;
|
|
30
|
-
}
|
|
1
|
+
import { Sprite, Raycaster, Intersection } from "three";
|
|
2
|
+
export type SpritModal1Config = {
|
|
3
|
+
size?: number;
|
|
4
|
+
title?: string;
|
|
5
|
+
titleColor?: string;
|
|
6
|
+
texts?: Array<{
|
|
7
|
+
text?: string;
|
|
8
|
+
color?: string;
|
|
9
|
+
size?: number;
|
|
10
|
+
}>;
|
|
11
|
+
};
|
|
12
|
+
export default class SpritModal1 extends Sprite {
|
|
13
|
+
constructor(config?: SpritModal1Config);
|
|
14
|
+
static img: HTMLImageElement;
|
|
15
|
+
canvas: HTMLCanvasElement;
|
|
16
|
+
context: CanvasRenderingContext2D;
|
|
17
|
+
texture: import("three").Texture;
|
|
18
|
+
_config: {
|
|
19
|
+
size: number;
|
|
20
|
+
title: string;
|
|
21
|
+
titleColor: string;
|
|
22
|
+
texts: Array<{
|
|
23
|
+
text: string;
|
|
24
|
+
color: string;
|
|
25
|
+
size: number;
|
|
26
|
+
}>;
|
|
27
|
+
};
|
|
28
|
+
updata(config: SpritModal1Config): Promise<void>;
|
|
29
|
+
raycast(raycaster: Raycaster, intersects: Intersection[]): void;
|
|
30
|
+
}
|