three-base 1.129.17 → 2.0.1

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 (91) hide show
  1. package/README.md +1 -0
  2. package/index.js +1 -37
  3. package/index.ts +1 -61
  4. package/package.json +4 -4
  5. package/lib/ApngTexture.d.ts +0 -13
  6. package/lib/ApngTexture.js +0 -61
  7. package/lib/ApngTexture.ts +0 -91
  8. package/lib/ApngTextureManage.d.ts +0 -18
  9. package/lib/ApngTextureManage.js +0 -87
  10. package/lib/ApngTextureManage.ts +0 -130
  11. package/lib/EventMesh.d.ts +0 -18
  12. package/lib/EventMesh.js +0 -59
  13. package/lib/EventMesh.ts +0 -79
  14. package/lib/ExtrudeMesh.d.ts +0 -111
  15. package/lib/ExtrudeMesh.js +0 -363
  16. package/lib/ExtrudeMesh.ts +0 -571
  17. package/lib/FPScontrol.d.ts +0 -44
  18. package/lib/FPScontrol.js +0 -170
  19. package/lib/FPScontrol.ts +0 -209
  20. package/lib/InstancedGroupMesh.d.ts +0 -10
  21. package/lib/InstancedGroupMesh.js +0 -63
  22. package/lib/InstancedGroupMesh.ts +0 -80
  23. package/lib/KeyFrameAnimation.d.ts +0 -25
  24. package/lib/KeyFrameAnimation.js +0 -78
  25. package/lib/KeyFrameAnimation.ts +0 -122
  26. package/lib/PlaneText.d.ts +0 -37
  27. package/lib/PlaneText.js +0 -30
  28. package/lib/PlaneText.ts +0 -58
  29. package/lib/PlaneWithHtml.d.ts +0 -11
  30. package/lib/PlaneWithHtml.js +0 -67
  31. package/lib/PlaneWithHtml.ts +0 -84
  32. package/lib/PointLight/PointLight.d.ts +0 -13
  33. package/lib/PointLight/PointLight.js +0 -63
  34. package/lib/PointLight/PointLight.ts +0 -74
  35. package/lib/PointLight/pointLight_map.png +0 -0
  36. package/lib/Sky/Sky.d.ts +0 -13
  37. package/lib/Sky/Sky.js +0 -28
  38. package/lib/Sky/Sky.ts +0 -36
  39. package/lib/Sky/bluesky.jpg +0 -0
  40. package/lib/SpriteText.d.ts +0 -45
  41. package/lib/SpriteText.js +0 -162
  42. package/lib/SpriteText.ts +0 -189
  43. package/lib/SpriteText2.d.ts +0 -47
  44. package/lib/SpriteText2.js +0 -197
  45. package/lib/SpriteText2.ts +0 -236
  46. package/lib/Text3D/Text3D.d.ts +0 -20
  47. package/lib/Text3D/Text3D.js +0 -61
  48. package/lib/Text3D/Text3D.ts +0 -92
  49. package/lib/Text3D/fontController.d.ts +0 -59
  50. package/lib/Text3D/fontController.js +0 -200
  51. package/lib/Text3D/fontController.ts +0 -285
  52. package/lib/Text3D/gentilis.json +0 -811
  53. package/lib/ThreeBase.d.ts +0 -59
  54. package/lib/ThreeBase.js +0 -395
  55. package/lib/ThreeBase.ts +0 -475
  56. package/lib/ThreeMouse.d.ts +0 -39
  57. package/lib/ThreeMouse.js +0 -357
  58. package/lib/ThreeMouse.ts +0 -464
  59. package/lib/Transition.d.ts +0 -43
  60. package/lib/Transition.js +0 -196
  61. package/lib/Transition.ts +0 -268
  62. package/lib/index.d.ts +0 -22
  63. package/lib/keyContorls.d.ts +0 -25
  64. package/lib/keyContorls.js +0 -98
  65. package/lib/keyContorls.ts +0 -127
  66. package/lib/planeModal1/PlaneModal1.d.ts +0 -31
  67. package/lib/planeModal1/PlaneModal1.js +0 -104
  68. package/lib/planeModal1/PlaneModal1.ts +0 -150
  69. package/lib/planeModal1/planeModal.png +0 -0
  70. package/lib/shaders.d.ts +0 -17
  71. package/lib/shaders.js +0 -245
  72. package/lib/shaders.ts +0 -264
  73. package/lib/spriteModal1/SpriteModal1.d.ts +0 -30
  74. package/lib/spriteModal1/SpriteModal1.js +0 -109
  75. package/lib/spriteModal1/SpriteModal1.ts +0 -159
  76. package/lib/spriteModal1/spriteModal1.png +0 -0
  77. package/lib/stroke_pass/FullScreenQuad.d.ts +0 -7
  78. package/lib/stroke_pass/FullScreenQuad.js +0 -25
  79. package/lib/stroke_pass/FullScreenQuad.ts +0 -33
  80. package/lib/stroke_pass/stroke_pass.d.ts +0 -2
  81. package/lib/stroke_pass/stroke_pass.js +0 -190
  82. package/lib/stroke_pass/stroke_pass.ts +0 -211
  83. package/lib/threeLoader.d.ts +0 -20
  84. package/lib/threeLoader.js +0 -110
  85. package/lib/threeLoader.ts +0 -136
  86. package/lib/threeUtils.d.ts +0 -41
  87. package/lib/threeUtils.js +0 -179
  88. package/lib/threeUtils.ts +0 -212
  89. package/lib/type.d.ts +0 -0
  90. package/lib/type.js +0 -10
  91. package/lib/type.ts +0 -13
@@ -1,211 +0,0 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2023-05-09 00:35:17
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-05-09 02:33:28
6
- */
7
-
8
- import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
9
- import FullScreenQuad from "./FullScreenQuad";
10
-
11
- // 选中对象的纹理
12
- const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
13
-
14
- // 由于不能同时读写自己的纹理
15
- const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
16
-
17
- // 所以需要用2个模糊纹理相互读写
18
- const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
19
-
20
- const size = new Vector2();
21
-
22
- // 创建一个渲染工具 用于处理纹理
23
- const fsQuad = new FullScreenQuad(); // 渲染辅助器
24
-
25
- // 描边着色器
26
- const blurShader = new RawShaderMaterial({
27
- uniforms: {
28
- tDiffuse: { value: null },
29
- color: { value: new Color("#0f0") }, // 没有被挡住的地方的颜色绿色
30
- width: { value: 1.0 },
31
- opacity: { value: 1.0 },
32
- resolution: { value: new Vector2(1 / 512, 1 / 512) }, // 渲染器的分辨率
33
- offset: {
34
- value: [
35
- new Vector2(0.000, 1.000),
36
- new Vector2(0.259, 0.966),
37
- new Vector2(0.500, 0.866),
38
- new Vector2(0.707, 0.707),
39
- new Vector2(0.866, 0.500),
40
- new Vector2(0.966, 0.259),
41
- new Vector2(1.000, 0.000),
42
- new Vector2(0.966, -0.259),
43
- new Vector2(0.866, -0.500),
44
- new Vector2(0.707, -0.707),
45
- new Vector2(0.500, -0.866),
46
- new Vector2(0.259, -0.966),
47
- new Vector2(0.000, -1.000),
48
- new Vector2(-0.259, -0.966),
49
- new Vector2(-0.500, -0.866),
50
- new Vector2(-0.707, -0.707),
51
- new Vector2(-0.866, -0.500),
52
- new Vector2(-0.966, -0.259),
53
- new Vector2(-1.000, -0.000),
54
- new Vector2(-0.966, 0.259),
55
- new Vector2(-0.866, 0.500),
56
- new Vector2(-0.707, 0.707),
57
- new Vector2(-0.500, 0.866),
58
- new Vector2(-0.259, 0.966)
59
- ]
60
- }
61
- },
62
- vertexShader: `
63
- attribute vec3 position;
64
- attribute vec2 uv;
65
- varying vec2 vUv;
66
- void main() {
67
- vUv = uv;
68
- gl_Position = vec4(position, 1.0);
69
- }`,
70
- fragmentShader: `
71
- #ifdef GL_ES
72
- precision highp float;
73
- #endif
74
- uniform sampler2D tDiffuse;
75
- uniform vec3 color;
76
- uniform float width;
77
- uniform float opacity;
78
- uniform vec2 resolution;
79
- uniform vec2 offset[24];
80
- varying vec2 vUv;
81
- vec2 piexl = resolution * width; // 描边厚度
82
-
83
- vec4 stroke(){
84
- vec4 blurColor = vec4(0.0);
85
- vec4 Color = vec4(0.0);
86
- int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
87
- for (int i = 0; i < 24; i++ ) {
88
- Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
89
- if (Color.a > 0.0) {
90
- blurColor += Color;
91
- }
92
- }
93
- if (blurColor.a < 0.001) {
94
- return vec4(0.0);
95
- } else {
96
- return vec4(color, opacity);
97
- }
98
- }
99
- void main() {
100
- vec4 Color = texture2D(tDiffuse, vUv);
101
- if (Color.a > 0.0 || width == 0.0) {
102
- gl_FragColor = Color;
103
- } else {
104
- gl_FragColor = stroke();
105
- }
106
- }`,
107
- blending: NoBlending, // 渲染时不与背景融合计算 直接替换
108
- depthTest: false,
109
- depthWrite: false,
110
- transparent: true
111
- });
112
-
113
- // 过滤着色器
114
- const filterSelectShader = new RawShaderMaterial({
115
- uniforms: {
116
- selectTexture: { value: null },
117
- blurTexture: { value: null }
118
- },
119
- vertexShader: `
120
- attribute vec3 position;
121
- attribute vec2 uv;
122
- varying vec2 vUv;
123
- void main() {
124
- vUv = uv;
125
- gl_Position = vec4(position, 1.0);
126
- }
127
- `,
128
- fragmentShader: `
129
- #ifdef GL_ES
130
- precision highp float;
131
- #endif
132
- uniform sampler2D selectTexture;
133
- uniform sampler2D blurTexture;
134
- varying vec2 vUv;
135
-
136
- void main() {
137
- gl_FragColor = texture2D(blurTexture, vUv);
138
- gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
139
- }
140
- `,
141
- blending: NoBlending, // 渲染时不与背景融合计算 直接替换
142
- depthTest: false,
143
- depthWrite: false,
144
- transparent: true
145
- });
146
-
147
- // 场景对象
148
- const scene = new Scene();
149
-
150
- // 对象描边
151
- export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D) {
152
-
153
- const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
154
- if (!stroke_enable) {
155
- return;
156
- }
157
-
158
- // 保存原帧缓冲区
159
- const originRenderTarget = renderer.getRenderTarget();
160
-
161
- // 设置选中目标的帧缓冲区
162
- renderer.getSize(size);
163
- selectTextureTarget.setSize(size.x, size.y);
164
- blur1TextureTarget.setSize(size.x, size.y);
165
- blur2TextureTarget.setSize(size.x, size.y);
166
- renderer.setRenderTarget(selectTextureTarget);
167
- scene.children = [object3d];
168
- renderer.clear();
169
- renderer.render(object3d, camera);
170
-
171
- // 设置描边着色器的分辨率
172
- blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
173
- //描边颜色
174
- blurShader.uniforms.color.value.set(stroke_color);
175
- blurShader.uniforms.width.value = stroke_width / 4;
176
-
177
- //一次描边
178
- renderer.setRenderTarget(blur1TextureTarget);
179
- blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
180
- fsQuad.render(renderer, blurShader);
181
-
182
- //二次描边
183
- renderer.setRenderTarget(blur2TextureTarget);
184
- blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
185
- fsQuad.render(renderer, blurShader);
186
-
187
- //三次描边
188
- renderer.setRenderTarget(blur1TextureTarget);
189
- blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
190
- fsQuad.render(renderer, blurShader);
191
-
192
- //四次描边
193
- renderer.setRenderTarget(blur2TextureTarget);
194
- blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
195
- fsQuad.render(renderer, blurShader);
196
-
197
- // 还原帧缓冲区 减去原始纹理保留描边
198
- renderer.setRenderTarget(originRenderTarget);
199
- filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
200
- filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
201
- filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
202
- fsQuad.render(renderer, filterSelectShader);
203
-
204
-
205
- // 调试代码
206
- // renderer.setRenderTarget(null);
207
- // renderer.clearDepth();
208
- // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
209
- // fsQuad.render(renderer, copyShader);
210
- // return;
211
- }
@@ -1,20 +0,0 @@
1
- import { EventDispatcher, Texture, TextureLoader } from "three";
2
- import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
3
- import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
4
- import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
5
- import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
6
- declare class ThreeLoader extends EventDispatcher {
7
- constructor();
8
- anisotropy: number;
9
- setAnisotropy(v: number): void;
10
- textureMap: Map<string, Texture>;
11
- textureLoader: TextureLoader;
12
- getTexture(src: string): Texture;
13
- fbxLoader: FBXLoader;
14
- objLoader: OBJLoader;
15
- mtlLoader: MTLLoader;
16
- gltfLoader: GLTFLoader;
17
- onload: boolean;
18
- }
19
- declare const threeLoader: ThreeLoader;
20
- export default threeLoader;
@@ -1,110 +0,0 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2022-04-07 16:42:26
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-03-30 10:52:27
6
- */
7
- import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, TextureLoader, VideoTexture } from "three";
8
- import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
9
- import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
10
- import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
11
- import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
12
- import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
13
- // 引入静态资源
14
- //@ts-ignore
15
- import dracoWasmWrapperJS from "./draco/draco_wasm_wrapper.js?url";
16
- //@ts-ignore
17
- import dracoDecoderJS from "./draco/draco_decoder.js?url";
18
- //@ts-ignore
19
- import dracoDecoderWASM from "./draco/draco_decoder.wasm?url";
20
- // 加载器
21
- class ThreeLoader extends EventDispatcher {
22
- constructor() {
23
- super();
24
- DefaultLoadingManager.onStart = () => {
25
- this.onload = false;
26
- };
27
- // 有资源加载完成时通知渲染器
28
- DefaultLoadingManager.onProgress = () => {
29
- this.dispatchEvent({ type: "progress" });
30
- };
31
- DefaultLoadingManager.onLoad = () => {
32
- this.onload = true;
33
- };
34
- }
35
- // 各向异性
36
- anisotropy = 1;
37
- // 设置各向异性 由渲染器来调用并设置
38
- setAnisotropy(v) {
39
- this.anisotropy = v;
40
- }
41
- ;
42
- // 纹理对向缓存
43
- textureMap = new Map();
44
- // 纹理加载器
45
- textureLoader = new TextureLoader();
46
- // 获取地址对应的单例纹理对象
47
- getTexture(src) {
48
- let texture = this.textureMap.get(src);
49
- if (!texture) {
50
- if (/\.mp4$/.test(src)) {
51
- const videoDom = document.createElement("video");
52
- videoDom.autoplay = true;
53
- videoDom.loop = true;
54
- videoDom.muted = true;
55
- videoDom.preload = "auto";
56
- videoDom.playsInline = true;
57
- videoDom.src = src;
58
- document.addEventListener("pointerup", () => {
59
- videoDom.pause();
60
- videoDom.play();
61
- });
62
- texture = new VideoTexture(videoDom);
63
- }
64
- else {
65
- texture = this.textureLoader.load(src, tex => {
66
- tex.image.crossOrigin = "anonymous";
67
- });
68
- }
69
- this.textureMap.set(src, texture);
70
- }
71
- texture.wrapS = texture.wrapT = RepeatWrapping;
72
- texture.anisotropy = this.anisotropy;
73
- return texture;
74
- }
75
- ;
76
- // fbx模型加载器
77
- fbxLoader = new FBXLoader();
78
- //obj 加载器
79
- objLoader = new OBJLoader();
80
- // 材质加载器
81
- mtlLoader = new MTLLoader();
82
- // gltf 加载器
83
- gltfLoader = (() => {
84
- const loader = new GLTFLoader();
85
- const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
86
- _loadLibrary(url, responseType) {
87
- //@ts-ignore
88
- let urlConf = (process.env.NODE_ENV === "development") ? {
89
- "draco_decoder.js": "draco_decoder.js",
90
- "draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
91
- "draco_decoder.wasm": "draco_decoder.wasm"
92
- } : {
93
- "draco_decoder.js": dracoWasmWrapperJS,
94
- "draco_wasm_wrapper.js": dracoDecoderJS,
95
- "draco_decoder.wasm": dracoDecoderWASM
96
- };
97
- //@ts-ignore
98
- return super._loadLibrary(urlConf[url], responseType);
99
- }
100
- }();
101
- //@ts-ignore
102
- dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/js/libs/draco/' : '');
103
- loader.setDRACOLoader(dracoLoader);
104
- return loader;
105
- })();
106
- // 是否加载完成
107
- onload = true;
108
- }
109
- const threeLoader = new ThreeLoader();
110
- export default threeLoader;
@@ -1,136 +0,0 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2022-04-07 16:42:26
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-03-30 10:52:27
6
- */
7
-
8
- import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, Texture, TextureLoader, VideoTexture } from "three";
9
- import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
10
- import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
11
- import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
12
- import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
13
- import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
14
-
15
- // 引入静态资源
16
- //@ts-ignore
17
- import dracoWasmWrapperJS from "./draco/draco_wasm_wrapper.js?url";
18
- //@ts-ignore
19
- import dracoDecoderJS from "./draco/draco_decoder.js?url";
20
- //@ts-ignore
21
- import dracoDecoderWASM from "./draco/draco_decoder.wasm?url";
22
-
23
- // 加载器
24
- class ThreeLoader extends EventDispatcher {
25
-
26
- constructor() {
27
- super();
28
-
29
- DefaultLoadingManager.onStart = () => {
30
- this.onload = false;
31
- }
32
-
33
- // 有资源加载完成时通知渲染器
34
- DefaultLoadingManager.onProgress = () => {
35
- this.dispatchEvent({ type: "progress" });
36
- }
37
-
38
- DefaultLoadingManager.onLoad = () => {
39
- this.onload = true;
40
- }
41
- }
42
-
43
- // 各向异性
44
- anisotropy = 1;
45
-
46
- // 设置各向异性 由渲染器来调用并设置
47
- setAnisotropy(v: number) {
48
- this.anisotropy = v;
49
- };
50
-
51
- // 纹理对向缓存
52
- textureMap = new Map() as Map<string, Texture>;
53
-
54
- // 纹理加载器
55
- textureLoader = new TextureLoader();
56
-
57
- // 获取地址对应的单例纹理对象
58
- getTexture(src: string) {
59
-
60
- let texture = this.textureMap.get(src);
61
-
62
- if (!texture) {
63
- if (/\.mp4$/.test(src)) {
64
- const videoDom = document.createElement("video");
65
- videoDom.autoplay = true;
66
- videoDom.loop = true;
67
- videoDom.muted = true;
68
- videoDom.preload = "auto";
69
- videoDom.playsInline = true;
70
- videoDom.src = src;
71
- document.addEventListener("pointerup", () => {
72
- videoDom.pause();
73
- videoDom.play();
74
- });
75
- texture = new VideoTexture(videoDom);
76
- } else {
77
-
78
- texture = this.textureLoader.load(src, tex => {
79
- tex.image.crossOrigin = "anonymous";
80
- });
81
- }
82
-
83
- this.textureMap.set(src, texture);
84
- }
85
-
86
- texture.wrapS = texture.wrapT = RepeatWrapping;
87
-
88
- texture.anisotropy = this.anisotropy;
89
-
90
- return texture as Texture;
91
- };
92
-
93
- // fbx模型加载器
94
- fbxLoader = new FBXLoader();
95
-
96
- //obj 加载器
97
- objLoader = new OBJLoader();
98
-
99
- // 材质加载器
100
- mtlLoader = new MTLLoader();
101
-
102
- // gltf 加载器
103
- gltfLoader = (() => {
104
- const loader = new GLTFLoader();
105
- const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
106
-
107
- _loadLibrary(url: string, responseType: string) {
108
- //@ts-ignore
109
- let urlConf = (process.env.NODE_ENV === "development") ? {
110
- "draco_decoder.js": "draco_decoder.js",
111
- "draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
112
- "draco_decoder.wasm": "draco_decoder.wasm"
113
- } : {
114
- "draco_decoder.js": dracoWasmWrapperJS,
115
- "draco_wasm_wrapper.js": dracoDecoderJS,
116
- "draco_decoder.wasm": dracoDecoderWASM
117
- }
118
- //@ts-ignore
119
- return super._loadLibrary(urlConf[url], responseType);
120
- }
121
-
122
- }();
123
- //@ts-ignore
124
- dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/js/libs/draco/' : '');
125
- loader.setDRACOLoader(dracoLoader);
126
- return loader;
127
- })()
128
-
129
- // 是否加载完成
130
- onload = true;
131
-
132
- }
133
-
134
- const threeLoader = new ThreeLoader();
135
- export default threeLoader;
136
-
@@ -1,41 +0,0 @@
1
- import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
2
- declare class ThreeUtils extends EventDispatcher {
3
- constructor();
4
- isProd: boolean;
5
- isDev: boolean;
6
- _timeTemp: number;
7
- _accumulate: number;
8
- _box3: Box3;
9
- _size: Vector3;
10
- _center: Vector3;
11
- _clock: Clock;
12
- requestAnimationFrame(): void;
13
- private _keepZoomDoms;
14
- /**
15
- *计算需要保持比例的元素
16
- */
17
- private _computerDomZoom;
18
- /**
19
- * dom元素保持比例
20
- */
21
- keepZoom(dom: HTMLElement | null, width?: number, height?: number): void;
22
- workList: Array<() => void>;
23
- clock: Clock;
24
- /**
25
- * @param {() => void} [callback]
26
- * @param {boolean} [first=true] 需要优先执行
27
- */
28
- addWork(work?: () => void, first?: boolean): void;
29
- /**
30
- *判断一个元素是否在页面上
31
- */
32
- inDocument(dom: ParentNode | null): boolean;
33
- getCenter(object3d: Object3D | BufferGeometry): Vector3;
34
- getSize(object3d: Object3D | BufferGeometry): Vector3;
35
- alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
36
- centerObject3D(object3d: Object3D | BufferGeometry): void;
37
- center(object3d: Object3D | BufferGeometry): void;
38
- scaleTo(object3d: Object3D | BufferGeometry, size?: number): void;
39
- }
40
- declare const threeUtils: ThreeUtils;
41
- export default threeUtils;
package/lib/threeUtils.js DELETED
@@ -1,179 +0,0 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2022-02-24 22:49:42
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2023-05-03 00:36:18
6
- */
7
- import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
8
- class ThreeUtils extends EventDispatcher {
9
- constructor() {
10
- super();
11
- this.requestAnimationFrame();
12
- }
13
- //@ts-ignore
14
- isProd = (process.env.NODE_ENV === "production");
15
- //@ts-ignore
16
- isDev = (process.env.NODE_ENV === "development");
17
- _timeTemp = performance.now();
18
- _accumulate = 0; // 事件分发次数
19
- _box3 = new Box3();
20
- _size = new Vector3();
21
- _center = new Vector3();
22
- _clock = new Clock();
23
- requestAnimationFrame() {
24
- this._accumulate += 1;
25
- const timeTemp = this._timeTemp = performance.now();
26
- this.dispatchEvent({
27
- type: "requestAnimationFrame",
28
- timeTemp,
29
- accumulate: this._accumulate
30
- });
31
- this._computerDomZoom();
32
- //执行一个计划任务
33
- let work = this.workList.splice(0, 1)[0];
34
- work && work();
35
- setTimeout(() => {
36
- this.requestAnimationFrame();
37
- }, 45 - this._clock.getDelta());
38
- }
39
- // 需要保持宽高比的元素列表
40
- _keepZoomDoms = [];
41
- /**
42
- *计算需要保持比例的元素
43
- */
44
- _computerDomZoom() {
45
- //1. 踢除没有出现在页面上的 dom 元素
46
- this._keepZoomDoms = this._keepZoomDoms.filter(l => this.inDocument(l.dom));
47
- //2.设置dom的缩放值样式
48
- this._keepZoomDoms.map((item, i) => {
49
- let parentDom = item.dom.parentNode;
50
- let scale = Math.min(parentDom.clientWidth / item.width, parentDom.clientHeight / item.height);
51
- Object.assign(item.dom.style, {
52
- position: "absolute",
53
- top: "50%",
54
- left: "50%",
55
- transform: `translate(-50%, -50%) scale(${scale})`,
56
- width: `${item.width}px`,
57
- height: `${item.height}px`
58
- });
59
- });
60
- }
61
- /**
62
- * dom元素保持比例
63
- */
64
- keepZoom(dom, width = 1920, height = 1080) {
65
- if (dom) {
66
- // 去掉相同的dom存储的信息
67
- this._keepZoomDoms = this._keepZoomDoms.filter(l => l.dom !== dom);
68
- // 把配置加入到列表中
69
- this._keepZoomDoms.push({ dom, width, height });
70
- dom.dataset.a = "这个元素缩放比例由 threeUtils.keepZoom 方法设置";
71
- this._computerDomZoom();
72
- }
73
- }
74
- workList = [];
75
- // 时钟对象
76
- clock = new Clock();
77
- // 按照任务队列依次执行计划任务 性能优化
78
- /**
79
- * @param {() => void} [callback]
80
- * @param {boolean} [first=true] 需要优先执行
81
- */
82
- addWork(work, first = false) {
83
- // 加入任务队列
84
- if (work && !this.workList.includes(work)) {
85
- if (first) {
86
- this.workList.splice(1, 0, work); // 优先执行的任务回调
87
- }
88
- else {
89
- this.workList.push(work);
90
- }
91
- }
92
- }
93
- /**
94
- *判断一个元素是否在页面上
95
- */
96
- inDocument(dom) {
97
- if (dom === null) {
98
- return false;
99
- }
100
- else if (dom.parentNode === null) {
101
- return false;
102
- }
103
- else if (dom.parentNode === document) {
104
- return true;
105
- }
106
- else {
107
- return this.inDocument(dom.parentNode);
108
- }
109
- }
110
- // 获取中心点
111
- getCenter(object3d) {
112
- if (object3d instanceof Object3D) {
113
- this._box3.setFromObject(object3d);
114
- this._box3.getCenter(this._center);
115
- }
116
- else if (object3d instanceof BufferGeometry) {
117
- object3d.computeBoundingBox();
118
- object3d.boundingBox.getCenter(this._center);
119
- }
120
- return this._center;
121
- }
122
- // 获取模型大小
123
- getSize(object3d) {
124
- if (object3d instanceof Object3D) {
125
- this._box3.setFromObject(object3d);
126
- this._box3.getSize(this._size);
127
- }
128
- else if (object3d instanceof BufferGeometry) {
129
- object3d.computeBoundingBox();
130
- object3d.boundingBox.getSize(this._size);
131
- }
132
- return this._size;
133
- }
134
- // 模型对齐底面
135
- alignBottom(object3d, y = 0) {
136
- if (object3d instanceof Object3D) {
137
- this._box3.setFromObject(object3d);
138
- this._box3.getCenter(this._center);
139
- this._box3.getSize(this._size);
140
- object3d.position.y -= (this._center.y - (this._size.y * 0.5));
141
- object3d.position.y += y;
142
- object3d.updateMatrixWorld(true);
143
- }
144
- else if (object3d instanceof BufferGeometry) {
145
- object3d.computeBoundingBox();
146
- object3d.translate(0, -object3d.boundingBox.min.y + y, 0);
147
- }
148
- }
149
- // 居中对象
150
- centerObject3D(object3d) {
151
- if (object3d instanceof Object3D) {
152
- this._box3.setFromObject(object3d);
153
- this._box3.getCenter(this._center);
154
- object3d.position.sub(this._center);
155
- object3d.updateMatrixWorld(true);
156
- }
157
- else if (object3d instanceof BufferGeometry) {
158
- object3d.center();
159
- }
160
- }
161
- //居中对象
162
- center(object3d) {
163
- this.centerObject3D(object3d);
164
- }
165
- //缩放至指定大小
166
- scaleTo(object3d, size = 1) {
167
- const originSize = this.getSize(object3d);
168
- const scale = size / Math.max(originSize.x, originSize.y, originSize.z);
169
- if (object3d instanceof Object3D) {
170
- object3d.scale.multiplyScalar(scale);
171
- object3d.updateMatrixWorld(true);
172
- }
173
- else if (object3d instanceof BufferGeometry) {
174
- object3d.scale(scale, scale, scale);
175
- }
176
- }
177
- }
178
- const threeUtils = new ThreeUtils();
179
- export default threeUtils;