[v9] fix(createPortal): ensure container is wrapped in Scene

packages/fiber/src/core/reconciler.tsx

@@ -159,7 +159,7 @@ function handleContainerEffects(parent: Instance, child: Instance, beforeChild?:
  // Bail if tree isn't mounted or parent is not a container.
  // This ensures that the tree is finalized and React won't discard results to Suspense
  const state = child.root.getState()
- if (!parent.parent && parent.object !== state.scene) return
+ if (!parent.parent && parent.object !== state.internal.container) return
 
  // Create & link object on first run
  if (!child.object) {
@@ -383,19 +383,19 @@ export const reconciler = Reconciler<
  appendInitialChild: appendChild,
  insertBefore,
  appendChildToContainer(container, child) {
- const scene = (container.getState().scene as unknown as Instance<THREE.Scene>['object']).__r3f
+ const scene = (container.getState().internal.container as unknown as Instance<THREE.Object3D>['object']).__r3f
  if (!child || !scene) return
 
  appendChild(scene, child)
  },
  removeChildFromContainer(container, child) {
- const scene = (container.getState().scene as unknown as Instance<THREE.Scene>['object']).__r3f
+ const scene = (container.getState().internal.container as unknown as Instance<THREE.Object3D>['object']).__r3f
  if (!child || !scene) return
 
  removeChild(scene, child)
  },
  insertInContainerBefore(container, child, beforeChild) {
- const scene = (container.getState().scene as unknown as Instance<THREE.Scene>['object']).__r3f
+ const scene = (container.getState().internal.container as unknown as Instance<THREE.Object3D>['object']).__r3f
  if (!child || !beforeChild || !scene) return
 
  insertBefore(scene, child, beforeChild)
@@ -435,7 +435,7 @@ export const reconciler = Reconciler<
  commitMount() {},
  getPublicInstance: (instance) => instance?.object!,
  prepareForCommit: () => null,
- preparePortalMount: (container) => prepare(container.getState().scene, container, '', {}),
+ preparePortalMount: (container) => prepare(container.getState().internal.container, container, '', {}),
  resetAfterCommit: () => {},
  shouldSetTextContent: () => false,
  clearContainer: () => false,

packages/fiber/src/core/renderer.tsx

@@ -315,7 +315,7 @@ export function createRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(
  if (sceneOptions) applyProps(scene as any, sceneOptions as any)
  }
 
- state.set({ scene })
+ state.set((state) => ({ scene, internal: { ...state.internal, container: scene } }))
  }
 
  // Set up XR (one time only!)
@@ -560,10 +560,13 @@ function Portal({ state = {}, children, container }: PortalProps): JSX.Element {
  return {
  // The intersect consists of the previous root state
  ...rootState,
+ ...injectState,
  get: injectState.get,
  set: injectState.set,
- // Portals have their own scene, which forms the root, a raycaster and a pointer
- scene: container as THREE.Scene,
+ internal: {
+ ...rootState.internal,
+ container,
+ },
  raycaster,
  pointer,
  mouse: pointer,

packages/fiber/src/core/store.ts

@@ -54,6 +54,7 @@ export const isRenderer = (def: any) => !!def?.render
 export type StageTypes = Stage | FixedStage
 
 export interface InternalState {
+ container: THREE.Object3D
  interaction: THREE.Object3D[]
  hovered: Map<string, ThreeEvent<DomEvent>>
  subscribers: Subscription[]
@@ -233,6 +234,8 @@ export const createStore = (
  },
  previousRoot: undefined,
  internal: {
+ container: null as unknown as THREE.Object3D,
+
  // Events
  interaction: [],
  hovered: new Map<string, ThreeEvent<DomEvent>>(),