feat: refactor store.raycaster to be stack-based

- rename canvasProps.raycaster to canvasProps.defaultRaycaster
- rename three.raycaster to three.currentRaycaster
- add three.setCurrentRaycaster(raycaster): () => void
    - returns cleanup-function to pop the raycaster from the stack

Author: bigmistqke

src/create-events.ts

@@ -98,8 +98,8 @@ function raycast<TNativeEvent extends MouseEvent | WheelEvent>(
   registry: Object3D[],
   event: TNativeEvent,
 ): Intersection<Meta<Object3D>>[] {
-  if ("update" in context.raycaster) {
-    context.raycaster.update(event, context)
+  if ("update" in context.currentRaycaster) {
+    context.currentRaycaster.update(event, context)
   }
 
   const nodeSet = new Set<Object3D>()
@@ -116,7 +116,7 @@ function raycast<TNativeEvent extends MouseEvent | WheelEvent>(
     stack.push(...object.children)
   }
 
-  return context.raycaster.intersectObjects(nodeSet.values().toArray(), false)
+  return context.currentRaycaster.intersectObjects(nodeSet.values().toArray(), false)
 }
 
 /**********************************************************************************/
@@ -169,7 +169,7 @@ function createMissableEventRegistry(
 
     // Phase #2 - Raycast remaining missed objects
     for (const remainingObject of missedObjects) {
-      const intersections = context.raycaster.intersectObject(remainingObject, true)
+      const intersections = context.currentRaycaster.intersectObject(remainingObject, true)
 
       // Bubble down intersections
       // if they haven't been visited before:

src/create-three.tsx

@@ -192,7 +192,8 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps) {
       },
     }),
   )
-  const raycaster = createMemo(() =>
+
+  const defaultRaycaster = createMemo(() =>
     augment<Raycaster | EventRaycaster>(
       props.raycaster instanceof Raycaster ? props.raycaster : new CursorRaycaster(),
       {
@@ -202,6 +203,9 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps) {
       },
     ),
   )
+
+  const raycasterStack = new Stack<Raycaster>("raycaster")
+
   const gl = createMemo(() => {
     const gl =
       props.gl instanceof WebGLRenderer
@@ -257,8 +261,11 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps) {
     get scene() {
       return scene()
     },
-    get raycaster() {
-      return raycaster()
+    get currentRaycaster() {
+      return raycasterStack.peek() || defaultRaycaster()
+    },
+    setCurrentRaycaster(raycaster: Raycaster) {
+      return raycasterStack.push(raycaster)
     },
     get gl() {
       return gl()
@@ -308,7 +315,7 @@ export function createThree(canvas: HTMLCanvasElement, props: CanvasProps) {
     // Manage raycaster
     createRenderEffect(() => {
       if (!props.raycaster || props.raycaster instanceof Raycaster) return
-      useProps(raycaster, props.raycaster)
+      useProps(defaultRaycaster, props.raycaster)
     })
 
     // Manage gl

src/types.ts

@@ -28,14 +28,15 @@ export interface Context {
   canvas: HTMLCanvasElement
   clock: Clock
   currentCamera: CameraKind
+  currentRaycaster: Raycaster | EventRaycaster
   dpr: number
   gl: Meta<WebGLRenderer>
   props: CanvasProps
-  raycaster: Meta<Raycaster | EventRaycaster>
   render: (delta: number) => void
   requestRender: () => void
-  setCurrentCamera(camera: CameraKind): () => void
   scene: Meta<Scene>
+  setCurrentCamera(camera: CameraKind): () => void
+  setCurrentRaycaster(camera: Raycaster): () => void
   viewport: Viewport
   xr: {
     connect: () => void

tests/core/hooks.test.tsx

@@ -24,7 +24,7 @@ describe("hooks", () => {
 
     expect(result.currentCamera instanceof THREE.Camera).toBeTruthy()
     expect(result.scene instanceof THREE.Scene).toBeTruthy()
-    expect(result.raycaster instanceof THREE.Raycaster).toBeTruthy()
+    expect(result.currentRaycaster instanceof THREE.Raycaster).toBeTruthy()
     // expect(result.size).toEqual({ height: 0, width: 0, top: 0, left: 0, updateStyle: false });
   })