three-base 2.0.116 → 2.0.118

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 (4) hide show
  1. package/ThreeBase.js +3 -3
  2. package/ThreeMouse.d.ts +11 -12
  3. package/ThreeMouse.js +60 -38
  4. package/package.json +1 -1
package/ThreeBase.js CHANGED
@@ -235,12 +235,12 @@ export default class ThreeBase extends EventDispatcher {
235
235
  // .setLength(distance)
236
236
  // .add(this.controls.target);
237
237
  // // 创建初始方向向量
238
- // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
239
- // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
238
+ // const directionVecA = new Vector3(1, 0, 0); // 需要旋转的初始方向向量
239
+ // const referenceVecB = new Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
240
240
  // // 归一化参考方向向量
241
241
  // referenceVecB.normalize();
242
242
  // // 计算旋转轴
243
- // const axis = new THREE.Vector3().crossVectors(directionVecA, referenceVecB).normalize();
243
+ // const axis = new Vector3().crossVectors(directionVecA, referenceVecB).normalize();
244
244
  // // 计算旋转角度（弧度）
245
245
  // const angle = Math.PI / 36; // 旋转角度为5度，Math.PI / 36为弧度
246
246
  // // 使用applyAxisAngle方法进行旋转
package/ThreeMouse.d.ts CHANGED
@@ -1,10 +1,9 @@
1
- import * as THREE from "three";
2
- import { Object3D, Scene } from "three";
3
- import type { Intersection } from "three";
1
+ import { Object3D, Raycaster, Scene, Vector2, WebGLRenderer } from "three";
2
+ import { Camera, Intersection, Renderer } from "three";
4
3
  export interface ThreeMouseEvent extends Intersection {
5
4
  e: MouseEvent;
6
- renderer: THREE.Renderer;
7
- camera: THREE.Camera;
5
+ renderer: Renderer;
6
+ camera: Camera;
8
7
  type: string;
9
8
  offsetX: number;
10
9
  offsetY: number;
@@ -12,18 +11,18 @@ export interface ThreeMouseEvent extends Intersection {
12
11
  y: number;
13
12
  }
14
13
  /**
15
- * three.js 专用的鼠标拾取模型对象
14
+ * js 专用的鼠标拾取模型对象
16
15
  */
17
16
  export default class ThreeMouse {
18
- constructor(renderer: THREE.WebGLRenderer, camera: THREE.Camera, scene: THREE.Scene);
19
- _renderer: THREE.WebGLRenderer;
20
- _camera: THREE.Camera;
17
+ constructor(renderer: WebGLRenderer, camera: Camera, scene: Scene);
18
+ _renderer: WebGLRenderer;
19
+ _camera: Camera;
21
20
  _scene: Scene;
22
- _mosePosition: THREE.Vector2;
23
- _mouseDownPosition: THREE.Vector2;
21
+ _mosePosition: Vector2;
22
+ _mouseDownPosition: Vector2;
24
23
  _mesh_on?: Object3D;
25
24
  _mesh_Down?: Object3D;
26
- _raycaster: THREE.Raycaster;
25
+ _raycaster: Raycaster;
27
26
  _frame: number;
28
27
  _mouseInRenderer: boolean;
29
28
  _mousemoveEvent?: MouseEvent;
package/ThreeMouse.js CHANGED
@@ -4,16 +4,14 @@
4
4
  //
5
5
  //
6
6
  // 启动鼠标事件
7
- import * as THREE from "three";
8
- import { Raycaster } from "three";
7
+ import { Raycaster, Vector2 } from "three";
8
+ import { Mesh } from "three";
9
9
  import { debounce } from "lodash";
10
- import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh';
10
+ import { computeBoundsTree, acceleratedRaycast, } from "three-mesh-bvh";
11
11
  // Add the extension functions
12
- THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
13
- THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
14
- THREE.Mesh.prototype.raycast = acceleratedRaycast;
12
+ Mesh.prototype.raycast = acceleratedRaycast;
15
13
  /**
16
- * three.js 专用的鼠标拾取模型对象
14
+ * js 专用的鼠标拾取模型对象
17
15
  */
18
16
  export default class ThreeMouse {
19
17
  constructor(renderer, camera, scene) {
@@ -21,7 +19,9 @@ export default class ThreeMouse {
21
19
  this._camera = camera;
22
20
  this._scene = scene;
23
21
  this._frame = this._renderer.info.render.frame;
24
- this._renderer.domElement.addEventListener("mouseenter", () => { this._mouseInRenderer = true; }, true); //鼠标进入开启拾取
22
+ this._renderer.domElement.addEventListener("mouseenter", () => {
23
+ this._mouseInRenderer = true;
24
+ }, true); //鼠标进入开启拾取
25
25
  this._renderer.domElement.addEventListener("mouseleave", this._mouseleave, true); //鼠标离开停止拾取
26
26
  this._renderer.domElement.addEventListener("mousemove", this._mousemove, true); //鼠标移动监听事件
27
27
  this._renderer.domElement.addEventListener("pointerdown", this._mousedown, true); //鼠标按下监听事件
@@ -32,9 +32,9 @@ export default class ThreeMouse {
32
32
  _camera;
33
33
  _scene;
34
34
  // 鼠标在渲染器上面的位置
35
- _mosePosition = new THREE.Vector2(0, 0);
35
+ _mosePosition = new Vector2(0, 0);
36
36
  // 鼠标按下的位置 如果和鼠标弹起的位置相同 才算一次有效的点击事件
37
- _mouseDownPosition = new THREE.Vector2(0, 0);
37
+ _mouseDownPosition = new Vector2(0, 0);
38
38
  //当前鼠标指针上的对象
39
39
  _mesh_on;
40
40
  //鼠标按下的对象
@@ -61,7 +61,6 @@ export default class ThreeMouse {
61
61
  }
62
62
  return intersection;
63
63
  }
64
- ;
65
64
  // 判断对象上面是否有事件
66
65
  hasEvent(object, types = []) {
67
66
  if (!object) {
@@ -71,9 +70,11 @@ export default class ThreeMouse {
71
70
  if (object["userData"] && object["userData"]["enableEvent"] === false) {
72
71
  return false;
73
72
  }
74
- const hasevent = types.some(type => {
73
+ const hasevent = types.some((type) => {
75
74
  //@ts-ignore
76
- if (object["_listeners"] && object["_listeners"][type] && object["_listeners"][type][0]) {
75
+ if (object["_listeners"] &&
76
+ object["_listeners"][type] &&
77
+ object["_listeners"][type][0]) {
77
78
  return true;
78
79
  }
79
80
  // if (object["userData"] && object["userData"]["cursor"]) {
@@ -100,11 +101,23 @@ export default class ThreeMouse {
100
101
  dispatchEvent() {
101
102
  // 提取有事件的对象
102
103
  const meshs = [];
103
- this._scene.traverseVisible(mesh => {
104
+ this._scene.traverseVisible((mesh) => {
104
105
  // 判断对象是否有指定的事件
105
- if (this.hasCursor(mesh) || this.hasEvent(mesh, ["leftclick", "rightclick", "click", "dbclick", "mouseenter", "mouseleave", "mousemove", "mousedown", "mouseup"])) {
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
+ ])) {
106
118
  if (mesh.isMesh && !mesh.geometry.boundsTree) {
107
- mesh.geometry.computeBoundsTree();
119
+ computeBoundsTree.apply(mesh.geometry);
120
+ // disposeBoundsTree.apply((mesh as Mesh).geometry);
108
121
  }
109
122
  meshs.push(mesh);
110
123
  }
@@ -120,6 +133,7 @@ export default class ThreeMouse {
120
133
  const { face, object } = intersection;
121
134
  // face && face.normal.applyMatrix4(object.matrixWorld);
122
135
  const MouseEvent = Object.assign(intersection, {
136
+ // 将来可能用到的对象
123
137
  e: this._mousemoveEvent,
124
138
  renderer: this._renderer,
125
139
  camera: this._camera,
@@ -128,7 +142,7 @@ export default class ThreeMouse {
128
142
  offsetX: this._mousemoveEvent.offsetX,
129
143
  offsetY: this._mousemoveEvent.offsetY,
130
144
  x: this._mousemoveEvent.x,
131
- y: this._mousemoveEvent.y
145
+ y: this._mousemoveEvent.y,
132
146
  });
133
147
  // 触发滑动事件
134
148
  if (this._mesh_on === MouseEvent.object) {
@@ -150,7 +164,9 @@ export default class ThreeMouse {
150
164
  }
151
165
  this._mesh_on = MouseEvent.object || undefined; // 设置为当前鼠标上的对象
152
166
  // 鼠标样式
153
- if (this._mesh_on && this._mesh_on.userData && this._mesh_on.userData.cursor) {
167
+ if (this._mesh_on &&
168
+ this._mesh_on.userData &&
169
+ this._mesh_on.userData.cursor) {
154
170
  this._renderer.domElement.style.cursor = this._mesh_on.userData.cursor;
155
171
  }
156
172
  else {
@@ -169,7 +185,7 @@ export default class ThreeMouse {
169
185
  offsetX: this._mousemoveEvent.offsetX,
170
186
  offsetY: this._mousemoveEvent.offsetY,
171
187
  x: this._mousemoveEvent.x,
172
- y: this._mousemoveEvent.y
188
+ y: this._mousemoveEvent.y,
173
189
  });
174
190
  }
175
191
  // 置空当前鼠标上面的对象
@@ -192,7 +208,7 @@ export default class ThreeMouse {
192
208
  offsetX: this._mousemoveEvent.offsetX,
193
209
  offsetY: this._mousemoveEvent.offsetY,
194
210
  x: this._mousemoveEvent.x,
195
- y: this._mousemoveEvent.y
211
+ y: this._mousemoveEvent.y,
196
212
  });
197
213
  }
198
214
  // 置空当前鼠标上面的对象
@@ -203,12 +219,15 @@ export default class ThreeMouse {
203
219
  _mousemove = (e) => {
204
220
  this._mousemoveEvent = e;
205
221
  this._frame = this._renderer.info.render.frame;
206
- if (document.pointerLockElement) { // 如果当前有元素 锁住了鼠标
222
+ if (document.pointerLockElement) {
223
+ // 如果当前有元素 锁住了鼠标
207
224
  this._mosePosition.set(0, 0); // 鼠标就指向canvas 的正中心
208
225
  }
209
226
  else {
210
- this._mosePosition.x = (e.offsetX / this._renderer.domElement.offsetWidth) * 2 - 1;
211
- this._mosePosition.y = -(e.offsetY / this._renderer.domElement.offsetHeight) * 2 + 1;
227
+ this._mosePosition.x =
228
+ (e.offsetX / this._renderer.domElement.offsetWidth) * 2 - 1;
229
+ this._mosePosition.y =
230
+ -(e.offsetY / this._renderer.domElement.offsetHeight) * 2 + 1;
212
231
  }
213
232
  this._raycaster.setFromCamera(this._mosePosition, this._camera); // 设置射线拾取的参数
214
233
  };
@@ -235,7 +254,7 @@ export default class ThreeMouse {
235
254
  offsetX: this._mousemoveEvent.offsetX,
236
255
  offsetY: this._mousemoveEvent.offsetY,
237
256
  x: this._mousemoveEvent.x,
238
- y: this._mousemoveEvent.y
257
+ y: this._mousemoveEvent.y,
239
258
  });
240
259
  }
241
260
  };
@@ -260,7 +279,7 @@ export default class ThreeMouse {
260
279
  offsetX: this._mousemoveEvent.offsetX,
261
280
  offsetY: this._mousemoveEvent.offsetY,
262
281
  x: this._mousemoveEvent.x,
263
- y: this._mousemoveEvent.y
282
+ y: this._mousemoveEvent.y,
264
283
  });
265
284
  }
266
285
  // 触发鼠标弹起事件
@@ -271,7 +290,7 @@ export default class ThreeMouse {
271
290
  // 是否有双击事件
272
291
  if (this.hasEvent(this._mesh_Down, ["dbclick"])) {
273
292
  this._click_num++;
274
- await new Promise(resolve => setTimeout(resolve, 200));
293
+ await new Promise((resolve) => setTimeout(resolve, 200));
275
294
  // 只点击了一次
276
295
  if (this._click_num === 1) {
277
296
  if (this.hasEvent(this._mesh_Down, ["click"])) {
@@ -285,10 +304,10 @@ export default class ThreeMouse {
285
304
  offsetX: this._mousemoveEvent.offsetX,
286
305
  offsetY: this._mousemoveEvent.offsetY,
287
306
  x: this._mousemoveEvent.x,
288
- y: this._mousemoveEvent.y
307
+ y: this._mousemoveEvent.y,
289
308
  });
290
309
  }
291
- if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
310
+ if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
292
311
  this._mesh_Down.dispatchEvent({
293
312
  e: this._mouseEvent,
294
313
  ...intersection,
@@ -299,10 +318,11 @@ export default class ThreeMouse {
299
318
  offsetX: this._mousemoveEvent.offsetX,
300
319
  offsetY: this._mousemoveEvent.offsetY,
301
320
  x: this._mousemoveEvent.x,
302
- y: this._mousemoveEvent.y
321
+ y: this._mousemoveEvent.y,
303
322
  });
304
323
  }
305
- if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
324
+ if (this.hasEvent(this._mesh_Down, ["rightclick"]) &&
325
+ e.button === 2) {
306
326
  this._mesh_Down.dispatchEvent({
307
327
  e: this._mouseEvent,
308
328
  ...intersection,
@@ -313,12 +333,14 @@ export default class ThreeMouse {
313
333
  offsetX: this._mousemoveEvent.offsetX,
314
334
  offsetY: this._mousemoveEvent.offsetY,
315
335
  x: this._mousemoveEvent.x,
316
- y: this._mousemoveEvent.y
336
+ y: this._mousemoveEvent.y,
317
337
  });
318
338
  }
319
339
  }
320
340
  else if (this._click_num > 1) {
321
- if (this.hasEvent(this._mesh_Down, ["dbclick"]) && (new Date().valueOf() - this._click_num > 1) && (e.button === 0)) {
341
+ if (this.hasEvent(this._mesh_Down, ["dbclick"]) &&
342
+ new Date().valueOf() - this._click_num > 1 &&
343
+ e.button === 0) {
322
344
  this._mesh_Down.dispatchEvent({
323
345
  e: this._mouseEvent,
324
346
  ...intersection,
@@ -329,7 +351,7 @@ export default class ThreeMouse {
329
351
  offsetX: this._mousemoveEvent.offsetX,
330
352
  offsetY: this._mousemoveEvent.offsetY,
331
353
  x: this._mousemoveEvent.x,
332
- y: this._mousemoveEvent.y
354
+ y: this._mousemoveEvent.y,
333
355
  });
334
356
  }
335
357
  }
@@ -346,10 +368,10 @@ export default class ThreeMouse {
346
368
  offsetX: this._mousemoveEvent.offsetX,
347
369
  offsetY: this._mousemoveEvent.offsetY,
348
370
  x: this._mousemoveEvent.x,
349
- y: this._mousemoveEvent.y
371
+ y: this._mousemoveEvent.y,
350
372
  });
351
373
  }
352
- if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
374
+ if (this.hasEvent(this._mesh_Down, ["leftclick"]) && e.button === 0) {
353
375
  this._mesh_Down.dispatchEvent({
354
376
  e: this._mouseEvent,
355
377
  ...intersection,
@@ -360,10 +382,10 @@ export default class ThreeMouse {
360
382
  offsetX: this._mousemoveEvent.offsetX,
361
383
  offsetY: this._mousemoveEvent.offsetY,
362
384
  x: this._mousemoveEvent.x,
363
- y: this._mousemoveEvent.y
385
+ y: this._mousemoveEvent.y,
364
386
  });
365
387
  }
366
- if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
388
+ if (this.hasEvent(this._mesh_Down, ["rightclick"]) && e.button === 2) {
367
389
  this._mesh_Down.dispatchEvent({
368
390
  e: this._mouseEvent,
369
391
  ...intersection,
@@ -374,7 +396,7 @@ export default class ThreeMouse {
374
396
  offsetX: this._mousemoveEvent.offsetX,
375
397
  offsetY: this._mousemoveEvent.offsetY,
376
398
  x: this._mousemoveEvent.x,
377
- y: this._mousemoveEvent.y
399
+ y: this._mousemoveEvent.y,
378
400
  });
379
401
  }
380
402
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "three-base",
3
- "version": "2.0.116",
3
+ "version": "2.0.118",
4
4
  "description": "three 3d three-base",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"