camera ray intersector > screen ray intersector with screen point

Author: bbohlender

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),

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'

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,