@react-three/fiber 7.0.17 → 7.0.21

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @react-three/fiber
 
+## 7.0.21
+
+### Patch Changes
+
+- 65e4147: up usemeasure, add last event to internals"
+
+## 7.0.20
+
+### Patch Changes
+
+- 54cb0fd: update react-use-measure, allow it to use the offsetSize
+
+## 7.0.19
+
+### Patch Changes
+
+- 7aa2eab: fix: remove zustand subcribe selector
+
+## 7.0.18
+
+### Patch Changes
+
+- 6780f58: fix unmount pointer capture
+
 ## 7.0.17
 
 ### Patch Changes

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

@@ -53,6 +53,10 @@ export interface EventManager<TTarget> {
     connect?: (target: TTarget) => void;
     disconnect?: () => void;
 }
+export interface PointerCaptureTarget {
+    intersection: Intersection;
+    target: Element;
+}
 export declare function removeInteractivity(store: UseStore<RootState>, object: THREE.Object3D): void;
 export declare function createEvents(store: UseStore<RootState>): {
     handlePointer: (name: string) => (event: DomEvent) => void;

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as ReactThreeFiber from '../three-types';
 import { GetState, SetState, UseStore } from 'zustand';
 import { Instance, InstanceProps } from './renderer';
-import { DomEvent, EventManager, ThreeEvent } from './events';
+import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
 }
@@ -47,10 +47,11 @@ export declare type InternalState = {
     priority: number;
     frames: number;
     lastProps: StoreProps;
+    lastEvent: React.MutableRefObject<DomEvent>;
     interaction: THREE.Object3D[];
     hovered: Map<string, DomEvent>;
     subscribers: Subscription[];
-    capturedMap: Map<number, Map<THREE.Object3D, Intersection>>;
+    capturedMap: Map<number, Map<THREE.Object3D, PointerCaptureTarget>>;
     initialClick: [x: number, y: number];
     initialHits: THREE.Object3D[];
     subscribe: (callback: React.MutableRefObject<RenderCallback>, priority?: number) => () => void;

package/dist/declarations/src/three-types.d.ts

@@ -59,7 +59,6 @@ export declare type LineSegmentsProps = Object3DNode<THREE.LineSegments, typeof
 export declare type LineLoopProps = Object3DNode<THREE.LineLoop, typeof THREE.LineLoop>;
 export declare type PointsProps = Object3DNode<THREE.Points, typeof THREE.Points>;
 export declare type GroupProps = Object3DNode<THREE.Group, typeof THREE.Group>;
-export declare type ImmediateRenderObjectProps = Object3DNode<THREE.ImmediateRenderObject, typeof THREE.ImmediateRenderObject>;
 export declare type CameraProps = Object3DNode<THREE.Camera, typeof THREE.Camera>;
 export declare type PerspectiveCameraProps = Object3DNode<THREE.PerspectiveCamera, typeof THREE.PerspectiveCamera>;
 export declare type OrthographicCameraProps = Object3DNode<THREE.OrthographicCamera, typeof THREE.OrthographicCamera>;
@@ -197,7 +196,6 @@ declare global {
             lineLoop: LineLoopProps;
             points: PointsProps;
             group: GroupProps;
-            immediateRenderObject: ImmediateRenderObjectProps;
             camera: CameraProps;
             perspectiveCamera: PerspectiveCameraProps;
             orthographicCamera: OrthographicCameraProps;

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var THREE = require('three');
 var React = require('react');
 var create = require('zustand');
-var shallow = require('zustand/shallow');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var useAsset = require('use-asset');
@@ -37,7 +36,6 @@ function _interopNamespace(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
-var shallow__default = /*#__PURE__*/_interopDefault(shallow);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
@@ -76,6 +74,23 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
+/** Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+  const captureData = captures.get(obj);
+
+  if (captureData) {
+    captures.delete(obj); // If this was the last capturing object for this pointer
+
+    if (captures.size === 0) {
+      capturedMap.delete(pointerId);
+      captureData.target.releasePointerCapture(pointerId);
+    }
+  }
+}
 
 function removeInteractivity(store, object) {
   const {
@@ -89,6 +104,9 @@ function removeInteractivity(store, object) {
       internal.hovered.delete(key);
     }
   });
+  internal.capturedMap.forEach((captures, pointerId) => {
+    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+  });
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
@@ -187,7 +205,9 @@ function createEvents(store) {
     // intersect.
 
     if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      intersections.push(...internal.capturedMap.get(event.pointerId).values());
+      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+        intersections.push(captureData.intersection);
+      }
     }
 
     return intersections;
@@ -205,9 +225,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-
-      const releasePointerCapture = id => event.target.releasePointerCapture(id);
-
       const localState = {
         stopped: false
       };
@@ -220,23 +237,36 @@ function createEvents(store) {
         };
 
         const setPointerCapture = id => {
+          const captureData = {
+            intersection: hit,
+            target: event.target
+          };
+
           if (internal.capturedMap.has(id)) {
             // if the pointerId was previously captured, we add the hit to the
             // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, hit);
+            internal.capturedMap.get(id).set(hit.eventObject, captureData);
           } else {
             // if the pointerId was not previously captured, we create a map
             // containing the hitObject, and the hit. hitObject is used for
             // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, hit]]));
+            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
           } // Call the original event now
           event.target.setPointerCapture(id);
+        };
+
+        const releasePointerCapture = id => {
+          const captures = internal.capturedMap.get(id);
+
+          if (captures) {
+            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+          }
         }; // Add native event props
 
 
-        let extractEventProps = {};
+        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in Object.getPrototypeOf(event)) {
+        for (let prop in event) {
           let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
           // called as event.nativeEvent.fn()
 
@@ -332,9 +362,8 @@ function createEvents(store) {
       case 'onLostPointerCapture':
         return event => {
           if ('pointerId' in event) {
-            // this will be a problem if one target releases the pointerId
-            // and another one is still keeping it, as the line below
-            // indifferently deletes all capturing references.
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed.
             store.getState().internal.capturedMap.delete(event.pointerId);
           }
 
@@ -348,7 +377,8 @@ function createEvents(store) {
         onPointerMissed,
         internal
       } = store.getState();
-      prepareRay(event); // Get fresh intersects
+      prepareRay(event);
+      internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
@@ -592,21 +622,21 @@ function createRenderer(roots) {
             if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
           } // Test again target.copy(class) next ...
           else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/react-spring/react-three-fiber/issues/274
+            // https://github.com/pmndrs/react-three-fiber/issues/274
             else if (value !== undefined) {
                 const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
 
                 if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
                 else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/react-spring/react-three-fiber/issues/344
+                // https://github.com/pmndrs/react-three-fiber/issues/344
 
                 if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-          // https://github.com/react-spring/react-three-fiber/issues/344
+          // https://github.com/pmndrs/react-three-fiber/issues/344
 
           if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
         }
@@ -810,7 +840,7 @@ function createRenderer(roots) {
         } else if (is.fun(detachFn)) {
           detachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f;
 
         parentInstance.remove(child); // Remove interactivity
@@ -1056,11 +1086,11 @@ const createStore = (applyProps, invalidate, advance, props) => {
   if (shadows) {
     gl.shadowMap.enabled = true;
     if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
-  } // Set color management
+  } // Set color preferences
 
 
-  if (!linear) gl.outputEncoding = THREE__namespace.sRGBEncoding;
-  if (!flat) gl.toneMapping = THREE__namespace.ACESFilmicToneMapping; // clock.elapsedTime is updated using advance(timestamp)
+  if (linear) gl.outputEncoding = THREE__namespace.LinearEncoding;
+  if (flat) gl.toneMapping = THREE__namespace.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
 
   if (frameloop === 'never') {
     clock.stop();
@@ -1210,6 +1240,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React__namespace.createRef(null),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1249,38 +1280,45 @@ const createStore = (applyProps, invalidate, advance, props) => {
         }
       }
     };
-  }); // Resize camera and renderer on changes to size and pixelratio
+  });
+  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
       internal
-    } = rootState.getState(); // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-
-    if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
-      if (isOrthographicCamera(camera)) {
-        camera.left = size.width / -2;
-        camera.right = size.width / 2;
-        camera.top = size.height / 2;
-        camera.bottom = size.height / -2;
-      } else {
-        camera.aspect = size.width / size.height;
-      }
+    } = 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 (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+        if (isOrthographicCamera(camera)) {
+          camera.left = size.width / -2;
+          camera.right = size.width / 2;
+          camera.top = size.height / 2;
+          camera.bottom = size.height / -2;
+        } else {
+          camera.aspect = size.width / size.height;
+        }
 
-      camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-      // Update matrix world since the renderer is a frame late
+        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+        // Update matrix world since the renderer is a frame late
 
-      camera.updateMatrixWorld();
-    } // Update renderer
+        camera.updateMatrixWorld();
+      } // Update renderer
 
 
-    gl.setPixelRatio(viewport.dpr);
-    gl.setSize(size.width, size.height);
-  }, state => [state.viewport.dpr, state.size], shallow__default['default']);
-  const state = rootState.getState(); // Update size
+      gl.setPixelRatio(viewport.dpr);
+      gl.setSize(size.width, size.height);
+      oldSize = size;
+      oldDpr = viewport.dpr;
+    }
+  }); // Update size
 
   if (size) state.setSize(size.width, size.height); // Invalidate on any change
 
@@ -1644,7 +1682,11 @@ const createRendererInstance = (gl, canvas) => {
     antialias: true,
     alpha: true,
     ...gl
-  });
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+
   if (gl) applyProps(renderer, gl);
   return renderer;
 };

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var THREE = require('three');
 var React = require('react');
 var create = require('zustand');
-var shallow = require('zustand/shallow');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
 var useAsset = require('use-asset');
@@ -37,7 +36,6 @@ function _interopNamespace(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
-var shallow__default = /*#__PURE__*/_interopDefault(shallow);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
@@ -76,6 +74,23 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
+/** Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+
+
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+  const captureData = captures.get(obj);
+
+  if (captureData) {
+    captures.delete(obj); // If this was the last capturing object for this pointer
+
+    if (captures.size === 0) {
+      capturedMap.delete(pointerId);
+      captureData.target.releasePointerCapture(pointerId);
+    }
+  }
+}
 
 function removeInteractivity(store, object) {
   const {
@@ -89,6 +104,9 @@ function removeInteractivity(store, object) {
       internal.hovered.delete(key);
     }
   });
+  internal.capturedMap.forEach((captures, pointerId) => {
+    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+  });
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
@@ -187,7 +205,9 @@ function createEvents(store) {
     // intersect.
 
     if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      intersections.push(...internal.capturedMap.get(event.pointerId).values());
+      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+        intersections.push(captureData.intersection);
+      }
     }
 
     return intersections;
@@ -205,9 +225,6 @@ function createEvents(store) {
 
     if (intersections.length) {
       const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
-
-      const releasePointerCapture = id => event.target.releasePointerCapture(id);
-
       const localState = {
         stopped: false
       };
@@ -220,23 +237,36 @@ function createEvents(store) {
         };
 
         const setPointerCapture = id => {
+          const captureData = {
+            intersection: hit,
+            target: event.target
+          };
+
           if (internal.capturedMap.has(id)) {
             // if the pointerId was previously captured, we add the hit to the
             // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, hit);
+            internal.capturedMap.get(id).set(hit.eventObject, captureData);
           } else {
             // if the pointerId was not previously captured, we create a map
             // containing the hitObject, and the hit. hitObject is used for
             // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, hit]]));
+            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
           } // Call the original event now
           event.target.setPointerCapture(id);
+        };
+
+        const releasePointerCapture = id => {
+          const captures = internal.capturedMap.get(id);
+
+          if (captures) {
+            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+          }
         }; // Add native event props
 
 
-        let extractEventProps = {};
+        let extractEventProps = {}; // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
 
-        for (let prop in Object.getPrototypeOf(event)) {
+        for (let prop in event) {
           let property = event[prop]; // Only copy over atomics, leave functions alone as these should be
           // called as event.nativeEvent.fn()
 
@@ -332,9 +362,8 @@ function createEvents(store) {
       case 'onLostPointerCapture':
         return event => {
           if ('pointerId' in event) {
-            // this will be a problem if one target releases the pointerId
-            // and another one is still keeping it, as the line below
-            // indifferently deletes all capturing references.
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed.
             store.getState().internal.capturedMap.delete(event.pointerId);
           }
 
@@ -348,7 +377,8 @@ function createEvents(store) {
         onPointerMissed,
         internal
       } = store.getState();
-      prepareRay(event); // Get fresh intersects
+      prepareRay(event);
+      internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
@@ -592,21 +622,21 @@ function createRenderer(roots) {
             if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
           } // Test again target.copy(class) next ...
           else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/react-spring/react-three-fiber/issues/274
+            // https://github.com/pmndrs/react-three-fiber/issues/274
             else if (value !== undefined) {
                 const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
 
                 if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
                 else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/react-spring/react-three-fiber/issues/344
+                // https://github.com/pmndrs/react-three-fiber/issues/344
 
                 if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-          // https://github.com/react-spring/react-three-fiber/issues/344
+          // https://github.com/pmndrs/react-three-fiber/issues/344
 
           if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
         }
@@ -810,7 +840,7 @@ function createRenderer(roots) {
         } else if (is.fun(detachFn)) {
           detachFn(child, parentInstance);
         }
-      } else if (child.isObject3D) {
+      } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f;
 
         parentInstance.remove(child); // Remove interactivity
@@ -1056,11 +1086,11 @@ const createStore = (applyProps, invalidate, advance, props) => {
   if (shadows) {
     gl.shadowMap.enabled = true;
     if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
-  } // Set color management
+  } // Set color preferences
 
 
-  if (!linear) gl.outputEncoding = THREE__namespace.sRGBEncoding;
-  if (!flat) gl.toneMapping = THREE__namespace.ACESFilmicToneMapping; // clock.elapsedTime is updated using advance(timestamp)
+  if (linear) gl.outputEncoding = THREE__namespace.LinearEncoding;
+  if (flat) gl.toneMapping = THREE__namespace.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
 
   if (frameloop === 'never') {
     clock.stop();
@@ -1210,6 +1240,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React__namespace.createRef(null),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1249,38 +1280,45 @@ const createStore = (applyProps, invalidate, advance, props) => {
         }
       }
     };
-  }); // Resize camera and renderer on changes to size and pixelratio
+  });
+  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
       internal
-    } = rootState.getState(); // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-
-    if (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
-      if (isOrthographicCamera(camera)) {
-        camera.left = size.width / -2;
-        camera.right = size.width / 2;
-        camera.top = size.height / 2;
-        camera.bottom = size.height / -2;
-      } else {
-        camera.aspect = size.width / size.height;
-      }
+    } = 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 (!(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
+        if (isOrthographicCamera(camera)) {
+          camera.left = size.width / -2;
+          camera.right = size.width / 2;
+          camera.top = size.height / 2;
+          camera.bottom = size.height / -2;
+        } else {
+          camera.aspect = size.width / size.height;
+        }
 
-      camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-      // Update matrix world since the renderer is a frame late
+        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+        // Update matrix world since the renderer is a frame late
 
-      camera.updateMatrixWorld();
-    } // Update renderer
+        camera.updateMatrixWorld();
+      } // Update renderer
 
 
-    gl.setPixelRatio(viewport.dpr);
-    gl.setSize(size.width, size.height);
-  }, state => [state.viewport.dpr, state.size], shallow__default['default']);
-  const state = rootState.getState(); // Update size
+      gl.setPixelRatio(viewport.dpr);
+      gl.setSize(size.width, size.height);
+      oldSize = size;
+      oldDpr = viewport.dpr;
+    }
+  }); // Update size
 
   if (size) state.setSize(size.width, size.height); // Invalidate on any change
 
@@ -1644,7 +1682,11 @@ const createRendererInstance = (gl, canvas) => {
     antialias: true,
     alpha: true,
     ...gl
-  });
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+
   if (gl) applyProps(renderer, gl);
   return renderer;
 };