@react-three/fiber 8.0.0-beta-04 → 8.0.0-beta.1

package/dist/{index-fccd77b0.esm.js → index-e78dd2f0.esm.js}

@@ -41,29 +41,38 @@ const pick = (obj, keys) => filterKeys(obj, false, ...keys);
  * Clones an object and prunes or omits keys.
  */
 
-const omit = (obj, keys) => filterKeys(obj, true, ...keys); // A collection of compare functions
-
+const omit = (obj, keys) => filterKeys(obj, true, ...keys);
+// A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
   fun: a => typeof a === 'function',
   str: a => typeof a === 'string',
   num: a => typeof a === 'number',
+  boo: a => typeof a === 'boolean',
   und: a => a === void 0,
   arr: a => Array.isArray(a),
 
-  equ(a, b) {
+  equ(a, b, {
+    arrays = 'shallow',
+    objects = 'reference',
+    strict = true
+  } = {}) {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
 
-    if (is.str(a) || is.num(a) || is.obj(a)) return a === b; // Array, shallow compare first to see if it's a match
+    if (is.str(a) || is.num(a)) return a === b;
+    const isObj = is.obj(a);
+    if (isObj && objects === 'reference') return a === b;
+    const isArr = is.arr(a);
+    if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
 
-    if (is.arr(a) && a == b) return true; // Last resort, go through keys
+    if ((isArr || isObj) && a == b) return true; // Last resort, go through keys
 
     let i;
 
     for (i in a) if (!(i in b)) return false;
 
-    for (i in b) if (a[i] !== b[i]) return false;
+    for (i in strict ? b : a) if (a[i] !== b[i]) return false;
 
     return is.und(i) ? a === b : true;
   }
@@ -154,15 +163,8 @@ function detach(parent, child, type) {
     const [, detach] = type;
     if (is.str(detach)) parent[detach](child);else if (is.fun(detach)) detach(parent, child);
   }
-} // Shallow check arrays, but check objects atomically
-
-function checkShallow(a, b) {
-  if (is.arr(a) && is.equ(a, b)) return true;
-  if (a === b) return true;
-  return false;
 } // This function prepares a set of changes to be applied to the instance
 
-
 function diffProps(instance, {
   children: cN,
   key: kN,
@@ -194,7 +196,7 @@ function diffProps(instance, {
     // Bail out on primitive object
     if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return; // When props match bail out
 
-    if (checkShallow(value, previous[key])) return; // Collect handlers and bail out
+    if (is.equ(value, previous[key])) return; // Collect handlers and bail out
 
     if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
 
@@ -391,7 +393,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -402,14 +404,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -968,10 +967,13 @@ function createRenderer(roots, getEventPriority) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -1065,7 +1067,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
     // @ts-ignore
-    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
     // @ts-ignore
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
     // @ts-ignore
@@ -1123,63 +1125,8 @@ const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React.createContext(null);
 
-const createStore = (applyProps, invalidate, advance, props) => {
-  const {
-    gl,
-    size,
-    shadows = false,
-    linear = false,
-    flat = false,
-    orthographic = false,
-    frameloop = 'always',
-    dpr = [1, 2],
-    performance,
-    clock = new THREE.Clock(),
-    raycaster: raycastOptions,
-    camera: cameraOptions,
-    onPointerMissed
-  } = props; // Set shadowmap
-
-  if (shadows) {
-    gl.shadowMap.enabled = true;
-    if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
-  } // Set color preferences
-
-
-  if (linear) gl.outputEncoding = THREE.LinearEncoding;
-  if (flat) gl.toneMapping = THREE.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
-
-  if (frameloop === 'never') {
-    clock.stop();
-    clock.elapsedTime = 0;
-  }
-
+const createStore = (invalidate, advance) => {
   const rootState = create((set, get) => {
-    // Create custom raycaster
-    const raycaster = new THREE.Raycaster();
-    const {
-      params,
-      ...options
-    } = raycastOptions || {};
-    applyProps(raycaster, {
-      enabled: true,
-      ...options,
-      params: { ...raycaster.params,
-        ...params
-      }
-    }); // Create default camera
-
-    const isCamera = cameraOptions instanceof THREE.Camera;
-    const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
-
-    if (!isCamera) {
-      camera.position.z = 5;
-      if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
-
-      if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
-    }
-
-    const initialDpr = calculateDpr(dpr);
     const position = new THREE.Vector3();
     const defaultTarget = new THREE.Vector3();
     const tempTarget = new THREE.Vector3();
@@ -1223,60 +1170,34 @@ const createStore = (applyProps, invalidate, advance, props) => {
       performance: { ...state.performance,
         current
       }
-    })); // Handle frame behavior in WebXR
-
-
-    const handleXRFrame = timestamp => {
-      const state = get();
-      if (state.frameloop === 'never') return;
-      advance(timestamp, true);
-    }; // Toggle render switching on session
-
-
-    const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting;
-      gl.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null); // If exiting session, request frame
-
-      if (!gl.xr.isPresenting) invalidate(get());
-    }; // WebXR session manager
-
-
-    const xr = {
-      connect() {
-        gl.xr.addEventListener('sessionstart', handleSessionChange);
-        gl.xr.addEventListener('sessionend', handleSessionChange);
-      },
-
-      disconnect() {
-        gl.xr.removeEventListener('sessionstart', handleSessionChange);
-        gl.xr.removeEventListener('sessionend', handleSessionChange);
-      }
-
-    }; // Subscribe to WebXR session events
+    }));
 
-    if (gl.xr) xr.connect();
     return {
-      gl,
+      // Mock objects that have to be configured
+      gl: null,
+      camera: null,
+      raycaster: null,
+      events: {
+        connected: false
+      },
+      xr: null,
       set,
       get,
       invalidate: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      linear,
-      flat,
+      linear: false,
+      flat: false,
       scene: prepare(new THREE.Scene()),
-      camera,
       controls: null,
-      raycaster,
-      clock,
+      clock: new THREE.Clock(),
       mouse: new THREE.Vector2(),
-      frameloop,
-      onPointerMissed,
+      frameloop: 'always',
+      onPointerMissed: undefined,
       performance: {
         current: 1,
         min: 0.5,
         max: 1,
         debounce: 200,
-        ...performance,
         regress: () => {
           const state = get(); // Clear timeout
 
@@ -1292,8 +1213,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
         height: 0
       },
       viewport: {
-        initialDpr,
-        dpr: initialDpr,
+        initialDpr: 0,
+        dpr: 0,
         width: 0,
         height: 0,
         aspect: 0,
@@ -1302,6 +1223,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         getCurrentViewport
       },
       setSize: (width, height) => {
+        const camera = get().camera;
         const size = {
           width,
           height
@@ -1313,22 +1235,34 @@ const createStore = (applyProps, invalidate, advance, props) => {
           }
         }));
       },
-      setDpr: dpr => set(state => ({
-        viewport: { ...state.viewport,
-          dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: { ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
+      }),
+      setFrameloop: (frameloop = 'always') => {
+        const clock = get().clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+
+        clock.stop();
+        clock.elapsedTime = 0;
+
+        if (frameloop !== 'never') {
+          clock.start();
+          clock.elapsedTime = 0;
         }
-      })),
-      setFrameloop: (frameloop = 'always') => set(() => ({
-        frameloop
-      })),
-      events: {
-        connected: false
+
+        set(() => ({
+          frameloop
+        }));
       },
       internal: {
         active: false,
         priority: 0,
         frames: 0,
-        lastProps: props,
         lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
@@ -1336,7 +1270,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        xr,
         subscribe: (ref, priority = 0) => {
           set(({
             internal
@@ -1380,13 +1313,14 @@ const createStore = (applyProps, invalidate, advance, props) => {
       camera,
       size,
       viewport,
-      internal
+      internal,
+      gl
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
-      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
+      if (!camera.manual) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1408,69 +1342,13 @@ const createStore = (applyProps, invalidate, advance, props) => {
       oldSize = size;
       oldDpr = viewport.dpr;
     }
-  }); // Update size
-
-  if (size) state.setSize(size.width, size.height); // Invalidate on any change
+  }); // Invalidate on any change
 
   rootState.subscribe(state => invalidate(state)); // Return root state
 
   return rootState;
 };
 
-function useStore() {
-  const store = React.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
-  return store;
-}
-function useThree(selector = state => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
-function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
-
-  const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
-
-  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
-}
-function useGraph(object) {
-  return React.useMemo(() => buildGraph(object), [object]);
-}
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
-      if (data.scene) Object.assign(data, buildGraph(data.scene));
-      res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return clear([Proto, ...keys]);
-};
-
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1489,7 +1367,9 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render$1(timestamp, state) {
+let subscribers;
+
+function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1500,7 +1380,9 @@ function render$1(timestamp, state) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta); // Render content
+  subscribers = state.internal.subscribers;
+
+  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1512,29 +1394,35 @@ function render$1(timestamp, state) {
 function createLoop(roots) {
   let running = false;
   let repeat;
+  let frame;
+  let state;
 
   function loop(timestamp) {
+    frame = requestAnimationFrame(loop);
     running = true;
     repeat = 0; // Run effects
 
-    run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
 
-      const state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
+      state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
 
       if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
         repeat += render$1(timestamp, state);
       }
     }); // Run after-effects
 
-    run(globalAfterEffects, timestamp); // Keep on looping if anything invalidates the frameloop
+    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
-    if (repeat > 0) return requestAnimationFrame(loop); // Tail call effects, they are called when rendering stops
-    else run(globalTailEffects, timestamp); // Flag end of operation
+    if (repeat === 0) {
+      // Tail call effects, they are called when rendering stops
+      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
 
-    running = false;
+      running = false;
+      return cancelAnimationFrame(frame);
+    }
   }
 
   function invalidate(state) {
@@ -1551,9 +1439,9 @@ function createLoop(roots) {
     }
   }
 
-  function advance(timestamp, runGlobalEffects = true, state) {
+  function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1564,6 +1452,60 @@ function createLoop(roots) {
   };
 }
 
+function useStore() {
+  const store = React.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
+function useThree(selector = state => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
+function useFrame(callback, renderPriority = 0) {
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
+
+  const ref = React.useRef(callback);
+  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React.useMemo(() => buildGraph(object), [object]);
+}
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
+      if (data.scene) Object.assign(data, buildGraph(data.scene));
+      res(data);
+    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([Proto, ...keys]);
+};
+
 const roots = new Map();
 const {
   invalidate,
@@ -1573,113 +1515,216 @@ const {
   reconciler,
   applyProps
 } = createRenderer(roots, getEventPriority);
+const shallowLoose = {
+  objects: 'shallow',
+  strict: false
+};
 
 const createRendererInstance = (gl, canvas) => {
   const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;
-  const renderer = new THREE.WebGLRenderer({
+  if (isRenderer(customRenderer)) return customRenderer;else return new THREE.WebGLRenderer({
     powerPreference: 'high-performance',
     canvas: canvas,
     antialias: true,
     alpha: true,
     ...gl
-  }); // Set color management
+  });
+};
 
-  renderer.outputEncoding = THREE.sRGBEncoding;
-  renderer.toneMapping = THREE.ACESFilmicToneMapping; // Set gl props
+function createRoot(canvas) {
+  // Check against mistaken use of createRoot
+  let prevRoot = roots.get(canvas);
+  let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  let prevStore = prevRoot == null ? void 0 : prevRoot.store;
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Create store
 
-  if (gl) applyProps(renderer, gl);
-  return renderer;
-};
+  const store = prevStore || createStore(invalidate, advance); // Create renderer
 
-function createRoot(canvas, config) {
+  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
+
+  if (!prevRoot) roots.set(canvas, {
+    fiber,
+    store
+  }); // Locals
+
+  let onCreated;
+  let configured = false;
   return {
-    render: element => {
-      var _store;
+    configure(props = {}) {
+      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
 
       let {
-        gl,
+        gl: glConfig,
         size,
         events,
-        onCreated,
-        ...props
-      } = config || {}; // Allow size to take on container bounds initially
+        onCreated: onCreatedCallback,
+        shadows = false,
+        linear = false,
+        flat = false,
+        orthographic = false,
+        frameloop = 'always',
+        dpr = [1, 2],
+        performance,
+        raycaster: raycastOptions,
+        camera: cameraOptions,
+        onPointerMissed
+      } = props;
+      let state = store.getState(); // Set up renderer (one time only!)
+
+      let gl = state.gl;
+      if (!state.gl) state.set({
+        gl: gl = createRendererInstance(glConfig, canvas)
+      }); // Set up raycaster (one time only!)
+
+      let raycaster = state.raycaster;
+      if (!raycaster) state.set({
+        raycaster: raycaster = new THREE.Raycaster()
+      }); // Set raycaster options
 
-      if (!size) {
-        var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+      const {
+        params,
+        ...options
+      } = raycastOptions || {};
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
+        enabled: true,
+        ...options
+      });
+      if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
+        params: { ...raycaster.params,
+          ...params
+        }
+      }); // Create default camera (one time only!)
 
-        size = {
-          width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-          height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-        };
-      }
+      if (!state.camera) {
+        const isCamera = cameraOptions instanceof THREE.Camera;
+        const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
+
+        if (!isCamera) {
+          camera.position.z = 5;
+          if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
+
+          if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
+        }
 
-      let root = roots.get(canvas);
-      let fiber = root == null ? void 0 : root.fiber;
-      let store = root == null ? void 0 : root.store;
-      let state = (_store = store) == null ? void 0 : _store.getState();
+        state.set({
+          camera
+        });
+      } // Set up XR (one time only!)
 
-      if (fiber && state) {
-        // When a root was found, see if any fundamental props must be changed or exchanged
-        // Check pixelratio
-        if (props.dpr !== undefined && state.viewport.dpr !== calculateDpr(props.dpr)) state.setDpr(props.dpr); // Check size
 
-        if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+      if (!state.xr) {
+        // Handle frame behavior in WebXR
+        const handleXRFrame = (timestamp, frame) => {
+          const state = store.getState();
+          if (state.frameloop === 'never') return;
+          advance(timestamp, true, state, frame);
+        }; // Toggle render switching on session
 
-        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
-        // Changes to the color-space
 
-        const linearChanged = props.linear !== state.internal.lastProps.linear;
+        const handleSessionChange = () => {
+          const gl = store.getState().gl;
+          gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+          // WebXRManager's signature is incorrect.
+          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-        if (linearChanged) {
-          unmountComponentAtNode(canvas);
-          fiber = undefined;
-        }
-      }
+          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+        }; // WebXR session manager
 
-      if (!fiber) {
-        // If no root has been found, make one
-        // Create gl
-        const glRenderer = createRendererInstance(gl, canvas); // Create store
 
-        store = createStore(applyProps, invalidate, advance, {
-          gl: glRenderer,
-          size,
-          ...props
-        });
-        const state = store.getState(); // Create renderer
+        const xr = {
+          connect() {
+            const gl = store.getState().gl;
+            gl.xr.addEventListener('sessionstart', handleSessionChange);
+            gl.xr.addEventListener('sessionend', handleSessionChange);
+          },
 
-        fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
+          disconnect() {
+            const gl = store.getState().gl;
+            gl.xr.removeEventListener('sessionstart', handleSessionChange);
+            gl.xr.removeEventListener('sessionend', handleSessionChange);
+          }
 
-        roots.set(canvas, {
-          fiber,
-          store
-        }); // Store events internally
+        }; // Subscribe to WebXR session events
 
-        if (events) state.set({
-          events: events(store)
+        if (gl.xr) xr.connect();
+        state.set({
+          xr
         });
-      }
+      } // Set shadowmap
 
-      if (store && fiber) {
-        reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
-          store: store,
-          element: element,
-          onCreated: onCreated,
-          target: canvas
-        }), fiber, null, () => undefined);
-        return store;
-      } else {
-        throw 'Error creating root!';
-      }
+
+      if (gl.shadowMap) {
+        const isBoolean = is.boo(shadows);
+
+        if (isBoolean && gl.shadowMap.enabled !== shadows || !is.equ(shadows, gl.shadowMap, shallowLoose)) {
+          const old = gl.shadowMap.enabled;
+          gl.shadowMap.enabled = !!shadows;
+          if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
+          if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
+        }
+      } // Set color management
+
+
+      const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
+      const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
+      if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
+      if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping; // Set gl props
+
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig); // Store events internally
+
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      }); // Check pixelratio
+
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
+
+      size = size || {
+        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
+        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
+      };
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
+
+      if (!state.onPointerMissed) state.set({
+        onPointerMissed
+      }); // Check performance
+
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: { ...state.performance,
+          ...performance
+        }
+      })); // Set locals
+
+      onCreated = onCreatedCallback;
+      configured = true;
+      return this;
+    },
+
+    render(element) {
+      // The root has to be configured before it can be rendered
+      if (!configured) this.configure();
+      reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
+        store: store,
+        element: element,
+        onCreated: onCreated,
+        target: canvas
+      }), fiber, null, () => undefined);
+      return store;
     },
-    unmount: () => unmountComponentAtNode(canvas)
+
+    unmount() {
+      unmountComponentAtNode(canvas);
+    }
+
   };
 }
 
 function render(element, canvas, config = {}) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
-  return createRoot(canvas, config).render(element);
+  const root = createRoot(canvas);
+  root.configure(config);
+  return root.render(element);
 }
 
 function Provider({
@@ -1722,7 +1767,7 @@ function unmountComponentAtNode(canvas, callback) {
             state.events.disconnect == null ? void 0 : state.events.disconnect();
             (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
             (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
-            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.internal.xr.disconnect();
+            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.xr.disconnect();
             dispose(state);
             roots.delete(canvas);
             if (callback) callback(canvas);
@@ -1747,4 +1792,4 @@ reconciler.injectIntoDevTools({
   version: '18.0.0'
 });
 
-export { is as A, createRoot as a, useStore as b, createEvents as c, useThree as d, extend as e, useFrame as f, useGraph as g, useLoader as h, context as i, createPortal as j, reconciler as k, applyProps as l, dispose as m, invalidate as n, omit as o, pick as p, advance as q, render as r, addEffect as s, threeTypes as t, unmountComponentAtNode as u, addAfterEffect as v, addTail as w, act as x, roots as y, buildGraph as z };
+export { createRoot as a, context as b, createEvents as c, createPortal as d, extend as e, reconciler as f, applyProps as g, dispose as h, invalidate as i, advance as j, addEffect as k, addAfterEffect as l, addTail as m, act as n, omit as o, pick as p, roots as q, render as r, useStore as s, threeTypes as t, unmountComponentAtNode as u, useThree as v, useFrame as w, useGraph as x, useLoader as y };