next: extend event-data (discussion)

[bigmistqke]

Currently the next-branch passes a very minimal event-object around. For each canvas-event there is a single event-object that is passed to each individual handler:

  const createThreeEvent = <TEvent extends MouseEvent | PointerEvent | WheelEvent>(
    nativeEvent: TEvent,
  ): S3.Event<TEvent> => {
    const event = {
      ...nativeEvent,
      nativeEvent,
      stopped: false,
      stopPropagation: () => (event.stopped = true),
    };
    return event;
  };

react-three-fiber on the other hand passes an individual object for each event-handler containing the following event-data see:

{
  ...DomEvent                      // All the original event data
  ...Intersection                  // All of Three's intersection data - see note 2
  intersections: Intersection[]    // The first intersection of each intersected object
  object: Object3D                 // The object that was actually hit
  eventObject: Object3D            // The object that registered the event
  unprojectedPoint: Vector3        // Camera-unprojected point
  ray: Ray                         // The ray that was used to strike the object
  camera: Camera                   // The camera that was used in the raycaster
  sourceEvent: DomEvent            // A reference to the host event
  delta: number                    // Distance between mouse down and mouse up event in pixels
}

I didn't feel super comfortable back when I made this decision to (potentially) create so many objects on-the-fly, but maybe it's worth to follow r3f here because I assume event-handlers is where most usercode will be.

[gleamish]

Presumably they're doing it for good reasons? What are the threlte people doing? That's a rather nice library too.

[bigmistqke]

good call,
this is threlte's event-data:

type Event = THREE.Intersection & {
  intersections: THREE.Intersection[] // The first intersection of each intersected object
  object: THREE.Object3D // The object that was actually hit
  eventObject: THREE.Object3D // The object that registered the event
  camera: THREE.Camera // The camera used for raycasting
  delta: THREE.Vector2 //  Distance between mouse down and mouse up event in pixels
  nativeEvent: MouseEvent | PointerEvent | WheelEvent // The native browser event
  pointer: Vector2 // The pointer position in normalized device coordinates
  ray: THREE.Ray // The ray used for raycasting
  stopPropagation: () => void // Function to stop propagation of the event
  stopped: boolean // Whether the event propagation has been stopped
}

They seem to spread also the intersection, and keep the DOMEvent scoped to event.nativeEvent.

[gleamish]

Pretty similar to each other - you're already stopping event propagation automatically?

I don't understand what an unprojectedPoint might be.

[bigmistqke]

you're already stopping event propagation automatically

Yes! We do events bubbling down the threejs-tree and you can stop the propagation with event.stopPropagation(). This worked (last time I checked lol).

I don't understand what an unprojectedPoint might be.

vec3.set(pointer.x, pointer.y, 0).unproject(camera) 👉 source

It maps the 2d point to the 3d space. Not sure what it is used for. I would imagine the spread Intersection contains this data too

[gleamish]

Thanks for the link, that looks super useful, I'll be needing to project from 3D to 2D and back again.