Needle Engine

Changes between version 3.10.0-alpha and 3.10.0-beta
Files changed (6) hide show
  1. src/engine-components/ui/Canvas.ts +9 -1
  2. src/engine-components/DragControls.ts +24 -3
  3. src/engine/engine_element_overlay.ts +17 -30
  4. src/engine/engine_input.ts +9 -4
  5. src/engine-components/ui/Text.ts +3 -1
  6. src/engine-components/timeline/TimelineTracks.ts +30 -13
src/engine-components/ui/Canvas.ts CHANGED
@@ -190,7 +190,15 @@
190
190
  }
191
191
 
192
192
  onBeforeRenderRoutine = () => {
193
- if(this.context.isInVR) return;
193
+
194
+ if (this.context.isInVR) {
195
+ // TODO TMUI @swingingtom - For VR this is so we don't have text clipping
196
+ this.shadowComponent?.updateMatrixWorld(true);
197
+ this.shadowComponent?.updateWorldMatrix(true, true);
198
+ EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
199
+ return;
200
+ }
201
+
194
202
  this.previousParent = this.gameObject.parent;
195
203
  // console.log(this.previousParent?.name + "/" + this.gameObject.name);
196
204
 
src/engine-components/DragControls.ts CHANGED
@@ -13,6 +13,8 @@
13
13
  import { InstancingUtil } from "../engine/engine_instancing";
14
14
  import { OrbitControls } from "./OrbitControls";
15
15
  import { BufferGeometry, Camera, Color, Line, LineBasicMaterial, Matrix4, Mesh, MeshBasicMaterial, Object3D, Plane, Ray, Raycaster, SphereGeometry, Vector2, Vector3 } from "three";
16
+ import { ObjectRaycaster } from "./ui/Raycaster";
17
+ import { serializable } from "../engine/engine_serialization_decorator";
16
18
 
17
19
  const debug = false;
18
20
 
@@ -37,7 +39,14 @@
37
39
  private static _active: number = 0;
38
40
  public static get HasAnySelected(): boolean { return this._active > 0; }
39
41
 
42
+ /** Show's drag gizmos when enabled */
43
+ @serializable()
44
+ public showGizmo: boolean = true;
40
45
 
46
+ /** When enabled DragControls will drag vertically when the object is viewed from a low angle */
47
+ @serializable()
48
+ public useViewAngle: boolean = true;
49
+
41
50
  public transformSelf: boolean = true;
42
51
  // public transformGroup: boolean = true;
43
52
  // public targets: Object3D[] | null = null;
@@ -47,6 +56,7 @@
47
56
 
48
57
  private selectStartEventListener: ((controls: DragControls, args: SelectArgs) => void)[] = [];
49
58
  private selectEndEventListener: Array<Function> = [];
59
+ private _dragHelper: DragHelper | null = null;
50
60
 
51
61
  constructor() {
52
62
  super();
@@ -66,11 +76,13 @@
66
76
  }
67
77
  }
68
78
 
69
- private _dragHelper: DragHelper | null = null;
70
79
 
71
80
 
72
81
  start() {
73
82
  this.orbit = GameObject.findObjectOfType(OrbitControls, this.context);
83
+ if (!this.gameObject.getComponentInParent(ObjectRaycaster)) {
84
+ this.gameObject.addNewComponent(ObjectRaycaster);
85
+ }
74
86
  }
75
87
 
76
88
  private static lastHovered: Object3D;
@@ -234,6 +246,8 @@
234
246
 
235
247
  private onUpdateDrag() {
236
248
  if (!this._dragHelper) return;
249
+ this._dragHelper.showGizmo = this.showGizmo;
250
+ this._dragHelper.useViewAngle = this.useViewAngle;
237
251
 
238
252
  this._dragHelper.onUpdate(this.context);
239
253
  for (const rb of this._draggingRigidbodies) {
@@ -279,6 +293,9 @@
279
293
 
280
294
  class DragHelper {
281
295
 
296
+ showGizmo: boolean = true;
297
+ useViewAngle: boolean = true;
298
+
282
299
  public get hasSelected(): boolean {
283
300
  return this._selected !== null && this._selected !== undefined;
284
301
  }
@@ -416,7 +433,10 @@
416
433
  const lookDot = Math.abs(lookDirection.dot(this._groundOffsetVector));
417
434
 
418
435
  const switchModeKeyPressed = this._context?.input.isKeyPressed(mainKey) || this._context?.input.isKeyPressed(secondaryKey);
419
- const dragOnGroundPlane = !isRotating && lookDot > .2 && !switchModeKeyPressed && this._context!.input.getPointerPressedCount() <= 1;
436
+ let dragOnGroundPlane = !this.useViewAngle || lookDot > .2;
437
+ if (isRotating || switchModeKeyPressed || this._context!.input.getPointerPressedCount() > 1) {
438
+ dragOnGroundPlane = false;
439
+ }
420
440
  const changed = this._didDragOnGroundPlaneLastFrame !== dragOnGroundPlane;
421
441
  this._didDragOnGroundPlaneLastFrame = dragOnGroundPlane;
422
442
 
@@ -477,8 +497,9 @@
477
497
  this._groundLine.scale.y = this._groundDistance;
478
498
  }
479
499
  else this._groundLine.scale.y = 1000;
500
+ this._groundLine.visible = this.showGizmo;
480
501
 
481
- this._groundMarker.visible = pointOnPlane !== null;
502
+ this._groundMarker.visible = pointOnPlane !== null && this.showGizmo;
482
503
  if (pointOnPlane) {
483
504
  const s = getWorldPosition(this._camera).distanceTo(pointOnPlane) * .01;
484
505
  this._groundMarker.scale.set(s, s, s);
src/engine/engine_element_overlay.ts CHANGED
@@ -10,20 +10,14 @@
10
10
 
11
11
  get ARContainer(): HTMLElement | null { return this.arContainer; }
12
12
 
13
- constructor() {
14
- this.closeARCallback = this.onRequestedEndAR.bind(this);
15
- }
16
-
17
13
  private arContainer: HTMLElement | null = null;
18
- closeARCallback: any;
19
14
  currentSession: XRSession | null = null;
20
- registeredCloseEventElements: Element[] = [];
21
15
 
22
16
  private _createdAROnlyElements: Array<any> = [];
23
17
  private _reparentedObjects: Array<{ el: Element, previousParent: HTMLElement | null }> = [];
24
18
  private contentElement: HTMLElement | null = null;
25
19
 
26
- requestEndAR() {
20
+ requestEndAR = () => {
27
21
  this.onRequestedEndAR();
28
22
  }
29
23
 
@@ -41,20 +35,7 @@
41
35
  this.arContainer?.appendChild(el);
42
36
  }
43
37
  }
44
-
45
- const quit_Elements = overlayContainer.getElementsByClassName(quitARClassName);
46
- if (!quit_Elements || quit_Elements.length <= 0) {
47
- console.warn(`Missing quit AR elements, creating fallback X button. Use class name '${quitARClassName}' to override.`);
48
- this.createFallbackCloseARButton(this.arContainer);
49
- }
50
- else {
51
- for (let i = 0; i < quit_Elements.length; i++) {
52
- const el = quit_Elements[i];
53
- if (!el) continue;
54
- el.addEventListener("click", this.closeARCallback);
55
- this.registeredCloseEventElements.push(el);
56
- }
57
- }
38
+ this.ensureQuitARButton(this.arContainer);
58
39
  }
59
40
 
60
41
  onEnd(_context: Context) {
@@ -107,7 +88,7 @@
107
88
 
108
89
  const overlaySlot = needleEngineElement.shadowRoot!.querySelector(".overlay-content");
109
90
  if (overlaySlot) contentElement.appendChild(overlaySlot);
110
- if (debug && !isMobileDevice()) this.createFallbackCloseARButton(contentElement);
91
+ if (debug && !isMobileDevice()) this.ensureQuitARButton(contentElement);
111
92
  return contentElement;
112
93
  }
113
94
 
@@ -115,24 +96,30 @@
115
96
  if (!this.currentSession) return;
116
97
  this.currentSession.end();
117
98
  this.currentSession = null;
118
-
119
- for (const el of this.registeredCloseEventElements) {
120
- el.removeEventListener("click", this.closeARCallback);
121
- }
122
- this.registeredCloseEventElements.length = 0;
123
99
  }
124
100
 
125
- private createFallbackCloseARButton(element: HTMLElement) {
101
+ private ensureQuitARButton(element: HTMLElement) {
126
102
  const quitARSlot = document.createElement("slot");
127
103
  quitARSlot.setAttribute("name", "quit-ar");
128
104
  this.appendElement(quitARSlot, element);
129
- if (debug) quitARSlot.addEventListener('click', () => console.log("Clicked fallback close button"));
130
- quitARSlot.addEventListener('click', this.closeARCallback);
131
105
  this._createdAROnlyElements.push(quitARSlot);
132
106
  // for mozilla XR reparenting we have to make sure the close button is clickable so we set it on the element directly
133
107
  // it's in general perhaps more safe to set it on the element to ensure it's clickable
134
108
  quitARSlot.style.pointerEvents = "auto";
135
109
 
110
+ // We want to search the document if there's a quit-ar button
111
+ // In which case we don't want to populate the default button (slot) with any content
112
+ const quitARElement = document.querySelector(`.${quitARClassName}`);
113
+ if (quitARElement) {
114
+ quitARElement.addEventListener('click', this.requestEndAR);
115
+ if (debug) quitARElement.addEventListener('click', () => console.log("Clicked quit-ar button"));
116
+ // We found a explicit quit-ar element
117
+ return;
118
+ }
119
+
120
+ quitARSlot.addEventListener('click', this.requestEndAR);
121
+ if (debug) quitARSlot.addEventListener('click', () => console.log("Clicked fallback close button"));
122
+
136
123
  // we need another container to make sure the button is always on top
137
124
  const fixedButtonContainer = document.createElement("div");
138
125
  fixedButtonContainer.style.cssText = `
src/engine/engine_input.ts CHANGED
@@ -528,10 +528,15 @@
528
528
  // check if we received an mouse UP event for a touch (for some reason we get a mouse.down for touch.up)
529
529
  if (evt.pointerType === PointerType.Mouse) {
530
530
  const upTime = this._pointerUpTimestamp[evt.button];
531
- if (upTime > 0 && upTime === evt.source?.timeStamp) {
532
- // we received an UP event for a touch, ignore this DOWN event
533
- if (debug) console.log("Ignoring mouse.down for touch.up");
534
- return;
531
+ if (upTime > 0 && evt.source?.timeStamp !== undefined) {
532
+ const diff = (upTime - evt.source.timeStamp);
533
+ // on android touch up and mouse up have the exact same value
534
+ // but on iOS they are not the same but a few milliseconds apart
535
+ if (diff < 30) {
536
+ // we received an UP event for a touch, ignore this DOWN event
537
+ if (debug) console.log("Ignoring mouse.down for touch.up");
538
+ return;
539
+ }
535
540
  }
536
541
  }
537
542
 
src/engine-components/ui/Text.ts CHANGED
@@ -103,7 +103,9 @@
103
103
  }
104
104
 
105
105
  onBeforeRender(): void {
106
- if (this.uiObject && (this.Root as any as ICanvas).screenspace) {
106
+ // TODO TMUI @swingingtom this is so we don't have text clipping
107
+ if (this.uiObject && (this.Canvas?.screenspace || this.context.isInVR))
108
+ {
107
109
  this.updateOverflow();
108
110
  }
109
111
  }
src/engine-components/timeline/TimelineTracks.ts CHANGED
@@ -331,9 +331,19 @@
331
331
 
332
332
  let handleLoop = isInTimeRange;
333
333
  if (doPreExtrapolate) {
334
- if (preExtrapolation !== Models.ClipExtrapolation.Hold) {
335
- time += model.start;
336
- handleLoop = true;
334
+ switch (preExtrapolation) {
335
+ case Models.ClipExtrapolation.Hold:
336
+ // Nothing to do
337
+ break;
338
+ case Models.ClipExtrapolation.Loop:
339
+ // TODO: this is not correct yet
340
+ time += model.start;
341
+ handleLoop = true;
342
+ break;
343
+ default:
344
+ time += model.start;
345
+ handleLoop = true;
346
+ break;
337
347
  }
338
348
  }
339
349
 
@@ -341,6 +351,8 @@
341
351
  let t = this.getClipTime(time, model);
342
352
  let loops = 0;
343
353
  const duration = clipModel.duration;
354
+ // This is the actual duration of the clip in the timeline (with clipping and scale)
355
+ // const clipDuration = (model.end - model.start) * model.timeScale;
344
356
 
345
357
  if (doPreExtrapolate) {
346
358
  if (preExtrapolation === Models.ClipExtrapolation.Hold) {
@@ -358,16 +370,21 @@
358
370
  }
359
371
  }
360
372
  else if (!isInTimeRange) {
361
- switch (postExtrapolation) {
362
- case Models.ClipExtrapolation.Loop:
363
- t %= duration;
364
- break;
365
- case Models.ClipExtrapolation.PingPong:
366
- const loops = Math.floor(t / duration);
367
- const invert = loops % 2 !== 0;
368
- t %= duration;
369
- if (invert) t = duration - t;
370
- break;
373
+ if (didPostExtrapolate) {
374
+ switch (postExtrapolation) {
375
+ case Models.ClipExtrapolation.Hold:
376
+ t = this.getClipTime(model.end, model);
377
+ break;
378
+ case Models.ClipExtrapolation.Loop:
379
+ t %= duration;
380
+ break;
381
+ case Models.ClipExtrapolation.PingPong:
382
+ const loops = Math.floor(t / duration);
383
+ const invert = loops % 2 !== 0;
384
+ t %= duration;
385
+ if (invert) t = duration - t;
386
+ break;
387
+ }
371
388
  }
372
389
  }