three-base 2.0.134 → 2.0.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (305) hide show
  1. package/DirectionalLight.d.ts +6 -6
  2. package/DirectionalLight.js +68 -68
  3. package/DirectionalLight.ts +70 -0
  4. package/EventMap.d.ts +103 -0
  5. package/EventMap.js +17 -0
  6. package/EventMap.ts +139 -0
  7. package/EventMesh.d.ts +18 -18
  8. package/EventMesh.js +59 -59
  9. package/EventMesh.ts +60 -0
  10. package/ExtrudeMesh.d.ts +112 -112
  11. package/ExtrudeMesh.js +342 -366
  12. package/ExtrudeMesh.ts +553 -0
  13. package/FPScontrol.d.ts +511 -71
  14. package/FPScontrol.js +1799 -505
  15. package/FPScontrol.ts +1855 -0
  16. package/Fire/Fire.d.ts +28 -28
  17. package/Fire/Fire.js +80 -79
  18. package/Fire/Fire.ts +89 -0
  19. package/Fire/{FireGromtry.d.ts → FireGeometry.d.ts} +9 -9
  20. package/Fire/{FireGromtry.js → FireGeometry.js} +40 -40
  21. package/Fire/FireGeometry.ts +40 -0
  22. package/Fire/FireMaterial.d.ts +28 -28
  23. package/Fire/FireMaterial.js +32 -32
  24. package/Fire/FireMaterial.ts +89 -0
  25. package/Fire/index.d.ts +2 -1
  26. package/Fire/index.js +2 -1
  27. package/Fire/index.ts +2 -0
  28. package/GLTFDracoLoader.d.ts +71 -0
  29. package/GLTFDracoLoader.js +266 -0
  30. package/GLTFDracoLoader.ts +430 -0
  31. package/Grass/Grass.d.ts +8 -8
  32. package/Grass/Grass.js +38 -38
  33. package/Grass/Grass.ts +38 -0
  34. package/Grass/index.d.ts +2 -1
  35. package/Grass/index.js +2 -1
  36. package/Grass/index.ts +2 -0
  37. package/Ground1/Ground1.d.ts +10 -11
  38. package/Ground1/Ground1.js +95 -91
  39. package/Ground1/Ground1.ts +114 -0
  40. package/Ground1/index.d.ts +1 -1
  41. package/Ground1/index.js +1 -1
  42. package/Ground1/index.ts +1 -0
  43. package/MeshBase.d.ts +36 -35
  44. package/MeshBase.js +247 -223
  45. package/MeshBase.ts +253 -0
  46. package/Mirror.d.ts +25 -25
  47. package/Mirror.js +143 -139
  48. package/Mirror.ts +203 -0
  49. package/MktMesh/MktMesh.d.ts +291 -0
  50. package/MktMesh/MktMesh.js +1045 -0
  51. package/MktMesh/MktMesh.ts +1075 -0
  52. package/MktMesh/assetUrl.d.ts +35 -0
  53. package/MktMesh/assetUrl.js +69 -0
  54. package/MktMesh/assetUrl.ts +69 -0
  55. package/MktMesh/mktMappingShader.d.ts +12 -0
  56. package/MktMesh/mktMappingShader.js +139 -0
  57. package/MktMesh/mktMappingShader.ts +139 -0
  58. package/MktMesh/mktShader.d.ts +263 -0
  59. package/MktMesh/mktShader.js +1248 -0
  60. package/MktMesh/mktShader.ts +1344 -0
  61. package/MktMesh/panoBitmapTexture.d.ts +25 -0
  62. package/MktMesh/panoBitmapTexture.js +52 -0
  63. package/MktMesh/panoBitmapTexture.ts +54 -0
  64. package/MktMesh/panoSlotBind.d.ts +29 -0
  65. package/MktMesh/panoSlotBind.js +106 -0
  66. package/MktMesh/panoSlotBind.ts +153 -0
  67. package/MktMesh/panoSlotRoster.d.ts +22 -0
  68. package/MktMesh/panoSlotRoster.js +169 -0
  69. package/MktMesh/panoSlotRoster.ts +168 -0
  70. package/MktMesh/panoTileStitcher.d.ts +119 -0
  71. package/MktMesh/panoTileStitcher.js +533 -0
  72. package/MktMesh/panoTileStitcher.ts +616 -0
  73. package/MktMesh/types.d.ts +75 -0
  74. package/MktMesh/types.js +1 -0
  75. package/MktMesh/types.ts +87 -0
  76. package/MktMesh/wallCapTessellate.d.ts +33 -0
  77. package/MktMesh/wallCapTessellate.js +97 -0
  78. package/MktMesh/wallCapTessellate.ts +68 -0
  79. package/PipeMesh/PathGeometry.d.ts +44 -44
  80. package/PipeMesh/PathGeometry.js +307 -300
  81. package/PipeMesh/PathGeometry.ts +343 -0
  82. package/PipeMesh/PathPoint.d.ts +17 -17
  83. package/PipeMesh/PathPoint.js +31 -31
  84. package/PipeMesh/PathPoint.ts +36 -0
  85. package/PipeMesh/PathPointList.d.ts +31 -31
  86. package/PipeMesh/PathPointList.js +209 -208
  87. package/PipeMesh/PathPointList.ts +227 -0
  88. package/PipeMesh/PathTubeGeometry.d.ts +25 -25
  89. package/PipeMesh/PathTubeGeometry.js +130 -130
  90. package/PipeMesh/PathTubeGeometry.ts +146 -0
  91. package/PipeMesh/PipeMesh.d.ts +25 -25
  92. package/PipeMesh/PipeMesh.js +63 -63
  93. package/PipeMesh/PipeMesh.ts +76 -0
  94. package/PipeMesh/index.d.ts +1 -1
  95. package/PipeMesh/index.js +1 -1
  96. package/PipeMesh/index.ts +1 -0
  97. package/PlaneModal1/PlaneModal1.d.ts +34 -31
  98. package/PlaneModal1/PlaneModal1.js +109 -105
  99. package/PlaneModal1/PlaneModal1.ts +138 -0
  100. package/PlaneModal1/index.d.ts +1 -1
  101. package/PlaneModal1/index.js +1 -1
  102. package/PlaneModal1/index.ts +1 -0
  103. package/PlaneText.d.ts +27 -39
  104. package/PlaneText.js +35 -30
  105. package/PlaneText.ts +55 -0
  106. package/PlaneWithHtml.d.ts +13 -11
  107. package/PlaneWithHtml.js +64 -63
  108. package/PlaneWithHtml.ts +70 -0
  109. package/PointLight/PointLight.d.ts +13 -14
  110. package/PointLight/PointLight.js +64 -70
  111. package/PointLight/PointLight.ts +67 -0
  112. package/PointLight/index.d.ts +1 -1
  113. package/PointLight/index.js +1 -1
  114. package/PointLight/index.ts +1 -0
  115. package/README.md +110 -79
  116. package/Sky/Sky.d.ts +9 -9
  117. package/Sky/Sky.js +22 -22
  118. package/Sky/Sky.ts +22 -0
  119. package/Sky/index.d.ts +1 -1
  120. package/Sky/index.js +1 -1
  121. package/Sky/index.ts +1 -0
  122. package/SpotLight.d.ts +6 -6
  123. package/SpotLight.js +72 -72
  124. package/SpotLight.ts +74 -0
  125. package/SpriteModal1/SpriteModal1.d.ts +33 -30
  126. package/SpriteModal1/SpriteModal1.js +116 -110
  127. package/SpriteModal1/SpriteModal1.ts +146 -0
  128. package/SpriteModal1/index.d.ts +1 -1
  129. package/SpriteModal1/index.js +1 -1
  130. package/SpriteModal1/index.ts +1 -0
  131. package/SpriteText.d.ts +46 -45
  132. package/SpriteText.js +176 -163
  133. package/SpriteText.ts +205 -0
  134. package/SpriteText2.d.ts +48 -47
  135. package/SpriteText2.js +223 -198
  136. package/SpriteText2.ts +258 -0
  137. package/SpriteText3.d.ts +86 -0
  138. package/SpriteText3.js +519 -0
  139. package/SpriteText3.ts +599 -0
  140. package/SpriteWithHtml.d.ts +9 -7
  141. package/SpriteWithHtml.js +44 -44
  142. package/SpriteWithHtml.ts +50 -0
  143. package/Text3D/Text3D.d.ts +20 -20
  144. package/Text3D/Text3D.js +58 -62
  145. package/Text3D/Text3D.ts +77 -0
  146. package/Text3D/fontController.d.ts +60 -59
  147. package/Text3D/fontController.js +166 -199
  148. package/Text3D/fontController.ts +209 -0
  149. package/Text3D/index.d.ts +1 -1
  150. package/Text3D/index.js +1 -1
  151. package/Text3D/index.ts +1 -0
  152. package/ThreeBase.d.ts +248 -97
  153. package/ThreeBase.js +1202 -613
  154. package/ThreeBase.ts +1314 -0
  155. package/ThreeMouse.d.ts +54 -40
  156. package/ThreeMouse.js +453 -407
  157. package/ThreeMouse.ts +472 -0
  158. package/Transition.d.ts +45 -40
  159. package/Transition.js +209 -210
  160. package/Transition.ts +242 -0
  161. package/Water/Water.d.ts +5 -5
  162. package/Water/Water.js +44 -26
  163. package/Water/Water.ts +45 -0
  164. package/Water/index.d.ts +2 -0
  165. package/Water/index.js +2 -0
  166. package/Water/index.ts +2 -0
  167. package/WaterFlow/FloatingDuck.d.ts +88 -0
  168. package/WaterFlow/FloatingDuck.js +307 -0
  169. package/WaterFlow/FloatingDuck.ts +445 -0
  170. package/WaterFlow/GPUFluidSimulation.d.ts +56 -0
  171. package/WaterFlow/GPUFluidSimulation.js +785 -0
  172. package/WaterFlow/GPUFluidSimulation.ts +827 -0
  173. package/WaterFlow/ReservoirSystem.d.ts +106 -0
  174. package/WaterFlow/ReservoirSystem.js +621 -0
  175. package/WaterFlow/ReservoirSystem.ts +754 -0
  176. package/WaterFlow/SPHField.d.ts +35 -0
  177. package/WaterFlow/SPHField.js +204 -0
  178. package/WaterFlow/SPHField.ts +228 -0
  179. package/WaterFlow/ScreenSpaceFluidPass.d.ts +69 -0
  180. package/WaterFlow/ScreenSpaceFluidPass.js +736 -0
  181. package/WaterFlow/ScreenSpaceFluidPass.ts +789 -0
  182. package/WaterFlow/ShallowWaterSurface.d.ts +45 -0
  183. package/WaterFlow/ShallowWaterSurface.js +441 -0
  184. package/WaterFlow/ShallowWaterSurface.ts +510 -0
  185. package/WaterFlow/WaterFlow.d.ts +87 -0
  186. package/WaterFlow/WaterFlow.js +171 -0
  187. package/WaterFlow/WaterFlow.ts +219 -0
  188. package/WaterFlow/types.d.ts +161 -0
  189. package/WaterFlow/types.js +1 -0
  190. package/WaterFlow/types.ts +189 -0
  191. package/WaterFlow/waterFlowPass.d.ts +3 -0
  192. package/WaterFlow/waterFlowPass.js +20 -0
  193. package/WaterFlow/waterFlowPass.ts +40 -0
  194. package/collisionOBB.d.ts +42 -0
  195. package/collisionOBB.js +112 -0
  196. package/collisionOBB.ts +108 -0
  197. package/declare.d.ts +23 -165
  198. package/index.d.ts +1 -1
  199. package/index.js +1 -2
  200. package/index.ts +1 -0
  201. package/instanced/InstancedBatch.d.ts +57 -0
  202. package/instanced/InstancedBatch.js +348 -0
  203. package/instanced/InstancedBatch.ts +406 -0
  204. package/instanced/InstancedChild.d.ts +174 -0
  205. package/instanced/InstancedChild.js +264 -0
  206. package/instanced/InstancedChild.ts +327 -0
  207. package/instanced/InstancedGroup.d.ts +43 -0
  208. package/instanced/InstancedGroup.js +126 -0
  209. package/instanced/InstancedGroup.ts +137 -0
  210. package/{InstancedMeshBase.d.ts → instanced/InstancedMeshBase.d.ts} +38 -39
  211. package/{InstancedMeshBase.js → instanced/InstancedMeshBase.js} +282 -293
  212. package/instanced/InstancedMeshBase.ts +292 -0
  213. package/instanced/InstancedTemplate.d.ts +46 -0
  214. package/instanced/InstancedTemplate.js +125 -0
  215. package/instanced/InstancedTemplate.ts +188 -0
  216. package/keyControls.d.ts +30 -0
  217. package/{keyContorls.js → keyControls.js} +101 -98
  218. package/keyControls.ts +107 -0
  219. package/lensflare/LensFlare.d.ts +39 -0
  220. package/lensflare/LensFlare.js +373 -0
  221. package/lensflare/LensFlare.ts +448 -0
  222. package/lensflare/lensflare0.png +0 -0
  223. package/lensflare/lensflare3.png +0 -0
  224. package/lensflare/lensflare_custom.png +0 -0
  225. package/lensflare/lensflare_hex_ghost.png +0 -0
  226. package/lensflare/lensflare_hex_main.png +0 -0
  227. package/package.json +101 -26
  228. package/pass/bloom_pass.d.ts +2 -2
  229. package/pass/bloom_pass.js +188 -101
  230. package/pass/bloom_pass.ts +243 -0
  231. package/pass/cover_pass.d.ts +2 -2
  232. package/pass/cover_pass.js +122 -99
  233. package/pass/cover_pass.ts +182 -0
  234. package/pass/debugDepthState.d.ts +20 -0
  235. package/pass/debugDepthState.js +9 -0
  236. package/pass/debugDepthState.ts +22 -0
  237. package/pass/depthTestBias.d.ts +12 -0
  238. package/pass/depthTestBias.js +12 -0
  239. package/pass/depthTestBias.ts +12 -0
  240. package/pass/effectUserData.d.ts +27 -0
  241. package/pass/effectUserData.js +1 -0
  242. package/pass/effectUserData.ts +46 -0
  243. package/pass/frosted_glass_pass.d.ts +2 -2
  244. package/pass/frosted_glass_pass.js +167 -186
  245. package/pass/frosted_glass_pass.ts +288 -0
  246. package/pass/fsQuad.d.ts +9 -9
  247. package/pass/fsQuad.js +28 -28
  248. package/pass/fsQuad.ts +34 -0
  249. package/pass/glow_pass.d.ts +2 -2
  250. package/pass/glow_pass.js +449 -233
  251. package/pass/glow_pass.ts +654 -0
  252. package/pass/screen_bloom_pass.d.ts +11 -0
  253. package/pass/screen_bloom_pass.js +235 -0
  254. package/pass/screen_bloom_pass.ts +263 -0
  255. package/pass/ssao_pass.d.ts +88 -11
  256. package/pass/ssao_pass.js +802 -288
  257. package/pass/ssao_pass.ts +918 -0
  258. package/pass/stroke_pass.d.ts +2 -2
  259. package/pass/stroke_pass.js +329 -258
  260. package/pass/stroke_pass.ts +638 -0
  261. package/shaders/FXAAShaderMaterial.d.ts +3 -3
  262. package/shaders/FXAAShaderMaterial.js +23 -66
  263. package/shaders/FXAAShaderMaterial.ts +201 -0
  264. package/shaders/baseDepthVisShader.d.ts +11 -0
  265. package/shaders/baseDepthVisShader.js +36 -0
  266. package/shaders/baseDepthVisShader.ts +36 -0
  267. package/shaders/baseTextureToRenderShader.d.ts +2 -2
  268. package/shaders/baseTextureToRenderShader.js +55 -60
  269. package/shaders/baseTextureToRenderShader.ts +232 -0
  270. package/shaders/copyShader.d.ts +3 -3
  271. package/shaders/copyShader.js +13 -14
  272. package/shaders/copyShader.ts +32 -0
  273. package/shaders/debugDepthCompareShader.d.ts +14 -0
  274. package/shaders/debugDepthCompareShader.js +49 -0
  275. package/shaders/debugDepthCompareShader.ts +50 -0
  276. package/shaders/debugDepthJudgeShader.d.ts +18 -0
  277. package/shaders/debugDepthJudgeShader.js +52 -0
  278. package/shaders/debugDepthJudgeShader.ts +54 -0
  279. package/shaders/debugExcludedShader.d.ts +13 -0
  280. package/shaders/debugExcludedShader.js +46 -0
  281. package/shaders/debugExcludedShader.ts +48 -0
  282. package/spriteTextBg.d.ts +1 -0
  283. package/spriteTextBg.js +20 -0
  284. package/spriteTextBg.ts +20 -0
  285. package/threeLoader.d.ts +35 -34
  286. package/threeLoader.js +518 -527
  287. package/threeLoader.ts +525 -0
  288. package/threeUtils.d.ts +53 -52
  289. package/threeUtils.js +329 -330
  290. package/threeUtils.ts +373 -0
  291. package/types.d.ts +2 -0
  292. package/types.js +6 -0
  293. package/types.ts +8 -0
  294. package/ApngTexture.d.ts +0 -13
  295. package/ApngTexture.js +0 -61
  296. package/ApngTextureManage.d.ts +0 -18
  297. package/ApngTextureManage.js +0 -87
  298. package/KeyFrameAnimation.d.ts +0 -25
  299. package/KeyFrameAnimation.js +0 -78
  300. package/keyContorls.d.ts +0 -25
  301. package/lib/draco/draco_decoder.js +0 -34
  302. package/lib/draco/draco_decoder.wasm +0 -0
  303. package/lib/draco/draco_wasm_wrapper.js +0 -117
  304. package/shaders.d.ts +0 -5
  305. package/shaders.js +0 -93
@@ -0,0 +1,76 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2022-02-16 23:13:14
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2024-11-23 13:06:54
6
+ */
7
+ import { DoubleSide, DynamicDrawUsage, Mesh, MeshLambertMaterial, Vector3, Material } from "three";
8
+ import { PathPointList } from "./PathPointList";
9
+ import { PathTubeGeometry } from "./PathTubeGeometry";
10
+
11
+ export type PipeMeshProps = {
12
+ vector3s: Array<Vector3>;
13
+ radius?: number;
14
+ segments?: number;
15
+ };
16
+
17
+ /**
18
+ * 创建基础的管道模型
19
+ */
20
+ export default class PipeMesh extends Mesh<PathTubeGeometry, Material> {
21
+ constructor(props: PipeMeshProps) {
22
+ super();
23
+ this.set(props);
24
+ }
25
+
26
+ type: string = "pipemesh";
27
+ vector3s: Array<Vector3> = []; // 管道上的点
28
+ radius: number = 1; //管道的半径
29
+ segments: number = 10; //管道的段数
30
+ pathPointList: PathPointList = new PathPointList();
31
+ material: Material = new MeshLambertMaterial({
32
+ side: DoubleSide,
33
+ color: "#fff",
34
+ });
35
+
36
+ // 设置数据
37
+ set(props: PipeMeshProps): void {
38
+ this.vector3s = props.vector3s;
39
+ this.radius = props.radius || 1;
40
+ this.segments = props.segments || 10;
41
+ this.pathPointList.set(this.vector3s, props.radius * 2, 10);
42
+ this.geometry = new PathTubeGeometry({
43
+ pathPointList: this.pathPointList,
44
+ options: {
45
+ arrow: true,
46
+ progress: 1,
47
+ radius: props.radius,
48
+ radialSegments: this.segments,
49
+ },
50
+ usage: DynamicDrawUsage,
51
+ transparent: true,
52
+ });
53
+ }
54
+
55
+ // 设置指定点的坐标
56
+ setVector(i: number, vector: Vector3): void {
57
+ this.vector3s[i].copy(vector);
58
+ this.pathPointList.set(this.vector3s, this.radius * 2, this.segments);
59
+ this.geometry.update(this.pathPointList, { radius: this.radius });
60
+ }
61
+
62
+ // 获取指定点的坐标
63
+ getVector(i: number): Vector3 {
64
+ return this.vector3s[i];
65
+ }
66
+
67
+ // 设置最后一个点的坐标
68
+ setLatestVector(vector: Vector3): void {
69
+ this.setVector(this.vector3s.length - 1, vector);
70
+ }
71
+
72
+ // 回去最后一个点的坐标
73
+ getLatestVector(): Vector3 {
74
+ return this.getVector(this.vector3s.length - 1);
75
+ }
76
+ }
@@ -1 +1 @@
1
- export { default } from "./PipeMesh";
1
+ export { default } from "./PipeMesh";
package/PipeMesh/index.js CHANGED
@@ -1 +1 @@
1
- export { default } from "./PipeMesh";
1
+ export { default } from "./PipeMesh";
@@ -0,0 +1 @@
1
+ export { default } from "./PipeMesh";
@@ -1,31 +1,34 @@
1
- import { Mesh, MeshBasicMaterial, PlaneGeometry } from "three";
2
- export type PlaneModal1Config = {
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 PlaneModal1 extends Mesh {
13
- constructor(config?: PlaneModal1Config);
14
- geometry: PlaneGeometry;
15
- material: MeshBasicMaterial;
16
- static img: HTMLImageElement;
17
- canvas: HTMLCanvasElement;
18
- context: CanvasRenderingContext2D;
19
- texture: import("three").Texture;
20
- _config: {
21
- size: number;
22
- title: string;
23
- titleColor: string;
24
- texts: Array<{
25
- text: string;
26
- color: string;
27
- size: number;
28
- }>;
29
- };
30
- updata(config: PlaneModal1Config): Promise<void>;
31
- }
1
+ import { Mesh, MeshBasicMaterial, PlaneGeometry, Texture } from "three";
2
+ export type PlaneModal1Config = {
3
+ size?: number;
4
+ title?: string;
5
+ titleColor?: string;
6
+ texts?: Array<{
7
+ text?: string;
8
+ color?: string;
9
+ size?: number;
10
+ }>;
11
+ };
12
+ type TextItem = {
13
+ text: string;
14
+ color: string;
15
+ size: number;
16
+ };
17
+ type ConfigType = {
18
+ size: number;
19
+ title: string;
20
+ titleColor: string;
21
+ texts: TextItem[];
22
+ };
23
+ export default class PlaneModal1 extends Mesh {
24
+ constructor(config?: PlaneModal1Config);
25
+ geometry: PlaneGeometry;
26
+ material: MeshBasicMaterial;
27
+ static img: HTMLImageElement;
28
+ canvas: HTMLCanvasElement;
29
+ context: CanvasRenderingContext2D | null;
30
+ texture: Texture;
31
+ _config: ConfigType;
32
+ updata(config: PlaneModal1Config): Promise<void>;
33
+ }
34
+ export {};
@@ -1,105 +1,109 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2023-03-09 18:51:11
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-03-09 19:15:35
6
- */
7
- import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
8
- import threeLoader from "../threeLoader";
9
- import planeModalPNG from "./planeModal.png";
10
- // 平面模型弹窗
11
- export default class PlaneModal1 extends Mesh {
12
- constructor(config = {}) {
13
- super();
14
- this.updata(config);
15
- this.material.map = this.texture;
16
- // this.scale.set(10, 10, 10);
17
- }
18
- geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
19
- material = new MeshBasicMaterial({
20
- side: DoubleSide,
21
- transparent: true,
22
- alphaTest: 0.01
23
- });
24
- // 背景图
25
- static img = (() => {
26
- const img = new Image();
27
- img.src = planeModalPNG;
28
- return img;
29
- })();
30
- canvas = (() => {
31
- const canvas = document.createElement("canvas");
32
- canvas.width = 660;
33
- canvas.height = 481;
34
- return canvas;
35
- })();
36
- context = this.canvas.getContext("2d");
37
- texture = threeLoader.getTexture(this.canvas);
38
- // 配置
39
- _config = {
40
- size: 10,
41
- title: "PlaneModal1",
42
- titleColor: "#ffffff",
43
- texts: []
44
- // [
45
- // {
46
- // text: "1",
47
- // color: "#ffff00",
48
- // size: 40
49
- // },
50
- // {
51
- // text: "2",
52
- // color: "#ff00ff",
53
- // size: 40
54
- // },
55
- // ]
56
- };
57
- async updata(config) {
58
- Object.assign(this._config, config);
59
- //绘制背景
60
- this.context.clearRect(0, 0, 660, 481);
61
- while (!PlaneModal1.img.complete) {
62
- await new Promise(resolve => setTimeout(resolve, 100));
63
- }
64
- // 设置大小
65
- this.scale.set(this._config.size, this._config.size, this._config.size);
66
- // this.context.fillStyle = "#00000088";
67
- // this.context.fillRect(0, 0, 660, 481);
68
- //绘制背景
69
- this.context.drawImage(PlaneModal1.img, 0, 0);
70
- // 绘制标题
71
- this.context.fillStyle = this._config.titleColor;
72
- this.context.font = '40px serif'; // 设置字体大小
73
- this.context.textAlign = "left";
74
- this.context.textBaseline = "top";
75
- this.context.fillText(this._config.title, 60, 72);
76
- let textPos = new Vector2(60, 150);
77
- let maxWidth = 530;
78
- // 绘制内容
79
- this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
80
- this.context.fillStyle = color;
81
- this.context.font = `${size}px serif`; // 设置字体大小
82
- this.context.textAlign = "left";
83
- this.context.textBaseline = "top";
84
- // 字符分隔为数组
85
- var arrText = text.split('');
86
- var line = '';
87
- for (var n = 0; n < arrText.length; n++) {
88
- var metrics = this.context.measureText(line + arrText[n]);
89
- var testWidth = metrics.width;
90
- if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
91
- this.context.fillText(line, textPos.x, textPos.y);
92
- line = "";
93
- textPos.y += size;
94
- }
95
- else {
96
- line += arrText[n];
97
- }
98
- }
99
- this.context.fillText(line, textPos.x, textPos.y);
100
- textPos.y += size;
101
- });
102
- this.texture.needsUpdate = true;
103
- this.dispatchEvent({ type: "loaded" });
104
- }
105
- }
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-03-09 18:51:11
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-03-09 19:15:35
6
+ */
7
+ import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
8
+ import threeLoader from "../threeLoader";
9
+ import planeModalPNG from "./planeModal.png";
10
+ // 平面模型弹窗
11
+ export default class PlaneModal1 extends Mesh {
12
+ constructor(config = {}) {
13
+ super();
14
+ this.updata(config);
15
+ this.material.map = this.texture;
16
+ // this.scale.set(10, 10, 10);
17
+ }
18
+ geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
19
+ material = new MeshBasicMaterial({
20
+ side: DoubleSide,
21
+ transparent: true,
22
+ alphaTest: 0.01
23
+ });
24
+ // 背景图
25
+ static img = (() => {
26
+ const img = new Image();
27
+ img.src = planeModalPNG;
28
+ return img;
29
+ })();
30
+ canvas = (() => {
31
+ const canvas = document.createElement("canvas");
32
+ canvas.width = 660;
33
+ canvas.height = 481;
34
+ return canvas;
35
+ })();
36
+ context = this.canvas.getContext("2d");
37
+ texture = threeLoader.getTexture(this.canvas);
38
+ // 配置
39
+ _config = {
40
+ size: 10,
41
+ title: "PlaneModal1",
42
+ titleColor: "#ffffff",
43
+ texts: []
44
+ // [
45
+ // {
46
+ // text: "1",
47
+ // color: "#ffff00",
48
+ // size: 40
49
+ // },
50
+ // {
51
+ // text: "2",
52
+ // color: "#ff00ff",
53
+ // size: 40
54
+ // },
55
+ // ]
56
+ };
57
+ async updata(config) {
58
+ Object.assign(this._config, config);
59
+ //绘制背景
60
+ if (!this.context)
61
+ return;
62
+ this.context.clearRect(0, 0, 660, 481);
63
+ while (!PlaneModal1.img.complete) {
64
+ await new Promise(resolve => setTimeout(resolve, 100));
65
+ }
66
+ // 设置大小
67
+ this.scale.set(this._config.size, this._config.size, this._config.size);
68
+ // this.context.fillStyle = "#00000088";
69
+ // this.context.fillRect(0, 0, 660, 481);
70
+ //绘制背景
71
+ this.context.drawImage(PlaneModal1.img, 0, 0);
72
+ // 绘制标题
73
+ this.context.fillStyle = this._config.titleColor;
74
+ this.context.font = '40px serif'; // 设置字体大小
75
+ this.context.textAlign = "left";
76
+ this.context.textBaseline = "top";
77
+ this.context.fillText(this._config.title, 60, 72);
78
+ let textPos = new Vector2(60, 150);
79
+ let maxWidth = 530;
80
+ // 绘制内容
81
+ this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
82
+ if (!this.context)
83
+ return;
84
+ this.context.fillStyle = color;
85
+ this.context.font = `${size}px serif`; // 设置字体大小
86
+ this.context.textAlign = "left";
87
+ this.context.textBaseline = "top";
88
+ // 字符分隔为数组
89
+ var arrText = text.split('');
90
+ var line = '';
91
+ for (var n = 0; n < arrText.length; n++) {
92
+ var metrics = this.context.measureText(line + arrText[n]);
93
+ var testWidth = metrics.width;
94
+ if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
95
+ this.context.fillText(line, textPos.x, textPos.y);
96
+ line = "";
97
+ textPos.y += size;
98
+ }
99
+ else {
100
+ line += arrText[n];
101
+ }
102
+ }
103
+ this.context.fillText(line, textPos.x, textPos.y);
104
+ textPos.y += size;
105
+ });
106
+ this.texture.needsUpdate = true;
107
+ this.dispatchEvent({ type: "loaded" });
108
+ }
109
+ }
@@ -0,0 +1,138 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-03-09 18:51:11
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2023-03-09 19:15:35
6
+ */
7
+ import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2, Texture } from "three";
8
+ import threeLoader from "../threeLoader";
9
+ import planeModalPNG from "./planeModal.png";
10
+
11
+ export type PlaneModal1Config = {
12
+ size?: number;
13
+ title?: string;
14
+ titleColor?: string;
15
+ texts?: Array<{
16
+ text?: string;
17
+ color?: string;
18
+ size?: number;
19
+ }>;
20
+ };
21
+
22
+ type TextItem = {
23
+ text: string;
24
+ color: string;
25
+ size: number;
26
+ };
27
+
28
+ type ConfigType = {
29
+ size: number;
30
+ title: string;
31
+ titleColor: string;
32
+ texts: TextItem[];
33
+ };
34
+
35
+ // 平面模型弹窗
36
+ export default class PlaneModal1 extends Mesh {
37
+ constructor(config: PlaneModal1Config = {}) {
38
+ super();
39
+ this.updata(config);
40
+ this.material.map = this.texture;
41
+ // this.scale.set(10, 10, 10);
42
+ }
43
+
44
+ geometry: PlaneGeometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
45
+ material: MeshBasicMaterial = new MeshBasicMaterial({
46
+ side: DoubleSide,
47
+ transparent: true,
48
+ alphaTest: 0.01
49
+ });
50
+
51
+ // 背景图
52
+ static img: HTMLImageElement = (() => {
53
+ const img = new Image();
54
+ img.src = planeModalPNG;
55
+ return img;
56
+ })();
57
+
58
+ canvas: HTMLCanvasElement = (() => {
59
+ const canvas = document.createElement("canvas");
60
+ canvas.width = 660;
61
+ canvas.height = 481;
62
+ return canvas;
63
+ })();
64
+
65
+ context: CanvasRenderingContext2D | null = this.canvas.getContext("2d");
66
+ texture: Texture = threeLoader.getTexture(this.canvas);
67
+
68
+ // 配置
69
+ _config: ConfigType = {
70
+ size: 10,
71
+ title: "PlaneModal1",
72
+ titleColor: "#ffffff",
73
+ texts: []
74
+ // [
75
+ // {
76
+ // text: "1",
77
+ // color: "#ffff00",
78
+ // size: 40
79
+ // },
80
+ // {
81
+ // text: "2",
82
+ // color: "#ff00ff",
83
+ // size: 40
84
+ // },
85
+ // ]
86
+ };
87
+
88
+ async updata(config: PlaneModal1Config): Promise<void> {
89
+ Object.assign(this._config, config);
90
+ //绘制背景
91
+ if (!this.context) return;
92
+ this.context.clearRect(0, 0, 660, 481);
93
+ while (!PlaneModal1.img.complete) {
94
+ await new Promise(resolve => setTimeout(resolve, 100));
95
+ }
96
+ // 设置大小
97
+ this.scale.set(this._config.size, this._config.size, this._config.size);
98
+ // this.context.fillStyle = "#00000088";
99
+ // this.context.fillRect(0, 0, 660, 481);
100
+ //绘制背景
101
+ this.context.drawImage(PlaneModal1.img, 0, 0);
102
+ // 绘制标题
103
+ this.context.fillStyle = this._config.titleColor;
104
+ this.context.font = '40px serif'; // 设置字体大小
105
+ this.context.textAlign = "left";
106
+ this.context.textBaseline = "top";
107
+ this.context.fillText(this._config.title, 60, 72);
108
+ let textPos = new Vector2(60, 150);
109
+ let maxWidth = 530;
110
+ // 绘制内容
111
+ this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
112
+ if (!this.context) return;
113
+ this.context.fillStyle = color;
114
+ this.context.font = `${size}px serif`; // 设置字体大小
115
+ this.context.textAlign = "left";
116
+ this.context.textBaseline = "top";
117
+ // 字符分隔为数组
118
+ var arrText = text.split('');
119
+ var line = '';
120
+ for (var n = 0; n < arrText.length; n++) {
121
+ var metrics = this.context.measureText(line + arrText[n]);
122
+ var testWidth = metrics.width;
123
+ if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
124
+ this.context.fillText(line, textPos.x, textPos.y);
125
+ line = "";
126
+ textPos.y += size;
127
+ }
128
+ else {
129
+ line += arrText[n];
130
+ }
131
+ }
132
+ this.context.fillText(line, textPos.x, textPos.y);
133
+ textPos.y += size;
134
+ });
135
+ this.texture.needsUpdate = true;
136
+ this.dispatchEvent({ type: "loaded" } as never);
137
+ }
138
+ }
@@ -1 +1 @@
1
- export { default } from "./PlaneModal1";
1
+ export { default } from "./PlaneModal1";
@@ -1 +1 @@
1
- export { default } from "./PlaneModal1";
1
+ export { default } from "./PlaneModal1";
@@ -0,0 +1 @@
1
+ export { default } from "./PlaneModal1";
package/PlaneText.d.ts CHANGED
@@ -1,39 +1,27 @@
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").Material | Record<string, any> | import("three").Euler | import("three").Matrix4 | import("three").Object3D<import("three").Object3DEventMap>[] | import("three").Quaternion | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | ((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?: import("three").JSONMeta) => import("three").Object3DJSON) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | 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[]) => SpriteText) | ((...object: import("three").Object3D[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D) => SpriteText) | ((recursive?: boolean) => SpriteText) | ((object: import("three").Object3D, recursive?: boolean) => SpriteText) | {
29
- <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): void;
30
- <T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): void;
31
- } | {
32
- <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): boolean;
33
- <T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): boolean;
34
- } | {
35
- <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, SpriteText>): void;
36
- <T extends string>(type: T, listener: import("three").EventListener<{}, T, SpriteText>): void;
37
- } | (() => void);
38
- }
39
- export {};
1
+ import { Mesh, MeshBasicMaterial, PlaneGeometry } 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<K extends keyof SpriteText>(prop: K): SpriteText[K];
26
+ }
27
+ export {};
package/PlaneText.js CHANGED
@@ -1,30 +1,35 @@
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
+ const value = parame[key];
21
+ if (value !== undefined) {
22
+ // Only set properties that exist on SpriteText and are writable
23
+ if (key in this.spriteText) {
24
+ this.spriteText[key] = value;
25
+ }
26
+ }
27
+ }
28
+ this.scale.copy(this.spriteText.scale);
29
+ this.scale.max(new Vector3(1, 1, 1));
30
+ this.material.map = this.spriteText.material.map;
31
+ }
32
+ get(prop) {
33
+ return this.spriteText[prop];
34
+ }
35
+ }