[v9] experiment: rework reconciler architecture, create objects on commit

packages/fiber/src/core/events.ts

@@ -173,7 +173,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
   function filterPointerEvents(objects: THREE.Object3D[]) {
     return objects.filter((obj) =>
       ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(
-        (name) => (obj as unknown as Instance).__r3f?.handlers[('onPointer' + name) as keyof EventHandlers],
+        (name) => ((obj as any).__r3f as Instance)?.handlers[('onPointer' + name) as keyof EventHandlers],
       ),
     )
   }
@@ -239,7 +239,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
       let eventObject: THREE.Object3D | null = hit.object
       // Bubble event up
       while (eventObject) {
-        if ((eventObject as unknown as Instance).__r3f?.eventCount) intersections.push({ ...hit, eventObject })
+        if (((eventObject as any).__r3f as Instance)?.eventCount) intersections.push({ ...hit, eventObject })
         eventObject = eventObject.parent
       }
     }
@@ -369,7 +369,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
         )
       ) {
         const eventObject = hoveredObj.eventObject
-        const instance = (eventObject as unknown as Instance).__r3f
+        const instance = (eventObject as any).__r3f as Instance
         const handlers = instance?.handlers
         internal.hovered.delete(makeId(hoveredObj))
         if (instance?.eventCount) {
@@ -434,7 +434,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
 
       handleIntersects(hits, event, delta, (data: ThreeEvent<DomEvent>) => {
         const eventObject = data.eventObject
-        const instance = (eventObject as unknown as Instance).__r3f
+        const instance = (eventObject as any).__r3f as Instance
         const handlers = instance?.handlers
         // Check presence of handlers
         if (!instance?.eventCount) return
@@ -487,9 +487,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
   }
 
   function pointerMissed(event: MouseEvent, objects: THREE.Object3D[]) {
-    objects.forEach((object: THREE.Object3D) =>
-      (object as unknown as Instance).__r3f?.handlers.onPointerMissed?.(event),
-    )
+    objects.forEach((object: THREE.Object3D) => ((object as any).__r3f as Instance)?.handlers.onPointerMissed?.(event))
   }
 
   return { handlePointer }

packages/fiber/src/core/index.tsx

@@ -30,7 +30,7 @@ import {
   updateCamera,
   setDeep,
 } from './utils'
-import { useStore } from './hooks'
+import { useStore, useThree } from './hooks'
 
 const roots = new Map<Element, Root>()
 const { invalidate, advance } = createLoop(roots)
@@ -332,6 +332,11 @@ function render<TCanvas extends Element>(
   return root.render(children)
 }
 
+function Scene({ children }: { children: React.ReactNode }) {
+  const scene = useThree((state) => state.scene)
+  return <primitive object={scene}>{children}</primitive>
+}
+
 function Provider<TElement extends Element>({
   store,
   children,
@@ -355,7 +360,11 @@ function Provider<TElement extends Element>({
     if (!store.getState().events.connected) state.events.connect?.(rootElement)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
-  return <context.Provider value={store}>{children}</context.Provider>
+  return (
+    <context.Provider value={store}>
+      <Scene>{children}</Scene>
+    </context.Provider>
+  )
 }
 
 function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void) {
@@ -506,7 +515,9 @@ function Portal({
   return (
     <>
       {reconciler.createPortal(
-        <context.Provider value={usePortalStore}>{children}</context.Provider>,
+        <context.Provider value={usePortalStore}>
+          <Scene>{children}</Scene>
+        </context.Provider>,
         usePortalStore,
         null,
       )}