three-base 2.0.130 → 2.0.137

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 (125) hide show
  1. package/ApngTexture.d.ts +13 -13
  2. package/ApngTexture.js +61 -61
  3. package/ApngTextureManage.d.ts +18 -18
  4. package/ApngTextureManage.js +87 -87
  5. package/DirectionalLight.d.ts +6 -0
  6. package/DirectionalLight.js +68 -0
  7. package/EventMesh.d.ts +18 -18
  8. package/EventMesh.js +59 -59
  9. package/ExtrudeMesh.d.ts +112 -112
  10. package/ExtrudeMesh.js +366 -366
  11. package/FPScontrol.d.ts +78 -50
  12. package/FPScontrol.js +617 -232
  13. package/Fire/Fire.d.ts +28 -28
  14. package/Fire/Fire.js +79 -79
  15. package/Fire/FireGromtry.d.ts +9 -9
  16. package/Fire/FireGromtry.js +40 -40
  17. package/Fire/FireMaterial.d.ts +28 -28
  18. package/Fire/FireMaterial.js +32 -32
  19. package/Fire/index.d.ts +1 -1
  20. package/Fire/index.js +1 -1
  21. package/Grass/Grass.d.ts +8 -8
  22. package/Grass/Grass.js +38 -38
  23. package/Grass/index.d.ts +1 -1
  24. package/Grass/index.js +1 -1
  25. package/Ground1/Ground1.d.ts +11 -11
  26. package/Ground1/Ground1.js +54 -54
  27. package/Ground1/index.d.ts +1 -1
  28. package/Ground1/index.js +1 -1
  29. package/InstancedMeshBase.d.ts +39 -39
  30. package/InstancedMeshBase.js +293 -293
  31. package/KeyFrameAnimation.d.ts +25 -25
  32. package/KeyFrameAnimation.js +78 -78
  33. package/MeshBase.d.ts +35 -35
  34. package/MeshBase.js +223 -223
  35. package/Mirror.d.ts +25 -25
  36. package/Mirror.js +139 -139
  37. package/PipeMesh/PathGeometry.d.ts +44 -44
  38. package/PipeMesh/PathGeometry.js +300 -300
  39. package/PipeMesh/PathPoint.d.ts +17 -17
  40. package/PipeMesh/PathPoint.js +31 -31
  41. package/PipeMesh/PathPointList.d.ts +31 -31
  42. package/PipeMesh/PathPointList.js +208 -208
  43. package/PipeMesh/PathTubeGeometry.d.ts +25 -25
  44. package/PipeMesh/PathTubeGeometry.js +130 -130
  45. package/PipeMesh/PipeMesh.d.ts +25 -25
  46. package/PipeMesh/PipeMesh.js +63 -63
  47. package/PipeMesh/index.d.ts +1 -1
  48. package/PipeMesh/index.js +1 -1
  49. package/PlaneModal1/PlaneModal1.d.ts +31 -31
  50. package/PlaneModal1/PlaneModal1.js +105 -105
  51. package/PlaneModal1/index.d.ts +1 -1
  52. package/PlaneModal1/index.js +1 -1
  53. package/PlaneText.d.ts +39 -39
  54. package/PlaneText.js +30 -30
  55. package/PlaneWithHtml.d.ts +11 -11
  56. package/PlaneWithHtml.js +63 -68
  57. package/PointLight/PointLight.d.ts +14 -13
  58. package/PointLight/PointLight.js +70 -64
  59. package/PointLight/index.d.ts +1 -1
  60. package/PointLight/index.js +1 -1
  61. package/Sky/Sky.d.ts +9 -9
  62. package/Sky/Sky.js +22 -22
  63. package/Sky/index.d.ts +1 -1
  64. package/Sky/index.js +1 -1
  65. package/SpotLight.d.ts +6 -0
  66. package/SpotLight.js +72 -0
  67. package/SpriteModal1/SpriteModal1.d.ts +30 -30
  68. package/SpriteModal1/SpriteModal1.js +110 -110
  69. package/SpriteModal1/index.d.ts +1 -1
  70. package/SpriteModal1/index.js +1 -1
  71. package/SpriteText.d.ts +45 -45
  72. package/SpriteText.js +163 -163
  73. package/SpriteText2.d.ts +47 -47
  74. package/SpriteText2.js +198 -198
  75. package/SpriteWithHtml.d.ts +7 -7
  76. package/SpriteWithHtml.js +44 -49
  77. package/Text3D/Text3D.d.ts +20 -20
  78. package/Text3D/Text3D.js +62 -62
  79. package/Text3D/fontController.d.ts +59 -59
  80. package/Text3D/fontController.js +199 -199
  81. package/Text3D/index.d.ts +1 -1
  82. package/Text3D/index.js +1 -1
  83. package/ThreeBase.d.ts +111 -81
  84. package/ThreeBase.js +656 -560
  85. package/ThreeMouse.d.ts +40 -40
  86. package/ThreeMouse.js +407 -407
  87. package/Transition.d.ts +40 -40
  88. package/Transition.js +210 -210
  89. package/Water/Water.d.ts +5 -0
  90. package/Water/Water.js +26 -0
  91. package/Water/waternormals.jpg +0 -0
  92. package/declare.d.ts +167 -0
  93. package/index.d.ts +1 -1
  94. package/index.js +2 -2
  95. package/keyContorls.d.ts +25 -25
  96. package/keyContorls.js +98 -98
  97. package/package.json +3 -2
  98. package/pass/bloom_pass.d.ts +2 -2
  99. package/pass/bloom_pass.js +99 -99
  100. package/pass/cover_pass.d.ts +2 -2
  101. package/pass/cover_pass.js +95 -95
  102. package/pass/emissive_ao_pass.d.ts +13 -0
  103. package/pass/emissive_ao_pass.js +370 -0
  104. package/pass/frosted_glass_pass.d.ts +2 -0
  105. package/pass/frosted_glass_pass.js +275 -0
  106. package/pass/fsQuad.d.ts +9 -9
  107. package/pass/fsQuad.js +28 -28
  108. package/pass/glow_pass.d.ts +2 -2
  109. package/pass/glow_pass.js +310 -254
  110. package/pass/ssao_pass.d.ts +13 -0
  111. package/pass/ssao_pass.js +372 -0
  112. package/pass/stroke_pass.d.ts +2 -2
  113. package/pass/stroke_pass.js +199 -199
  114. package/shaders/FXAAShaderMaterial.d.ts +3 -3
  115. package/shaders/FXAAShaderMaterial.js +21 -21
  116. package/shaders/baseTextureToRenderShader.d.ts +2 -2
  117. package/shaders/baseTextureToRenderShader.js +14 -14
  118. package/shaders/copyShader.d.ts +3 -3
  119. package/shaders/copyShader.js +14 -14
  120. package/shaders.d.ts +5 -5
  121. package/shaders.js +42 -42
  122. package/threeLoader.d.ts +34 -34
  123. package/threeLoader.js +527 -527
  124. package/threeUtils.d.ts +52 -52
  125. package/threeUtils.js +330 -330
package/ThreeMouse.js CHANGED
@@ -1,407 +1,407 @@
1
- //
2
- //
3
- //
4
- //
5
- //
6
- // 启动鼠标事件
7
- import { Raycaster, Vector2 } from "three";
8
- import { Mesh } from "three";
9
- import { debounce } from "lodash";
10
- import { computeBoundsTree, acceleratedRaycast, } from "three-mesh-bvh";
11
- // Add the extension functions
12
- Mesh.prototype.raycast = acceleratedRaycast;
13
- /**
14
- * js 专用的鼠标拾取模型对象
15
- */
16
- export default class ThreeMouse {
17
- constructor(renderer, camera, scene) {
18
- this._renderer = renderer;
19
- this._camera = camera;
20
- this._scene = scene;
21
- this._frame = this._renderer.info.render.frame;
22
- this._renderer.domElement.addEventListener("mouseenter", () => {
23
- this._mouseInRenderer = true;
24
- }, true); //鼠标进入开启拾取
25
- this._renderer.domElement.addEventListener("mouseleave", this._mouseleave, true); //鼠标离开停止拾取
26
- this._renderer.domElement.addEventListener("mousemove", this._mousemove, true); //鼠标移动监听事件
27
- this._renderer.domElement.addEventListener("pointerdown", this._mousedown, true); //鼠标按下监听事件
28
- this._renderer.domElement.addEventListener("pointerup", this._mouseup, true); //鼠标弹起监听事件
29
- }
30
- // 渲染器
31
- _renderer;
32
- _camera;
33
- _scene;
34
- // 鼠标在渲染器上面的位置
35
- _mosePosition = new Vector2(0, 0);
36
- // 鼠标按下的位置 如果和鼠标弹起的位置相同 才算一次有效的点击事件
37
- _mouseDownPosition = new Vector2(0, 0);
38
- //当前鼠标指针上的对象
39
- _mesh_on;
40
- //鼠标按下的对象
41
- _mesh_Down;
42
- //射线拾取器
43
- _raycaster = new Raycaster();
44
- // 当前渲染的帧数 ( 鼠标滑动事件 一帧只需要执行费一次即可 )
45
- _frame = 0;
46
- //鼠标是否在渲染器上
47
- _mouseInRenderer = false;
48
- // 鼠标滑动的事件
49
- _mousemoveEvent;
50
- // 鼠标事件
51
- _mouseEvent;
52
- // 需要被拾取的对象数组
53
- _object3ds = [];
54
- // 点击次数
55
- _click_num = 0;
56
- // 获取拾取到的对象
57
- _getSelected(object3ds) {
58
- let intersection;
59
- if (object3ds.length) {
60
- intersection = this._raycaster.intersectObjects(object3ds, false)[0];
61
- }
62
- return intersection;
63
- }
64
- // 判断对象上面是否有事件
65
- hasEvent(object, types = []) {
66
- if (!object) {
67
- return false;
68
- }
69
- // 如果 启用事件为关闭的话就不执行事件
70
- if (object["userData"] && object["userData"]["enableEvent"] === false) {
71
- return false;
72
- }
73
- const hasevent = types.some((type) => {
74
- //@ts-ignore
75
- if (object["_listeners"] &&
76
- object["_listeners"][type] &&
77
- object["_listeners"][type][0]) {
78
- return true;
79
- }
80
- // if (object["userData"] && object["userData"]["cursor"]) {
81
- // return true;
82
- // }
83
- return false;
84
- });
85
- return hasevent;
86
- }
87
- // 判断对象上是否有鼠标样式
88
- hasCursor(object) {
89
- if (!object) {
90
- return false;
91
- }
92
- // 如果 启用事件为关闭的话就不执行事件
93
- if (object["userData"] && object["userData"]["enableEvent"] === false) {
94
- return false;
95
- }
96
- if (object["userData"] && object["userData"]["cursor"]) {
97
- return true;
98
- }
99
- }
100
- // 分发鼠标拾取事件
101
- dispatchEvent() {
102
- // 提取有事件的对象
103
- const meshs = [];
104
- this._scene.traverseVisible((mesh) => {
105
- // 判断对象是否有指定的事件
106
- if (this.hasCursor(mesh) ||
107
- this.hasEvent(mesh, [
108
- "leftclick",
109
- "rightclick",
110
- "click",
111
- "dbclick",
112
- "mouseenter",
113
- "mouseleave",
114
- "mousemove",
115
- "mousedown",
116
- "mouseup",
117
- ])) {
118
- if (mesh.isMesh &&
119
- !mesh.geometry.boundsTree &&
120
- mesh.geometry.attributes.position &&
121
- mesh.geometry.attributes.position.count > 0) {
122
- computeBoundsTree.apply(mesh.geometry);
123
- // disposeBoundsTree.apply((mesh as Mesh).geometry);
124
- }
125
- meshs.push(mesh);
126
- }
127
- });
128
- this._object3ds = meshs;
129
- // 没有鼠标事件就不往下执行了
130
- if (!this._mousemoveEvent || !this._mouseInRenderer) {
131
- return;
132
- }
133
- // 拾取模型
134
- let intersection = this._getSelected(meshs);
135
- if (intersection) {
136
- const { face, object } = intersection;
137
- // face && face.normal.applyMatrix4(object.matrixWorld);
138
- const MouseEvent = Object.assign(intersection, {
139
- // 将来可能用到的对象
140
- e: this._mousemoveEvent,
141
- renderer: this._renderer,
142
- camera: this._camera,
143
- object: intersection.object,
144
- type: this._mousemoveEvent.type,
145
- offsetX: this._mousemoveEvent.offsetX,
146
- offsetY: this._mousemoveEvent.offsetY,
147
- x: this._mousemoveEvent.x,
148
- y: this._mousemoveEvent.y,
149
- });
150
- // 触发滑动事件
151
- if (this._mesh_on === MouseEvent.object) {
152
- if (this.hasEvent(MouseEvent.object, ["mousemove"])) {
153
- MouseEvent.type = "mousemove";
154
- MouseEvent.object.dispatchEvent(MouseEvent);
155
- }
156
- // 鼠标划入滑出事件
157
- }
158
- else if (this._mesh_on !== MouseEvent.object) {
159
- if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
160
- MouseEvent.type = "mouseleave";
161
- this._mesh_on.dispatchEvent(MouseEvent);
162
- }
163
- if (this.hasEvent(MouseEvent.object, ["mouseenter"])) {
164
- MouseEvent.type = "mouseenter";
165
- MouseEvent.object.dispatchEvent(MouseEvent);
166
- }
167
- }
168
- this._mesh_on = MouseEvent.object || undefined; // 设置为当前鼠标上的对象
169
- // 鼠标样式
170
- if (this._mesh_on &&
171
- this._mesh_on.userData &&
172
- this._mesh_on.userData.cursor) {
173
- this._renderer.domElement.style.cursor = this._mesh_on.userData.cursor;
174
- }
175
- else {
176
- this._renderer.domElement.style.cursor = "auto";
177
- }
178
- }
179
- else {
180
- if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
181
- // 鼠标离开事件
182
- this._mesh_on.dispatchEvent({
183
- e: this._mouseEvent,
184
- renderer: this._renderer,
185
- camera: this._camera,
186
- object: this._mesh_on,
187
- type: "mouseleave",
188
- offsetX: this._mousemoveEvent.offsetX,
189
- offsetY: this._mousemoveEvent.offsetY,
190
- x: this._mousemoveEvent.x,
191
- y: this._mousemoveEvent.y,
192
- });
193
- }
194
- // 置空当前鼠标上面的对象
195
- this._mesh_on = undefined;
196
- this._renderer.domElement.style.cursor = "auto"; // 鼠标样式
197
- }
198
- }
199
- // 鼠标离开事件
200
- _mouseleave = (e) => {
201
- this._mouseEvent = e;
202
- this._mouseInRenderer = false;
203
- // 鼠标离开事件
204
- if (this._mousemoveEvent && this.hasEvent(this._mesh_on, ["mouseleave"])) {
205
- this._mesh_on.dispatchEvent({
206
- e: this._mouseEvent,
207
- renderer: this._renderer,
208
- camera: this._camera,
209
- object: this._mesh_on,
210
- type: "mouseleave",
211
- offsetX: this._mousemoveEvent.offsetX,
212
- offsetY: this._mousemoveEvent.offsetY,
213
- x: this._mousemoveEvent.x,
214
- y: this._mousemoveEvent.y,
215
- });
216
- }
217
- // 置空当前鼠标上面的对象
218
- this._mesh_on = undefined;
219
- this._renderer.domElement.style.cursor = "auto"; // 鼠标样式
220
- };
221
- // 鼠标滑动 设置鼠标位置
222
- _mousemove = (e) => {
223
- this._mousemoveEvent = e;
224
- this._frame = this._renderer.info.render.frame;
225
- if (document.pointerLockElement) {
226
- // 如果当前有元素 锁住了鼠标
227
- this._mosePosition.set(0, 0); // 鼠标就指向canvas 的正中心
228
- }
229
- else {
230
- this._mosePosition.x = (e.offsetX / this._renderer.domElement.offsetWidth) * 2 - 1;
231
- this._mosePosition.y = -(e.offsetY / this._renderer.domElement.offsetHeight) * 2 + 1;
232
- }
233
- this._raycaster.setFromCamera(this._mosePosition, this._camera); // 设置射线拾取的参数
234
- };
235
- // 鼠标按下事件
236
- _mousedown = (e) => {
237
- this._mouseEvent = e;
238
- // 记录按下的位置
239
- this._mouseDownPosition.set(e.offsetX, e.offsetY);
240
- this._mousemove(e);
241
- let intersection = this._getSelected(this._object3ds);
242
- if (!intersection || !this._mousemoveEvent) {
243
- return;
244
- }
245
- this._mesh_Down = this._mesh_on = intersection.object;
246
- // 触发鼠标按下事件
247
- if (this.hasEvent(this._mesh_Down, ["mousedown"])) {
248
- this._mesh_Down.dispatchEvent({
249
- e: this._mouseEvent,
250
- ...intersection,
251
- renderer: this._renderer,
252
- camera: this._camera,
253
- object: intersection.object,
254
- type: "mousedown",
255
- offsetX: this._mousemoveEvent.offsetX,
256
- offsetY: this._mousemoveEvent.offsetY,
257
- x: this._mousemoveEvent.x,
258
- y: this._mousemoveEvent.y,
259
- });
260
- }
261
- };
262
- // 鼠标弹起事件
263
- _mouseup = debounce(async (e) => {
264
- this._mouseEvent = e;
265
- // 提取有事件的对象
266
- const meshs = [];
267
- let intersection = this._getSelected(this._object3ds);
268
- if (!intersection || !this._mousemoveEvent) {
269
- return;
270
- }
271
- this._mesh_on = intersection.object;
272
- if (this.hasEvent(this._mesh_on, ["mouseup"])) {
273
- this._mesh_on.dispatchEvent({
274
- e: this._mouseEvent,
275
- ...intersection,
276
- renderer: this._renderer,
277
- camera: this._camera,
278
- object: intersection.object,
279
- type: "mouseup",
280
- offsetX: this._mousemoveEvent.offsetX,
281
- offsetY: this._mousemoveEvent.offsetY,
282
- x: this._mousemoveEvent.x,
283
- y: this._mousemoveEvent.y,
284
- });
285
- }
286
- // 触发鼠标弹起事件
287
- if (this._mesh_Down &&
288
- this._mesh_Down === this._mesh_on &&
289
- Math.abs(this._mouseDownPosition.x - e.offsetX) < 5 &&
290
- Math.abs(this._mouseDownPosition.y - e.offsetY) < 5) {
291
- // 是否有双击事件
292
- if (this.hasEvent(this._mesh_Down, ["dbclick"])) {
293
- this._click_num++;
294
- await new Promise((resolve) => setTimeout(resolve, 200));
295
- // 只点击了一次
296
- if (this._click_num === 1) {
297
- if (this.hasEvent(this._mesh_Down, ["click"])) {
298
- this._mesh_Down.dispatchEvent({
299
- e: this._mouseEvent,
300
- ...intersection,
301
- renderer: this._renderer,
302
- camera: this._camera,
303
- object: intersection.object,
304
- type: "click",
305
- offsetX: this._mousemoveEvent.offsetX,
306
- offsetY: this._mousemoveEvent.offsetY,
307
- x: this._mousemoveEvent.x,
308
- y: this._mousemoveEvent.y,
309
- });
310
- }
311
- if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
312
- this._mesh_Down.dispatchEvent({
313
- e: this._mouseEvent,
314
- ...intersection,
315
- renderer: this._renderer,
316
- camera: this._camera,
317
- object: intersection.object,
318
- type: "leftclick",
319
- offsetX: this._mousemoveEvent.offsetX,
320
- offsetY: this._mousemoveEvent.offsetY,
321
- x: this._mousemoveEvent.x,
322
- y: this._mousemoveEvent.y,
323
- });
324
- }
325
- if (this.hasEvent(this._mesh_Down, ["rightclick"]) &&
326
- e.button === 2) {
327
- this._mesh_Down.dispatchEvent({
328
- e: this._mouseEvent,
329
- ...intersection,
330
- renderer: this._renderer,
331
- camera: this._camera,
332
- object: intersection.object,
333
- type: "rightclick",
334
- offsetX: this._mousemoveEvent.offsetX,
335
- offsetY: this._mousemoveEvent.offsetY,
336
- x: this._mousemoveEvent.x,
337
- y: this._mousemoveEvent.y,
338
- });
339
- }
340
- }
341
- else if (this._click_num > 1) {
342
- if (this.hasEvent(this._mesh_Down, ["dbclick"]) &&
343
- new Date().valueOf() - this._click_num > 1 &&
344
- e.button === 0) {
345
- this._mesh_Down.dispatchEvent({
346
- e: this._mouseEvent,
347
- ...intersection,
348
- renderer: this._renderer,
349
- camera: this._camera,
350
- object: intersection.object,
351
- type: "dbclick",
352
- offsetX: this._mousemoveEvent.offsetX,
353
- offsetY: this._mousemoveEvent.offsetY,
354
- x: this._mousemoveEvent.x,
355
- y: this._mousemoveEvent.y,
356
- });
357
- }
358
- }
359
- }
360
- else {
361
- if (this.hasEvent(this._mesh_Down, ["click"])) {
362
- this._mesh_Down.dispatchEvent({
363
- e: this._mouseEvent,
364
- ...intersection,
365
- renderer: this._renderer,
366
- camera: this._camera,
367
- object: intersection.object,
368
- type: "click",
369
- offsetX: this._mousemoveEvent.offsetX,
370
- offsetY: this._mousemoveEvent.offsetY,
371
- x: this._mousemoveEvent.x,
372
- y: this._mousemoveEvent.y,
373
- });
374
- }
375
- if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
376
- this._mesh_Down.dispatchEvent({
377
- e: this._mouseEvent,
378
- ...intersection,
379
- renderer: this._renderer,
380
- camera: this._camera,
381
- object: intersection.object,
382
- type: "leftclick",
383
- offsetX: this._mousemoveEvent.offsetX,
384
- offsetY: this._mousemoveEvent.offsetY,
385
- x: this._mousemoveEvent.x,
386
- y: this._mousemoveEvent.y,
387
- });
388
- }
389
- if (this.hasEvent(this._mesh_Down, ["rightclick"]) && e.button === 2) {
390
- this._mesh_Down.dispatchEvent({
391
- e: this._mouseEvent,
392
- ...intersection,
393
- renderer: this._renderer,
394
- camera: this._camera,
395
- object: intersection.object,
396
- type: "rightclick",
397
- offsetX: this._mousemoveEvent.offsetX,
398
- offsetY: this._mousemoveEvent.offsetY,
399
- x: this._mousemoveEvent.x,
400
- y: this._mousemoveEvent.y,
401
- });
402
- }
403
- }
404
- this._click_num = 0;
405
- }
406
- });
407
- }
1
+ //
2
+ //
3
+ //
4
+ //
5
+ //
6
+ // 启动鼠标事件
7
+ import { Raycaster, Vector2 } from "three";
8
+ import { Mesh } from "three";
9
+ import { debounce } from "lodash";
10
+ import { computeBoundsTree, acceleratedRaycast } from "three-mesh-bvh";
11
+ // Add the extension functions
12
+ Mesh.prototype.raycast = acceleratedRaycast;
13
+ /**
14
+ * js 专用的鼠标拾取模型对象
15
+ */
16
+ export default class ThreeMouse {
17
+ constructor(renderer, camera, scene) {
18
+ this._renderer = renderer;
19
+ this._camera = camera;
20
+ this._scene = scene;
21
+ this._frame = this._renderer.info.render.frame;
22
+ this._renderer.domElement.addEventListener("mouseenter", () => {
23
+ this._mouseInRenderer = true;
24
+ }, true); //鼠标进入开启拾取
25
+ this._renderer.domElement.addEventListener("mouseleave", this._mouseleave, true); //鼠标离开停止拾取
26
+ this._renderer.domElement.addEventListener("mousemove", this._mousemove, true); //鼠标移动监听事件
27
+ this._renderer.domElement.addEventListener("pointerdown", this._mousedown, true); //鼠标按下监听事件
28
+ this._renderer.domElement.addEventListener("pointerup", this._mouseup, true); //鼠标弹起监听事件
29
+ }
30
+ // 渲染器
31
+ _renderer;
32
+ _camera;
33
+ _scene;
34
+ // 鼠标在渲染器上面的位置
35
+ _mosePosition = new Vector2(0, 0);
36
+ // 鼠标按下的位置 如果和鼠标弹起的位置相同 才算一次有效的点击事件
37
+ _mouseDownPosition = new Vector2(0, 0);
38
+ //当前鼠标指针上的对象
39
+ _mesh_on;
40
+ //鼠标按下的对象
41
+ _mesh_Down;
42
+ //射线拾取器
43
+ _raycaster = new Raycaster();
44
+ // 当前渲染的帧数 ( 鼠标滑动事件 一帧只需要执行费一次即可 )
45
+ _frame = 0;
46
+ //鼠标是否在渲染器上
47
+ _mouseInRenderer = false;
48
+ // 鼠标滑动的事件
49
+ _mousemoveEvent;
50
+ // 鼠标事件
51
+ _mouseEvent;
52
+ // 需要被拾取的对象数组
53
+ _object3ds = [];
54
+ // 点击次数
55
+ _click_num = 0;
56
+ // 获取拾取到的对象
57
+ _getSelected(object3ds) {
58
+ let intersection;
59
+ if (object3ds.length) {
60
+ intersection = this._raycaster.intersectObjects(object3ds, false)[0];
61
+ }
62
+ return intersection;
63
+ }
64
+ // 判断对象上面是否有事件
65
+ hasEvent(object, types = []) {
66
+ if (!object) {
67
+ return false;
68
+ }
69
+ // 如果 启用事件为关闭的话就不执行事件
70
+ if (object["userData"] && object["userData"]["enableEvent"] === false) {
71
+ return false;
72
+ }
73
+ const hasevent = types.some((type) => {
74
+ //@ts-ignore
75
+ if (object["_listeners"] &&
76
+ object["_listeners"][type] &&
77
+ object["_listeners"][type][0]) {
78
+ return true;
79
+ }
80
+ // if (object["userData"] && object["userData"]["cursor"]) {
81
+ // return true;
82
+ // }
83
+ return false;
84
+ });
85
+ return hasevent;
86
+ }
87
+ // 判断对象上是否有鼠标样式
88
+ hasCursor(object) {
89
+ if (!object) {
90
+ return false;
91
+ }
92
+ // 如果 启用事件为关闭的话就不执行事件
93
+ if (object["userData"] && object["userData"]["enableEvent"] === false) {
94
+ return false;
95
+ }
96
+ if (object["userData"] && object["userData"]["cursor"]) {
97
+ return true;
98
+ }
99
+ }
100
+ // 分发鼠标拾取事件
101
+ dispatchEvent() {
102
+ // 提取有事件的对象
103
+ const meshs = [];
104
+ this._scene.traverseVisible((mesh) => {
105
+ // 判断对象是否有指定的事件
106
+ if (this.hasCursor(mesh) ||
107
+ this.hasEvent(mesh, [
108
+ "leftclick",
109
+ "rightclick",
110
+ "click",
111
+ "dbclick",
112
+ "mouseenter",
113
+ "mouseleave",
114
+ "mousemove",
115
+ "mousedown",
116
+ "mouseup",
117
+ ])) {
118
+ if (mesh.isMesh &&
119
+ !mesh.geometry.boundsTree &&
120
+ mesh.geometry.attributes.position &&
121
+ mesh.geometry.attributes.position.count > 0) {
122
+ computeBoundsTree.apply(mesh.geometry);
123
+ // disposeBoundsTree.apply((mesh as Mesh).geometry);
124
+ }
125
+ meshs.push(mesh);
126
+ }
127
+ });
128
+ this._object3ds = meshs;
129
+ // 没有鼠标事件就不往下执行了
130
+ if (!this._mousemoveEvent || !this._mouseInRenderer) {
131
+ return;
132
+ }
133
+ // 拾取模型
134
+ let intersection = this._getSelected(meshs);
135
+ if (intersection) {
136
+ const { face, object } = intersection;
137
+ // face && face.normal.applyMatrix4(object.matrixWorld);
138
+ const MouseEvent = Object.assign(intersection, {
139
+ // 将来可能用到的对象
140
+ e: this._mousemoveEvent,
141
+ renderer: this._renderer,
142
+ camera: this._camera,
143
+ object: intersection.object,
144
+ type: this._mousemoveEvent.type,
145
+ offsetX: this._mousemoveEvent.offsetX,
146
+ offsetY: this._mousemoveEvent.offsetY,
147
+ x: this._mousemoveEvent.x,
148
+ y: this._mousemoveEvent.y,
149
+ });
150
+ // 触发滑动事件
151
+ if (this._mesh_on === MouseEvent.object) {
152
+ if (this.hasEvent(MouseEvent.object, ["mousemove"])) {
153
+ MouseEvent.type = "mousemove";
154
+ MouseEvent.object.dispatchEvent(MouseEvent);
155
+ }
156
+ // 鼠标划入滑出事件
157
+ }
158
+ else if (this._mesh_on !== MouseEvent.object) {
159
+ if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
160
+ MouseEvent.type = "mouseleave";
161
+ this._mesh_on.dispatchEvent(MouseEvent);
162
+ }
163
+ if (this.hasEvent(MouseEvent.object, ["mouseenter"])) {
164
+ MouseEvent.type = "mouseenter";
165
+ MouseEvent.object.dispatchEvent(MouseEvent);
166
+ }
167
+ }
168
+ this._mesh_on = MouseEvent.object || undefined; // 设置为当前鼠标上的对象
169
+ // 鼠标样式
170
+ if (this._mesh_on &&
171
+ this._mesh_on.userData &&
172
+ this._mesh_on.userData.cursor) {
173
+ this._renderer.domElement.style.cursor = this._mesh_on.userData.cursor;
174
+ }
175
+ else {
176
+ this._renderer.domElement.style.cursor = "auto";
177
+ }
178
+ }
179
+ else {
180
+ if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
181
+ // 鼠标离开事件
182
+ this._mesh_on.dispatchEvent({
183
+ e: this._mouseEvent,
184
+ renderer: this._renderer,
185
+ camera: this._camera,
186
+ object: this._mesh_on,
187
+ type: "mouseleave",
188
+ offsetX: this._mousemoveEvent.offsetX,
189
+ offsetY: this._mousemoveEvent.offsetY,
190
+ x: this._mousemoveEvent.x,
191
+ y: this._mousemoveEvent.y,
192
+ });
193
+ }
194
+ // 置空当前鼠标上面的对象
195
+ this._mesh_on = undefined;
196
+ this._renderer.domElement.style.cursor = "auto"; // 鼠标样式
197
+ }
198
+ }
199
+ // 鼠标离开事件
200
+ _mouseleave = (e) => {
201
+ this._mouseEvent = e;
202
+ this._mouseInRenderer = false;
203
+ // 鼠标离开事件
204
+ if (this._mousemoveEvent && this.hasEvent(this._mesh_on, ["mouseleave"])) {
205
+ this._mesh_on.dispatchEvent({
206
+ e: this._mouseEvent,
207
+ renderer: this._renderer,
208
+ camera: this._camera,
209
+ object: this._mesh_on,
210
+ type: "mouseleave",
211
+ offsetX: this._mousemoveEvent.offsetX,
212
+ offsetY: this._mousemoveEvent.offsetY,
213
+ x: this._mousemoveEvent.x,
214
+ y: this._mousemoveEvent.y,
215
+ });
216
+ }
217
+ // 置空当前鼠标上面的对象
218
+ this._mesh_on = undefined;
219
+ this._renderer.domElement.style.cursor = "auto"; // 鼠标样式
220
+ };
221
+ // 鼠标滑动 设置鼠标位置
222
+ _mousemove = (e) => {
223
+ this._mousemoveEvent = e;
224
+ this._frame = this._renderer.info.render.frame;
225
+ if (document.pointerLockElement) {
226
+ // 如果当前有元素 锁住了鼠标
227
+ this._mosePosition.set(0, 0); // 鼠标就指向canvas 的正中心
228
+ }
229
+ else {
230
+ this._mosePosition.x = (e.offsetX / this._renderer.domElement.offsetWidth) * 2 - 1;
231
+ this._mosePosition.y = -(e.offsetY / this._renderer.domElement.offsetHeight) * 2 + 1;
232
+ }
233
+ this._raycaster.setFromCamera(this._mosePosition, this._camera); // 设置射线拾取的参数
234
+ };
235
+ // 鼠标按下事件
236
+ _mousedown = (e) => {
237
+ this._mouseEvent = e;
238
+ // 记录按下的位置
239
+ this._mouseDownPosition.set(e.offsetX, e.offsetY);
240
+ this._mousemove(e);
241
+ let intersection = this._getSelected(this._object3ds);
242
+ if (!intersection || !this._mousemoveEvent) {
243
+ return;
244
+ }
245
+ this._mesh_Down = this._mesh_on = intersection.object;
246
+ // 触发鼠标按下事件
247
+ if (this.hasEvent(this._mesh_Down, ["mousedown"])) {
248
+ this._mesh_Down.dispatchEvent({
249
+ e: this._mouseEvent,
250
+ ...intersection,
251
+ renderer: this._renderer,
252
+ camera: this._camera,
253
+ object: intersection.object,
254
+ type: "mousedown",
255
+ offsetX: this._mousemoveEvent.offsetX,
256
+ offsetY: this._mousemoveEvent.offsetY,
257
+ x: this._mousemoveEvent.x,
258
+ y: this._mousemoveEvent.y,
259
+ });
260
+ }
261
+ };
262
+ // 鼠标弹起事件
263
+ _mouseup = debounce(async (e) => {
264
+ this._mouseEvent = e;
265
+ // 提取有事件的对象
266
+ const meshs = [];
267
+ let intersection = this._getSelected(this._object3ds);
268
+ if (!intersection || !this._mousemoveEvent) {
269
+ return;
270
+ }
271
+ this._mesh_on = intersection.object;
272
+ if (this.hasEvent(this._mesh_on, ["mouseup"])) {
273
+ this._mesh_on.dispatchEvent({
274
+ e: this._mouseEvent,
275
+ ...intersection,
276
+ renderer: this._renderer,
277
+ camera: this._camera,
278
+ object: intersection.object,
279
+ type: "mouseup",
280
+ offsetX: this._mousemoveEvent.offsetX,
281
+ offsetY: this._mousemoveEvent.offsetY,
282
+ x: this._mousemoveEvent.x,
283
+ y: this._mousemoveEvent.y,
284
+ });
285
+ }
286
+ // 触发鼠标弹起事件
287
+ if (this._mesh_Down &&
288
+ this._mesh_Down === this._mesh_on &&
289
+ Math.abs(this._mouseDownPosition.x - e.offsetX) < 5 &&
290
+ Math.abs(this._mouseDownPosition.y - e.offsetY) < 5) {
291
+ // 是否有双击事件
292
+ if (this.hasEvent(this._mesh_Down, ["dbclick"])) {
293
+ this._click_num++;
294
+ await new Promise((resolve) => setTimeout(resolve, 200));
295
+ // 只点击了一次
296
+ if (this._click_num === 1) {
297
+ if (this.hasEvent(this._mesh_Down, ["click"])) {
298
+ this._mesh_Down.dispatchEvent({
299
+ e: this._mouseEvent,
300
+ ...intersection,
301
+ renderer: this._renderer,
302
+ camera: this._camera,
303
+ object: intersection.object,
304
+ type: "click",
305
+ offsetX: this._mousemoveEvent.offsetX,
306
+ offsetY: this._mousemoveEvent.offsetY,
307
+ x: this._mousemoveEvent.x,
308
+ y: this._mousemoveEvent.y,
309
+ });
310
+ }
311
+ if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
312
+ this._mesh_Down.dispatchEvent({
313
+ e: this._mouseEvent,
314
+ ...intersection,
315
+ renderer: this._renderer,
316
+ camera: this._camera,
317
+ object: intersection.object,
318
+ type: "leftclick",
319
+ offsetX: this._mousemoveEvent.offsetX,
320
+ offsetY: this._mousemoveEvent.offsetY,
321
+ x: this._mousemoveEvent.x,
322
+ y: this._mousemoveEvent.y,
323
+ });
324
+ }
325
+ if (this.hasEvent(this._mesh_Down, ["rightclick"]) &&
326
+ e.button === 2) {
327
+ this._mesh_Down.dispatchEvent({
328
+ e: this._mouseEvent,
329
+ ...intersection,
330
+ renderer: this._renderer,
331
+ camera: this._camera,
332
+ object: intersection.object,
333
+ type: "rightclick",
334
+ offsetX: this._mousemoveEvent.offsetX,
335
+ offsetY: this._mousemoveEvent.offsetY,
336
+ x: this._mousemoveEvent.x,
337
+ y: this._mousemoveEvent.y,
338
+ });
339
+ }
340
+ }
341
+ else if (this._click_num > 1) {
342
+ if (this.hasEvent(this._mesh_Down, ["dbclick"]) &&
343
+ new Date().valueOf() - this._click_num > 1 &&
344
+ e.button === 0) {
345
+ this._mesh_Down.dispatchEvent({
346
+ e: this._mouseEvent,
347
+ ...intersection,
348
+ renderer: this._renderer,
349
+ camera: this._camera,
350
+ object: intersection.object,
351
+ type: "dbclick",
352
+ offsetX: this._mousemoveEvent.offsetX,
353
+ offsetY: this._mousemoveEvent.offsetY,
354
+ x: this._mousemoveEvent.x,
355
+ y: this._mousemoveEvent.y,
356
+ });
357
+ }
358
+ }
359
+ }
360
+ else {
361
+ if (this.hasEvent(this._mesh_Down, ["click"])) {
362
+ this._mesh_Down.dispatchEvent({
363
+ e: this._mouseEvent,
364
+ ...intersection,
365
+ renderer: this._renderer,
366
+ camera: this._camera,
367
+ object: intersection.object,
368
+ type: "click",
369
+ offsetX: this._mousemoveEvent.offsetX,
370
+ offsetY: this._mousemoveEvent.offsetY,
371
+ x: this._mousemoveEvent.x,
372
+ y: this._mousemoveEvent.y,
373
+ });
374
+ }
375
+ if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
376
+ this._mesh_Down.dispatchEvent({
377
+ e: this._mouseEvent,
378
+ ...intersection,
379
+ renderer: this._renderer,
380
+ camera: this._camera,
381
+ object: intersection.object,
382
+ type: "leftclick",
383
+ offsetX: this._mousemoveEvent.offsetX,
384
+ offsetY: this._mousemoveEvent.offsetY,
385
+ x: this._mousemoveEvent.x,
386
+ y: this._mousemoveEvent.y,
387
+ });
388
+ }
389
+ if (this.hasEvent(this._mesh_Down, ["rightclick"]) && e.button === 2) {
390
+ this._mesh_Down.dispatchEvent({
391
+ e: this._mouseEvent,
392
+ ...intersection,
393
+ renderer: this._renderer,
394
+ camera: this._camera,
395
+ object: intersection.object,
396
+ type: "rightclick",
397
+ offsetX: this._mousemoveEvent.offsetX,
398
+ offsetY: this._mousemoveEvent.offsetY,
399
+ x: this._mousemoveEvent.x,
400
+ y: this._mousemoveEvent.y,
401
+ });
402
+ }
403
+ }
404
+ this._click_num = 0;
405
+ }
406
+ });
407
+ }