From e56746c5b00cb54f22e92ed77358f8fcc3907a8c Mon Sep 17 00:00:00 2001 From: Bela Bohlender Date: Thu, 28 Nov 2024 09:47:27 +0100 Subject: [PATCH] camera ray intersector > screen ray intersector with screen point --- packages/pointer-events/src/forward.ts | 6 +++--- packages/pointer-events/src/intersections/index.ts | 11 +++++++++-- packages/pointer-events/src/intersections/ray.ts | 9 +++++---- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/pointer-events/src/forward.ts b/packages/pointer-events/src/forward.ts index f295887..bee13e1 100644 --- a/packages/pointer-events/src/forward.ts +++ b/packages/pointer-events/src/forward.ts @@ -1,7 +1,7 @@ -import { Mesh, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector2 } from 'three' +import { Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector2 } from 'three' import { GetCamera, Pointer, PointerOptions } from './pointer.js' import { NativeEvent, NativeWheelEvent, PointerEvent } from './event.js' -import { CameraRayIntersector } from './intersections/ray.js' +import { ScreenRayIntersector } from './intersections/ray.js' import { generateUniquePointerId } from './pointer/index.js' import { IntersectionOptions } from './intersections/index.js' @@ -122,7 +122,7 @@ function forwardEvents( generateUniquePointerId(), `${pointerTypePrefix}${event.pointerType}`, event.pointerState, - new CameraRayIntersector((nativeEvent, coords) => { + new ScreenRayIntersector((nativeEvent, coords) => { toCoords(nativeEvent, coords) return getCamera() }, options), diff --git a/packages/pointer-events/src/intersections/index.ts b/packages/pointer-events/src/intersections/index.ts index 92c1215..b698c0c 100644 --- a/packages/pointer-events/src/intersections/index.ts +++ b/packages/pointer-events/src/intersections/index.ts @@ -1,4 +1,4 @@ -import { Intersection as ThreeIntersection, Quaternion, Vector3, Line3 } from 'three' +import { Intersection as ThreeIntersection, Quaternion, Vector3, Line3, Vector2 } from 'three' export type Intersection = ThreeIntersection & { pointerPosition: Vector3 @@ -16,8 +16,15 @@ export type Intersection = ThreeIntersection & { lineIndex: number } | { - type: 'camera-ray' + type: 'screen-ray' + /** + * distance to the near plane of the camera of the screen + */ distanceViewPlane: number + /** + * point on the screen for x and y from -1 to 1 + */ + screenPoint: Vector2 } | { type: 'ray' diff --git a/packages/pointer-events/src/intersections/ray.ts b/packages/pointer-events/src/intersections/ray.ts index 291432b..0e63756 100644 --- a/packages/pointer-events/src/intersections/ray.ts +++ b/packages/pointer-events/src/intersections/ray.ts @@ -143,7 +143,7 @@ export class RayIntersector implements Intersector { } } -export class CameraRayIntersector implements Intersector { +export class ScreenRayIntersector implements Intersector { private readonly raycaster = new Raycaster() private readonly fromPosition = new Vector3() private readonly fromQuaternion = new Quaternion() @@ -165,7 +165,7 @@ export class CameraRayIntersector implements Intersector { public intersectPointerCapture({ intersection, object }: PointerCapture, nativeEvent: unknown): Intersection { const details = intersection.details - if (details.type != 'camera-ray') { + if (details.type != 'screen-ray') { throw new Error( `unable to process a pointer capture of type "${intersection.details.type}" with a camera ray intersector`, ) @@ -230,7 +230,7 @@ export class CameraRayIntersector implements Intersector { return voidObjectIntersectionFromRay( scene, this.raycaster.ray, - (distance) => ({ type: 'camera-ray', distanceViewPlane: distance }), + (distance) => ({ type: 'screen-ray', distanceViewPlane: distance, screenPoint: this.coords.clone() }), pointerPosition, pointerQuaternion, ) @@ -241,8 +241,9 @@ export class CameraRayIntersector implements Intersector { return Object.assign(intersection, { details: { - type: 'camera-ray' as const, + type: 'screen-ray' as const, distanceViewPlane: this.viewPlane.distanceToPoint(intersection.point), + screenPoint: this.coords.clone(), }, pointOnFace: intersection.point, pointerPosition,