@react-three/fiber 9.0.0-alpha.4 → 9.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.16.3
+
+### Patch Changes
+
+- 9c83502c: fix(Canvas): don't override camera frustum props
+
 ## 8.16.2
 
 ### Patch Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -5,11 +5,15 @@ import { ObjectMap } from "./utils.js";
 import type { Instance } from "./reconciler.js";
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
-export declare function useInstanceHandle<O>(ref: React.RefObject<O>): React.RefObject<Instance>;
+export declare function useInstanceHandle<T>(ref: React.RefObject<T>): React.RefObject<Instance<T>>;
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
 export declare function useStore(): RootStore;
 /**
  * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
@@ -24,7 +28,7 @@ export declare function useThree<T = RootState>(selector?: (state: RootState) =>
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
 /**

package/dist/declarations/src/core/index.d.ts

@@ -9,7 +9,7 @@ export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } f
 export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
 export type { UpdateSubscription } from "./stages.js";
 export { Stage, FixedStage, Stages } from "./stages.js";
-export type { Subscription, Dpr, Size, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
+export type { Subscription, Dpr, Size, Viewport, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";
 export { applyProps, getRootState, dispose, act, buildGraph } from "./utils.js";

package/dist/declarations/src/core/reconciler.d.ts

@@ -35,6 +35,7 @@ export interface Instance<O = any> {
     handlers: Partial<EventHandlers>;
     attach?: AttachType<O>;
     previousAttach?: any;
+    isHidden: boolean;
     autoRemovedBeforeAppend?: boolean;
 }
 export declare const catalogue: Catalogue;

package/dist/declarations/src/core/store.d.ts

@@ -21,6 +21,18 @@ export interface Size {
     top: number;
     left: number;
 }
+export interface Viewport extends Size {
+    /** The initial pixel ratio */
+    initialDpr: number;
+    /** Current pixel ratio */
+    dpr: number;
+    /** size.width / viewport.width */
+    factor: number;
+    /** Camera distance */
+    distance: number;
+    /** Camera aspect ratio: width / height */
+    aspect: number;
+}
 export type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void;
 export type UpdateCallback = RenderCallback;
 export type LegacyAlways = 'always';
@@ -106,10 +118,12 @@ export interface RootState {
     frameloop: FrameloopLegacy;
     /** Adaptive performance interface */
     performance: Performance;
-    /** The current pixel ratio */
-    dpr: number;
     /** Reactive pixel-size of the canvas */
     size: Size;
+    /** Reactive size of the viewport in threejs units */
+    viewport: Viewport & {
+        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
+    };
     /** Flags the canvas for render, but doesn't render in itself */
     invalidate: (frames?: number) => void;
     /** Advance (render) one step */

package/dist/{loop-7f1fb121.cjs.dev.js → loop-02cefb27.cjs.dev.js}

@@ -60,7 +60,8 @@ const extend = objects => {
     return void Object.assign(catalogue, objects);
   }
 };
-function createInstance(type, props, root) {
+function createInstance(type, props, root, flushPrimitive = true) {
+  var _props$object;
   // Get target from catalogue
   const name = `${type[0].toUpperCase()}${type.slice(1)}`;
   const target = catalogue[name];
@@ -74,10 +75,37 @@ function createInstance(type, props, root) {
   // Throw if an object or literal was passed for args
   if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
 
+  // Regenerate the R3F instance for primitives to simulate a new object
+  if (flushPrimitive && type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+
   // Create instance
   const instance = prepare(props.object, root, type, props);
   return instance;
 }
+function hideInstance(instance) {
+  if (!instance.isHidden) {
+    var _instance$parent;
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = false;
+    }
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  }
+}
+function unhideInstance(instance) {
+  if (instance.isHidden) {
+    var _instance$parent2;
+    if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+      attach(instance.parent, instance);
+    } else if (isObject3D(instance.object) && instance.props.visible !== false) {
+      instance.object.visible = true;
+    }
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  }
+}
 
 // https://github.com/facebook/react/issues/20271
 // This will make sure events and attach are only handled once when trees are complete
@@ -213,8 +241,19 @@ function setFiberInstance(fiber, instance) {
   }
 }
 function switchInstance(oldInstance, type, props, fiber) {
+  // If the old instance is hidden, we need to unhide it.
+  // React assumes it can discard instances since they're pure for DOM.
+  // This isn't true for us since our lifetimes are impure and longliving.
+  // So, we manually check if an instance was hidden and unhide it.
+  if (oldInstance.isHidden) unhideInstance(oldInstance);
+
   // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root);
+  const newInstance = createInstance(type, props, oldInstance.root, false);
+
+  // Update attach props for primitives since we don't flush them
+  if (type === 'primitive') {
+    newInstance.props.attach = props.attach;
+  }
 
   // Move children to new instance
   for (const child of oldInstance.children) {
@@ -262,7 +301,9 @@ const reconciler = Reconciler__default["default"]({
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
-  createInstance,
+  createInstance(type, props, root) {
+    return createInstance(type, props, root);
+  },
   removeChild,
   appendChild,
   appendInitialChild: appendChild,
@@ -319,8 +360,8 @@ const reconciler = Reconciler__default["default"]({
   resetAfterCommit: () => {},
   shouldSetTextContent: () => false,
   clearContainer: () => false,
-  hideInstance() {},
-  unhideInstance() {},
+  hideInstance,
+  unhideInstance,
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
@@ -575,7 +616,8 @@ function prepare(target, root, type, props) {
       props: getInstanceProps(props),
       object,
       eventCount: 0,
-      handlers: {}
+      handlers: {},
+      isHidden: false
     };
     if (object) {
       object.__r3f = instance;
@@ -1247,6 +1289,44 @@ const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = traditional.createWithEqualityFn((set, get) => {
+    const position = new THREE__namespace.Vector3();
+    const defaultTarget = new THREE__namespace.Vector3();
+    const tempTarget = new THREE__namespace.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const {
+        width,
+        height,
+        top,
+        left
+      } = size;
+      const aspect = width / height;
+      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return {
+          width: width / camera.zoom,
+          height: height / camera.zoom,
+          top,
+          left,
+          factor: 1,
+          distance,
+          aspect
+        };
+      } else {
+        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+        const w = h * (width / height);
+        return {
+          width: w,
+          height: h,
+          top,
+          left,
+          factor: width / w,
+          distance,
+          aspect
+        };
+      }
+    }
     let performanceTimeout = undefined;
     const setPerformanceCurrent = current => set(state => ({
       performance: {
@@ -1295,13 +1375,24 @@ const createStore = (invalidate, advance) => {
           performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
         }
       },
-      dpr: 1,
       size: {
         width: 0,
         height: 0,
         top: 0,
         left: 0
       },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
       setEvents: events => set(state => ({
         ...state,
         events: {
@@ -1310,17 +1401,30 @@ const createStore = (invalidate, advance) => {
         }
       })),
       setSize: (width, height, top = 0, left = 0) => {
-        set({
-          size: {
-            width,
-            height,
-            top,
-            left
+        const camera = get().camera;
+        const size = {
+          width,
+          height,
+          top,
+          left
+        };
+        set(state => ({
+          size,
+          viewport: {
+            ...state.viewport,
+            ...getCurrentViewport(camera, defaultTarget, size)
           }
-        });
+        }));
       },
-      setDpr: dpr => set({
-        dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: {
+            ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
       }),
       setFrameloop: frameloop => {
         var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
@@ -1409,23 +1513,39 @@ const createStore = (invalidate, advance) => {
   });
   const state = rootStore.getState();
   let oldSize = state.size;
-  let oldDpr = state.dpr;
-  rootStore.subscribe(({
-    camera,
-    size,
-    dpr,
-    gl
-  }) => {
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const {
+      camera,
+      size,
+      viewport,
+      gl,
+      set
+    } = rootStore.getState();
+
     // Resize camera and renderer on changes to size and pixelratio
-    if (size !== oldSize || dpr !== oldDpr) {
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
       oldSize = size;
-      oldDpr = dpr;
+      oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(dpr);
+      gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
+
+    // Update viewport once the camera changes
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      // Update viewport
+      set(state => ({
+        viewport: {
+          ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+    }
   });
 
   // Invalidate on any change
@@ -1570,15 +1690,20 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
 function useInstanceHandle(ref) {
   const instance = React__namespace.useRef(null);
-  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  React__namespace.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
   return instance;
 }
+
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
 function useStore() {
   const store = React__namespace.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -1610,7 +1735,7 @@ function useFrame(callback, renderPriority = 0) {
 
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 function useUpdate(callback, stage = Stages.Update) {
   const store = useStore();
@@ -1657,6 +1782,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => res(isObject3D(data == null ? void 0 : data.scene) ? Object.assign(data, buildGraph(data.scene)) : data), onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`))))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
@@ -1880,7 +2006,15 @@ function createRoot(canvas) {
         const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
         if (!isCamera) {
           camera.position.z = 5;
-          if (cameraOptions) applyProps(camera, cameraOptions);
+          if (cameraOptions) {
+            applyProps(camera, cameraOptions);
+            // Preserve user-defined frustum if possible
+            // https://github.com/pmndrs/react-three-fiber/issues/3160
+            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+              camera.manual = true;
+              camera.updateProjectionMatrix();
+            }
+          }
           // Always look at center by default
           if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
@@ -2009,7 +2143,7 @@ function createRoot(canvas) {
         state.setSize(size.width, size.height, size.top, size.left);
       }
       // Check pixelratio
-      if (dpr && state.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
       // Check frameloop
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
       // Check pointer missed
@@ -2132,8 +2266,11 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
+    let viewport;
     if (injectState.camera && size) {
       const camera = injectState.camera;
+      // Calculate the override viewport, if present
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
       // Update the portal camera, if it differs from the previous layer
       if (camera !== rootState.camera) updateCamera(camera, size);
     }
@@ -2149,7 +2286,7 @@ function Portal({
       mouse: pointer,
       // Their previous root is the layer before it
       previousRoot,
-      // Events and size can be overridden by the inject layer
+      // Events, size and viewport can be overridden by the inject layer
       events: {
         ...rootState.events,
         ...injectState.events,
@@ -2159,6 +2296,10 @@ function Portal({
         ...rootState.size,
         ...size
       },
+      viewport: {
+        ...rootState.viewport,
+        ...viewport
+      },
       // Layers are allowed to override events
       setEvents: events => injectState.set(state => ({
         ...state,

package/dist/{loop-7224f71f.cjs.prod.js → loop-1fad3b6f.cjs.prod.js}

@@ -60,7 +60,8 @@ const extend = objects => {
     return void Object.assign(catalogue, objects);
   }
 };
-function createInstance(type, props, root) {
+function createInstance(type, props, root, flushPrimitive = true) {
+  var _props$object;
   // Get target from catalogue
   const name = `${type[0].toUpperCase()}${type.slice(1)}`;
   const target = catalogue[name];
@@ -74,10 +75,37 @@ function createInstance(type, props, root) {
   // Throw if an object or literal was passed for args
   if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
 
+  // Regenerate the R3F instance for primitives to simulate a new object
+  if (flushPrimitive && type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+
   // Create instance
   const instance = prepare(props.object, root, type, props);
   return instance;
 }
+function hideInstance(instance) {
+  if (!instance.isHidden) {
+    var _instance$parent;
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = false;
+    }
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  }
+}
+function unhideInstance(instance) {
+  if (instance.isHidden) {
+    var _instance$parent2;
+    if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+      attach(instance.parent, instance);
+    } else if (isObject3D(instance.object) && instance.props.visible !== false) {
+      instance.object.visible = true;
+    }
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  }
+}
 
 // https://github.com/facebook/react/issues/20271
 // This will make sure events and attach are only handled once when trees are complete
@@ -213,8 +241,19 @@ function setFiberInstance(fiber, instance) {
   }
 }
 function switchInstance(oldInstance, type, props, fiber) {
+  // If the old instance is hidden, we need to unhide it.
+  // React assumes it can discard instances since they're pure for DOM.
+  // This isn't true for us since our lifetimes are impure and longliving.
+  // So, we manually check if an instance was hidden and unhide it.
+  if (oldInstance.isHidden) unhideInstance(oldInstance);
+
   // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root);
+  const newInstance = createInstance(type, props, oldInstance.root, false);
+
+  // Update attach props for primitives since we don't flush them
+  if (type === 'primitive') {
+    newInstance.props.attach = props.attach;
+  }
 
   // Move children to new instance
   for (const child of oldInstance.children) {
@@ -262,7 +301,9 @@ const reconciler = Reconciler__default["default"]({
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
-  createInstance,
+  createInstance(type, props, root) {
+    return createInstance(type, props, root);
+  },
   removeChild,
   appendChild,
   appendInitialChild: appendChild,
@@ -319,8 +360,8 @@ const reconciler = Reconciler__default["default"]({
   resetAfterCommit: () => {},
   shouldSetTextContent: () => false,
   clearContainer: () => false,
-  hideInstance() {},
-  unhideInstance() {},
+  hideInstance,
+  unhideInstance,
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
@@ -575,7 +616,8 @@ function prepare(target, root, type, props) {
       props: getInstanceProps(props),
       object,
       eventCount: 0,
-      handlers: {}
+      handlers: {},
+      isHidden: false
     };
     if (object) {
       object.__r3f = instance;
@@ -1247,6 +1289,44 @@ const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = traditional.createWithEqualityFn((set, get) => {
+    const position = new THREE__namespace.Vector3();
+    const defaultTarget = new THREE__namespace.Vector3();
+    const tempTarget = new THREE__namespace.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const {
+        width,
+        height,
+        top,
+        left
+      } = size;
+      const aspect = width / height;
+      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return {
+          width: width / camera.zoom,
+          height: height / camera.zoom,
+          top,
+          left,
+          factor: 1,
+          distance,
+          aspect
+        };
+      } else {
+        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+        const w = h * (width / height);
+        return {
+          width: w,
+          height: h,
+          top,
+          left,
+          factor: width / w,
+          distance,
+          aspect
+        };
+      }
+    }
     let performanceTimeout = undefined;
     const setPerformanceCurrent = current => set(state => ({
       performance: {
@@ -1295,13 +1375,24 @@ const createStore = (invalidate, advance) => {
           performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
         }
       },
-      dpr: 1,
       size: {
         width: 0,
         height: 0,
         top: 0,
         left: 0
       },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
       setEvents: events => set(state => ({
         ...state,
         events: {
@@ -1310,17 +1401,30 @@ const createStore = (invalidate, advance) => {
         }
       })),
       setSize: (width, height, top = 0, left = 0) => {
-        set({
-          size: {
-            width,
-            height,
-            top,
-            left
+        const camera = get().camera;
+        const size = {
+          width,
+          height,
+          top,
+          left
+        };
+        set(state => ({
+          size,
+          viewport: {
+            ...state.viewport,
+            ...getCurrentViewport(camera, defaultTarget, size)
           }
-        });
+        }));
       },
-      setDpr: dpr => set({
-        dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: {
+            ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
       }),
       setFrameloop: frameloop => {
         var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
@@ -1409,23 +1513,39 @@ const createStore = (invalidate, advance) => {
   });
   const state = rootStore.getState();
   let oldSize = state.size;
-  let oldDpr = state.dpr;
-  rootStore.subscribe(({
-    camera,
-    size,
-    dpr,
-    gl
-  }) => {
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const {
+      camera,
+      size,
+      viewport,
+      gl,
+      set
+    } = rootStore.getState();
+
     // Resize camera and renderer on changes to size and pixelratio
-    if (size !== oldSize || dpr !== oldDpr) {
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
       oldSize = size;
-      oldDpr = dpr;
+      oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(dpr);
+      gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
+
+    // Update viewport once the camera changes
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      // Update viewport
+      set(state => ({
+        viewport: {
+          ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+    }
   });
 
   // Invalidate on any change
@@ -1570,15 +1690,20 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
 function useInstanceHandle(ref) {
   const instance = React__namespace.useRef(null);
-  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  React__namespace.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
   return instance;
 }
+
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
 function useStore() {
   const store = React__namespace.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -1610,7 +1735,7 @@ function useFrame(callback, renderPriority = 0) {
 
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 function useUpdate(callback, stage = Stages.Update) {
   const store = useStore();
@@ -1657,6 +1782,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => res(isObject3D(data == null ? void 0 : data.scene) ? Object.assign(data, buildGraph(data.scene)) : data), onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`))))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
@@ -1880,7 +2006,15 @@ function createRoot(canvas) {
         const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
         if (!isCamera) {
           camera.position.z = 5;
-          if (cameraOptions) applyProps(camera, cameraOptions);
+          if (cameraOptions) {
+            applyProps(camera, cameraOptions);
+            // Preserve user-defined frustum if possible
+            // https://github.com/pmndrs/react-three-fiber/issues/3160
+            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+              camera.manual = true;
+              camera.updateProjectionMatrix();
+            }
+          }
           // Always look at center by default
           if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
@@ -2009,7 +2143,7 @@ function createRoot(canvas) {
         state.setSize(size.width, size.height, size.top, size.left);
       }
       // Check pixelratio
-      if (dpr && state.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
       // Check frameloop
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
       // Check pointer missed
@@ -2132,8 +2266,11 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
+    let viewport;
     if (injectState.camera && size) {
       const camera = injectState.camera;
+      // Calculate the override viewport, if present
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
       // Update the portal camera, if it differs from the previous layer
       if (camera !== rootState.camera) updateCamera(camera, size);
     }
@@ -2149,7 +2286,7 @@ function Portal({
       mouse: pointer,
       // Their previous root is the layer before it
       previousRoot,
-      // Events and size can be overridden by the inject layer
+      // Events, size and viewport can be overridden by the inject layer
       events: {
         ...rootState.events,
         ...injectState.events,
@@ -2159,6 +2296,10 @@ function Portal({
         ...rootState.size,
         ...size
       },
+      viewport: {
+        ...rootState.viewport,
+        ...viewport
+      },
       // Layers are allowed to override events
       setEvents: events => injectState.set(state => ({
         ...state,

package/dist/{loop-bdf826ba.esm.js → loop-d73c6316.esm.js}

@@ -34,7 +34,8 @@ const extend = objects => {
     return void Object.assign(catalogue, objects);
   }
 };
-function createInstance(type, props, root) {
+function createInstance(type, props, root, flushPrimitive = true) {
+  var _props$object;
   // Get target from catalogue
   const name = `${type[0].toUpperCase()}${type.slice(1)}`;
   const target = catalogue[name];
@@ -48,10 +49,37 @@ function createInstance(type, props, root) {
   // Throw if an object or literal was passed for args
   if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
 
+  // Regenerate the R3F instance for primitives to simulate a new object
+  if (flushPrimitive && type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+
   // Create instance
   const instance = prepare(props.object, root, type, props);
   return instance;
 }
+function hideInstance(instance) {
+  if (!instance.isHidden) {
+    var _instance$parent;
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = false;
+    }
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  }
+}
+function unhideInstance(instance) {
+  if (instance.isHidden) {
+    var _instance$parent2;
+    if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+      attach(instance.parent, instance);
+    } else if (isObject3D(instance.object) && instance.props.visible !== false) {
+      instance.object.visible = true;
+    }
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  }
+}
 
 // https://github.com/facebook/react/issues/20271
 // This will make sure events and attach are only handled once when trees are complete
@@ -187,8 +215,19 @@ function setFiberInstance(fiber, instance) {
   }
 }
 function switchInstance(oldInstance, type, props, fiber) {
+  // If the old instance is hidden, we need to unhide it.
+  // React assumes it can discard instances since they're pure for DOM.
+  // This isn't true for us since our lifetimes are impure and longliving.
+  // So, we manually check if an instance was hidden and unhide it.
+  if (oldInstance.isHidden) unhideInstance(oldInstance);
+
   // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root);
+  const newInstance = createInstance(type, props, oldInstance.root, false);
+
+  // Update attach props for primitives since we don't flush them
+  if (type === 'primitive') {
+    newInstance.props.attach = props.attach;
+  }
 
   // Move children to new instance
   for (const child of oldInstance.children) {
@@ -236,7 +275,9 @@ const reconciler = Reconciler({
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
-  createInstance,
+  createInstance(type, props, root) {
+    return createInstance(type, props, root);
+  },
   removeChild,
   appendChild,
   appendInitialChild: appendChild,
@@ -293,8 +334,8 @@ const reconciler = Reconciler({
   resetAfterCommit: () => {},
   shouldSetTextContent: () => false,
   clearContainer: () => false,
-  hideInstance() {},
-  unhideInstance() {},
+  hideInstance,
+  unhideInstance,
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
@@ -549,7 +590,8 @@ function prepare(target, root, type, props) {
       props: getInstanceProps(props),
       object,
       eventCount: 0,
-      handlers: {}
+      handlers: {},
+      isHidden: false
     };
     if (object) {
       object.__r3f = instance;
@@ -1221,6 +1263,44 @@ const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = createWithEqualityFn((set, get) => {
+    const position = new THREE.Vector3();
+    const defaultTarget = new THREE.Vector3();
+    const tempTarget = new THREE.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const {
+        width,
+        height,
+        top,
+        left
+      } = size;
+      const aspect = width / height;
+      if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return {
+          width: width / camera.zoom,
+          height: height / camera.zoom,
+          top,
+          left,
+          factor: 1,
+          distance,
+          aspect
+        };
+      } else {
+        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+        const w = h * (width / height);
+        return {
+          width: w,
+          height: h,
+          top,
+          left,
+          factor: width / w,
+          distance,
+          aspect
+        };
+      }
+    }
     let performanceTimeout = undefined;
     const setPerformanceCurrent = current => set(state => ({
       performance: {
@@ -1269,13 +1349,24 @@ const createStore = (invalidate, advance) => {
           performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
         }
       },
-      dpr: 1,
       size: {
         width: 0,
         height: 0,
         top: 0,
         left: 0
       },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
       setEvents: events => set(state => ({
         ...state,
         events: {
@@ -1284,17 +1375,30 @@ const createStore = (invalidate, advance) => {
         }
       })),
       setSize: (width, height, top = 0, left = 0) => {
-        set({
-          size: {
-            width,
-            height,
-            top,
-            left
+        const camera = get().camera;
+        const size = {
+          width,
+          height,
+          top,
+          left
+        };
+        set(state => ({
+          size,
+          viewport: {
+            ...state.viewport,
+            ...getCurrentViewport(camera, defaultTarget, size)
           }
-        });
+        }));
       },
-      setDpr: dpr => set({
-        dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: {
+            ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
       }),
       setFrameloop: frameloop => {
         var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
@@ -1383,23 +1487,39 @@ const createStore = (invalidate, advance) => {
   });
   const state = rootStore.getState();
   let oldSize = state.size;
-  let oldDpr = state.dpr;
-  rootStore.subscribe(({
-    camera,
-    size,
-    dpr,
-    gl
-  }) => {
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const {
+      camera,
+      size,
+      viewport,
+      gl,
+      set
+    } = rootStore.getState();
+
     // Resize camera and renderer on changes to size and pixelratio
-    if (size !== oldSize || dpr !== oldDpr) {
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
       oldSize = size;
-      oldDpr = dpr;
+      oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(dpr);
+      gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
+
+    // Update viewport once the camera changes
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      // Update viewport
+      set(state => ({
+        viewport: {
+          ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+    }
   });
 
   // Invalidate on any change
@@ -1544,15 +1664,20 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
 function useInstanceHandle(ref) {
   const instance = React.useRef(null);
-  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  React.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
   return instance;
 }
+
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
 function useStore() {
   const store = React.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -1584,7 +1709,7 @@ function useFrame(callback, renderPriority = 0) {
 
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 function useUpdate(callback, stage = Stages.Update) {
   const store = useStore();
@@ -1631,6 +1756,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => res(isObject3D(data == null ? void 0 : data.scene) ? Object.assign(data, buildGraph(data.scene)) : data), onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`))))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
@@ -1854,7 +1980,15 @@ function createRoot(canvas) {
         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);
+          if (cameraOptions) {
+            applyProps(camera, cameraOptions);
+            // Preserve user-defined frustum if possible
+            // https://github.com/pmndrs/react-three-fiber/issues/3160
+            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+              camera.manual = true;
+              camera.updateProjectionMatrix();
+            }
+          }
           // Always look at center by default
           if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
@@ -1983,7 +2117,7 @@ function createRoot(canvas) {
         state.setSize(size.width, size.height, size.top, size.left);
       }
       // Check pixelratio
-      if (dpr && state.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
       // Check frameloop
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
       // Check pointer missed
@@ -2106,8 +2240,11 @@ function Portal({
   const [raycaster] = React.useState(() => new THREE.Raycaster());
   const [pointer] = React.useState(() => new THREE.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
+    let viewport;
     if (injectState.camera && size) {
       const camera = injectState.camera;
+      // Calculate the override viewport, if present
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
       // Update the portal camera, if it differs from the previous layer
       if (camera !== rootState.camera) updateCamera(camera, size);
     }
@@ -2123,7 +2260,7 @@ function Portal({
       mouse: pointer,
       // Their previous root is the layer before it
       previousRoot,
-      // Events and size can be overridden by the inject layer
+      // Events, size and viewport can be overridden by the inject layer
       events: {
         ...rootState.events,
         ...injectState.events,
@@ -2133,6 +2270,10 @@ function Portal({
         ...rootState.size,
         ...size
       },
+      viewport: {
+        ...rootState.viewport,
+        ...viewport
+      },
       // Layers are allowed to override events
       setEvents: events => injectState.set(state => ({
         ...state,

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('./loop-7f1fb121.cjs.dev.js');
+var loop = require('./loop-02cefb27.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('./loop-7224f71f.cjs.prod.js');
+var loop = require('./loop-1fad3b6f.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-bdf826ba.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-bdf826ba.esm.js';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-d73c6316.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-d73c6316.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('../../dist/loop-7f1fb121.cjs.dev.js');
+var loop = require('../../dist/loop-02cefb27.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('../../dist/loop-7224f71f.cjs.prod.js');
+var loop = require('../../dist/loop-1fad3b6f.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-bdf826ba.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from '../../dist/loop-bdf826ba.esm.js';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, d as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from '../../dist/loop-d73c6316.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from '../../dist/loop-d73c6316.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.5",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",