@react-three/fiber 8.0.23 → 8.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @react-three/fiber
2
2
 
3
+ ## 8.0.26
4
+
5
+ ### Patch Changes
6
+
7
+ - 7b6df9df: fix: infinite loop updating cam viewport
8
+
9
+ ## 8.0.25
10
+
11
+ ### Patch Changes
12
+
13
+ - b7cd0f42: update viewport on camera changes
14
+
15
+ ## 8.0.24
16
+
17
+ ### Patch Changes
18
+
19
+ - ee8e785: fix: attach timings
20
+
3
21
  ## 8.0.23
4
22
 
5
23
  ### Patch Changes
@@ -1,5 +1,6 @@
1
1
  import * as THREE from 'three';
2
2
  import { StateSelector, EqualityChecker } from 'zustand';
3
+ import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
3
4
  import { RootState, RenderCallback } from './store';
4
5
  import { ObjectMap } from './utils';
5
6
  export interface Loader<T> extends THREE.Loader {
@@ -13,12 +14,8 @@ export declare function useStore(): import("zustand").UseBoundStore<RootState, i
13
14
  export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
14
15
  export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
15
16
  export declare function useGraph(object: THREE.Object3D): ObjectMap;
16
- interface GLTFLike {
17
- scene: THREE.Object3D;
18
- }
19
- export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTFLike, GLTFLike & ObjectMap>[] : BranchingReturn<T, GLTFLike, GLTFLike & ObjectMap>;
17
+ export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
20
18
  export declare namespace useLoader {
21
19
  var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
22
20
  var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
23
21
  }
24
- export {};
@@ -913,9 +913,10 @@ function createRenderer(roots, getEventPriority) {
913
913
  if (child) {
914
914
  var _child$__r3f, _parentInstance$__r3f;
915
915
 
916
- // The attach attribute implies that the object attaches itself on the parent.
917
- // That is handled at commit to avoid duplication during Suspense
918
- if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
916
+ // The attach attribute implies that the object attaches itself on the parent
917
+ if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
918
+ attach(parentInstance, child, child.__r3f.attach);
919
+ } else if (child.isObject3D && parentInstance.isObject3D) {
919
920
  // add in the usual parent-child way
920
921
  parentInstance.add(child);
921
922
  added = true;
@@ -937,7 +938,9 @@ function createRenderer(roots, getEventPriority) {
937
938
  if (child) {
938
939
  var _child$__r3f2, _parentInstance$__r3f2;
939
940
 
940
- if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
941
+ if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
942
+ attach(parentInstance, child, child.__r3f.attach);
943
+ } else if (child.isObject3D && parentInstance.isObject3D) {
941
944
  child.parent = parentInstance;
942
945
  child.dispatchEvent({
943
946
  type: 'added'
@@ -1026,7 +1029,7 @@ function createRenderer(roots, getEventPriority) {
1026
1029
  }
1027
1030
 
1028
1031
  function switchInstance(instance, type, newProps, fiber) {
1029
- var _instance$__r3f, _newInstance$__r3f;
1032
+ var _instance$__r3f;
1030
1033
 
1031
1034
  const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
1032
1035
  if (!parent) return;
@@ -1038,15 +1041,10 @@ function createRenderer(roots, getEventPriority) {
1038
1041
  if (type !== 'primitive' && instance.children) {
1039
1042
  instance.children.forEach(child => appendChild(newInstance, child));
1040
1043
  instance.children = [];
1041
- } // Copy over child attachments
1042
-
1043
-
1044
- for (const child of instance.__r3f.objects) {
1045
- appendChild(newInstance, child);
1046
- detach(instance, child, child.__r3f.attach);
1047
- attach(newInstance, child, child.__r3f.attach);
1048
1044
  }
1049
1045
 
1046
+ instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
1047
+
1050
1048
  instance.__r3f.objects = [];
1051
1049
  removeChild(parent, instance);
1052
1050
  appendChild(parent, newInstance); // Re-bind event handlers
@@ -1055,11 +1053,6 @@ function createRenderer(roots, getEventPriority) {
1055
1053
  const rootState = newInstance.__r3f.root.getState();
1056
1054
 
1057
1055
  rootState.internal.interaction.push(newInstance);
1058
- } // Attach instance to parent
1059
-
1060
-
1061
- if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
1062
- attach(parent, newInstance, newInstance.__r3f.attach);
1063
1056
  } // This evil hack switches the react-internal fiber node
1064
1057
  [fiber, fiber.alternate].forEach(fiber => {
1065
1058
  if (fiber !== null) {
@@ -1100,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
1100
1093
  const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
1101
1094
  // Returning true will trigger commitMount
1102
1095
 
1103
- return !!localState.handlers || !!localState.attach;
1096
+ return !!localState.handlers;
1104
1097
  },
1105
1098
 
1106
1099
  prepareUpdate(instance, type, oldProps, newProps) {
@@ -1146,11 +1139,6 @@ function createRenderer(roots, getEventPriority) {
1146
1139
 
1147
1140
  if (instance.raycast && localState.handlers && localState.eventCount) {
1148
1141
  instance.__r3f.root.getState().internal.interaction.push(instance);
1149
- } // The attach attribute implies that the object attaches itself on the parent
1150
-
1151
-
1152
- if (localState.parent && localState.attach) {
1153
- attach(localState.parent, instance, localState.attach);
1154
1142
  }
1155
1143
  },
1156
1144
 
@@ -1164,11 +1152,27 @@ function createRenderer(roots, getEventPriority) {
1164
1152
  detachDeletedInstance: () => {},
1165
1153
 
1166
1154
  hideInstance(instance) {
1155
+ var _instance$__r3f4;
1156
+
1157
+ // Deatch while the instance is hidden
1158
+ const {
1159
+ attach: type,
1160
+ parent
1161
+ } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
1162
+ if (type && parent) detach(parent, instance, type);
1167
1163
  if (instance.isObject3D) instance.visible = false;
1168
1164
  invalidateInstance(instance);
1169
1165
  },
1170
1166
 
1171
1167
  unhideInstance(instance, props) {
1168
+ var _instance$__r3f5;
1169
+
1170
+ // Re-attach when the instance is unhidden
1171
+ const {
1172
+ attach: type,
1173
+ parent
1174
+ } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
1175
+ if (type && parent) attach(parent, instance, type);
1172
1176
  if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
1173
1177
  invalidateInstance(instance);
1174
1178
  },
@@ -1385,25 +1389,37 @@ const createStore = (invalidate, advance) => {
1385
1389
  }
1386
1390
  };
1387
1391
  });
1388
- const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
1389
-
1392
+ const state = rootState.getState();
1390
1393
  let oldSize = state.size;
1391
1394
  let oldDpr = state.viewport.dpr;
1395
+ let oldCamera = state.camera;
1392
1396
  rootState.subscribe(() => {
1393
1397
  const {
1394
1398
  camera,
1395
1399
  size,
1396
1400
  viewport,
1397
- gl
1398
- } = rootState.getState();
1401
+ gl,
1402
+ set
1403
+ } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
1399
1404
 
1400
1405
  if (size !== oldSize || viewport.dpr !== oldDpr) {
1401
- updateCamera(camera, size); // Update renderer
1406
+ oldSize = size;
1407
+ oldDpr = viewport.dpr; // Update camera & renderer
1402
1408
 
1409
+ updateCamera(camera, size);
1403
1410
  gl.setPixelRatio(viewport.dpr);
1404
1411
  gl.setSize(size.width, size.height, size.updateStyle);
1405
- oldSize = size;
1406
- oldDpr = viewport.dpr;
1412
+ } // Update viewport once the camera changes
1413
+
1414
+
1415
+ if (camera !== oldCamera) {
1416
+ oldCamera = camera; // Update viewport
1417
+
1418
+ set(state => ({
1419
+ viewport: { ...state.viewport,
1420
+ ...state.viewport.getCurrentViewport(camera)
1421
+ }
1422
+ }));
1407
1423
  }
1408
1424
  }); // Invalidate on any change
1409
1425
 
@@ -1593,13 +1609,14 @@ function loadingFn(extensions, onProgress) {
1593
1609
  }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
1594
1610
  };
1595
1611
  }
1596
-
1597
1612
  /**
1598
1613
  * Synchronously loads and caches assets with a three loader.
1599
1614
  *
1600
1615
  * Note: this hook's caller must be wrapped with `React.Suspense`
1601
1616
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1602
1617
  */
1618
+
1619
+
1603
1620
  function useLoader(Proto, input, extensions, onProgress) {
1604
1621
  // Use suspense to load async assets
1605
1622
  const keys = Array.isArray(input) ? input : [input];
@@ -913,9 +913,10 @@ function createRenderer(roots, getEventPriority) {
913
913
  if (child) {
914
914
  var _child$__r3f, _parentInstance$__r3f;
915
915
 
916
- // The attach attribute implies that the object attaches itself on the parent.
917
- // That is handled at commit to avoid duplication during Suspense
918
- if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
916
+ // The attach attribute implies that the object attaches itself on the parent
917
+ if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
918
+ attach(parentInstance, child, child.__r3f.attach);
919
+ } else if (child.isObject3D && parentInstance.isObject3D) {
919
920
  // add in the usual parent-child way
920
921
  parentInstance.add(child);
921
922
  added = true;
@@ -937,7 +938,9 @@ function createRenderer(roots, getEventPriority) {
937
938
  if (child) {
938
939
  var _child$__r3f2, _parentInstance$__r3f2;
939
940
 
940
- if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
941
+ if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
942
+ attach(parentInstance, child, child.__r3f.attach);
943
+ } else if (child.isObject3D && parentInstance.isObject3D) {
941
944
  child.parent = parentInstance;
942
945
  child.dispatchEvent({
943
946
  type: 'added'
@@ -1026,7 +1029,7 @@ function createRenderer(roots, getEventPriority) {
1026
1029
  }
1027
1030
 
1028
1031
  function switchInstance(instance, type, newProps, fiber) {
1029
- var _instance$__r3f, _newInstance$__r3f;
1032
+ var _instance$__r3f;
1030
1033
 
1031
1034
  const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
1032
1035
  if (!parent) return;
@@ -1038,15 +1041,10 @@ function createRenderer(roots, getEventPriority) {
1038
1041
  if (type !== 'primitive' && instance.children) {
1039
1042
  instance.children.forEach(child => appendChild(newInstance, child));
1040
1043
  instance.children = [];
1041
- } // Copy over child attachments
1042
-
1043
-
1044
- for (const child of instance.__r3f.objects) {
1045
- appendChild(newInstance, child);
1046
- detach(instance, child, child.__r3f.attach);
1047
- attach(newInstance, child, child.__r3f.attach);
1048
1044
  }
1049
1045
 
1046
+ instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
1047
+
1050
1048
  instance.__r3f.objects = [];
1051
1049
  removeChild(parent, instance);
1052
1050
  appendChild(parent, newInstance); // Re-bind event handlers
@@ -1055,11 +1053,6 @@ function createRenderer(roots, getEventPriority) {
1055
1053
  const rootState = newInstance.__r3f.root.getState();
1056
1054
 
1057
1055
  rootState.internal.interaction.push(newInstance);
1058
- } // Attach instance to parent
1059
-
1060
-
1061
- if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
1062
- attach(parent, newInstance, newInstance.__r3f.attach);
1063
1056
  } // This evil hack switches the react-internal fiber node
1064
1057
  [fiber, fiber.alternate].forEach(fiber => {
1065
1058
  if (fiber !== null) {
@@ -1100,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
1100
1093
  const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
1101
1094
  // Returning true will trigger commitMount
1102
1095
 
1103
- return !!localState.handlers || !!localState.attach;
1096
+ return !!localState.handlers;
1104
1097
  },
1105
1098
 
1106
1099
  prepareUpdate(instance, type, oldProps, newProps) {
@@ -1146,11 +1139,6 @@ function createRenderer(roots, getEventPriority) {
1146
1139
 
1147
1140
  if (instance.raycast && localState.handlers && localState.eventCount) {
1148
1141
  instance.__r3f.root.getState().internal.interaction.push(instance);
1149
- } // The attach attribute implies that the object attaches itself on the parent
1150
-
1151
-
1152
- if (localState.parent && localState.attach) {
1153
- attach(localState.parent, instance, localState.attach);
1154
1142
  }
1155
1143
  },
1156
1144
 
@@ -1164,11 +1152,27 @@ function createRenderer(roots, getEventPriority) {
1164
1152
  detachDeletedInstance: () => {},
1165
1153
 
1166
1154
  hideInstance(instance) {
1155
+ var _instance$__r3f4;
1156
+
1157
+ // Deatch while the instance is hidden
1158
+ const {
1159
+ attach: type,
1160
+ parent
1161
+ } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
1162
+ if (type && parent) detach(parent, instance, type);
1167
1163
  if (instance.isObject3D) instance.visible = false;
1168
1164
  invalidateInstance(instance);
1169
1165
  },
1170
1166
 
1171
1167
  unhideInstance(instance, props) {
1168
+ var _instance$__r3f5;
1169
+
1170
+ // Re-attach when the instance is unhidden
1171
+ const {
1172
+ attach: type,
1173
+ parent
1174
+ } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
1175
+ if (type && parent) attach(parent, instance, type);
1172
1176
  if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
1173
1177
  invalidateInstance(instance);
1174
1178
  },
@@ -1385,25 +1389,37 @@ const createStore = (invalidate, advance) => {
1385
1389
  }
1386
1390
  };
1387
1391
  });
1388
- const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
1389
-
1392
+ const state = rootState.getState();
1390
1393
  let oldSize = state.size;
1391
1394
  let oldDpr = state.viewport.dpr;
1395
+ let oldCamera = state.camera;
1392
1396
  rootState.subscribe(() => {
1393
1397
  const {
1394
1398
  camera,
1395
1399
  size,
1396
1400
  viewport,
1397
- gl
1398
- } = rootState.getState();
1401
+ gl,
1402
+ set
1403
+ } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
1399
1404
 
1400
1405
  if (size !== oldSize || viewport.dpr !== oldDpr) {
1401
- updateCamera(camera, size); // Update renderer
1406
+ oldSize = size;
1407
+ oldDpr = viewport.dpr; // Update camera & renderer
1402
1408
 
1409
+ updateCamera(camera, size);
1403
1410
  gl.setPixelRatio(viewport.dpr);
1404
1411
  gl.setSize(size.width, size.height, size.updateStyle);
1405
- oldSize = size;
1406
- oldDpr = viewport.dpr;
1412
+ } // Update viewport once the camera changes
1413
+
1414
+
1415
+ if (camera !== oldCamera) {
1416
+ oldCamera = camera; // Update viewport
1417
+
1418
+ set(state => ({
1419
+ viewport: { ...state.viewport,
1420
+ ...state.viewport.getCurrentViewport(camera)
1421
+ }
1422
+ }));
1407
1423
  }
1408
1424
  }); // Invalidate on any change
1409
1425
 
@@ -1593,13 +1609,14 @@ function loadingFn(extensions, onProgress) {
1593
1609
  }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
1594
1610
  };
1595
1611
  }
1596
-
1597
1612
  /**
1598
1613
  * Synchronously loads and caches assets with a three loader.
1599
1614
  *
1600
1615
  * Note: this hook's caller must be wrapped with `React.Suspense`
1601
1616
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1602
1617
  */
1618
+
1619
+
1603
1620
  function useLoader(Proto, input, extensions, onProgress) {
1604
1621
  // Use suspense to load async assets
1605
1622
  const keys = Array.isArray(input) ? input : [input];
@@ -886,9 +886,10 @@ function createRenderer(roots, getEventPriority) {
886
886
  if (child) {
887
887
  var _child$__r3f, _parentInstance$__r3f;
888
888
 
889
- // The attach attribute implies that the object attaches itself on the parent.
890
- // That is handled at commit to avoid duplication during Suspense
891
- if (!((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) && child.isObject3D && parentInstance.isObject3D) {
889
+ // The attach attribute implies that the object attaches itself on the parent
890
+ if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
891
+ attach(parentInstance, child, child.__r3f.attach);
892
+ } else if (child.isObject3D && parentInstance.isObject3D) {
892
893
  // add in the usual parent-child way
893
894
  parentInstance.add(child);
894
895
  added = true;
@@ -910,7 +911,9 @@ function createRenderer(roots, getEventPriority) {
910
911
  if (child) {
911
912
  var _child$__r3f2, _parentInstance$__r3f2;
912
913
 
913
- if (!((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) && child.isObject3D && parentInstance.isObject3D) {
914
+ if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
915
+ attach(parentInstance, child, child.__r3f.attach);
916
+ } else if (child.isObject3D && parentInstance.isObject3D) {
914
917
  child.parent = parentInstance;
915
918
  child.dispatchEvent({
916
919
  type: 'added'
@@ -999,7 +1002,7 @@ function createRenderer(roots, getEventPriority) {
999
1002
  }
1000
1003
 
1001
1004
  function switchInstance(instance, type, newProps, fiber) {
1002
- var _instance$__r3f, _newInstance$__r3f;
1005
+ var _instance$__r3f;
1003
1006
 
1004
1007
  const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
1005
1008
  if (!parent) return;
@@ -1011,15 +1014,10 @@ function createRenderer(roots, getEventPriority) {
1011
1014
  if (type !== 'primitive' && instance.children) {
1012
1015
  instance.children.forEach(child => appendChild(newInstance, child));
1013
1016
  instance.children = [];
1014
- } // Copy over child attachments
1015
-
1016
-
1017
- for (const child of instance.__r3f.objects) {
1018
- appendChild(newInstance, child);
1019
- detach(instance, child, child.__r3f.attach);
1020
- attach(newInstance, child, child.__r3f.attach);
1021
1017
  }
1022
1018
 
1019
+ instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
1020
+
1023
1021
  instance.__r3f.objects = [];
1024
1022
  removeChild(parent, instance);
1025
1023
  appendChild(parent, newInstance); // Re-bind event handlers
@@ -1028,11 +1026,6 @@ function createRenderer(roots, getEventPriority) {
1028
1026
  const rootState = newInstance.__r3f.root.getState();
1029
1027
 
1030
1028
  rootState.internal.interaction.push(newInstance);
1031
- } // Attach instance to parent
1032
-
1033
-
1034
- if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
1035
- attach(parent, newInstance, newInstance.__r3f.attach);
1036
1029
  } // This evil hack switches the react-internal fiber node
1037
1030
  [fiber, fiber.alternate].forEach(fiber => {
1038
1031
  if (fiber !== null) {
@@ -1073,7 +1066,7 @@ function createRenderer(roots, getEventPriority) {
1073
1066
  const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
1074
1067
  // Returning true will trigger commitMount
1075
1068
 
1076
- return !!localState.handlers || !!localState.attach;
1069
+ return !!localState.handlers;
1077
1070
  },
1078
1071
 
1079
1072
  prepareUpdate(instance, type, oldProps, newProps) {
@@ -1119,11 +1112,6 @@ function createRenderer(roots, getEventPriority) {
1119
1112
 
1120
1113
  if (instance.raycast && localState.handlers && localState.eventCount) {
1121
1114
  instance.__r3f.root.getState().internal.interaction.push(instance);
1122
- } // The attach attribute implies that the object attaches itself on the parent
1123
-
1124
-
1125
- if (localState.parent && localState.attach) {
1126
- attach(localState.parent, instance, localState.attach);
1127
1115
  }
1128
1116
  },
1129
1117
 
@@ -1137,11 +1125,27 @@ function createRenderer(roots, getEventPriority) {
1137
1125
  detachDeletedInstance: () => {},
1138
1126
 
1139
1127
  hideInstance(instance) {
1128
+ var _instance$__r3f4;
1129
+
1130
+ // Deatch while the instance is hidden
1131
+ const {
1132
+ attach: type,
1133
+ parent
1134
+ } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
1135
+ if (type && parent) detach(parent, instance, type);
1140
1136
  if (instance.isObject3D) instance.visible = false;
1141
1137
  invalidateInstance(instance);
1142
1138
  },
1143
1139
 
1144
1140
  unhideInstance(instance, props) {
1141
+ var _instance$__r3f5;
1142
+
1143
+ // Re-attach when the instance is unhidden
1144
+ const {
1145
+ attach: type,
1146
+ parent
1147
+ } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
1148
+ if (type && parent) attach(parent, instance, type);
1145
1149
  if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
1146
1150
  invalidateInstance(instance);
1147
1151
  },
@@ -1358,25 +1362,37 @@ const createStore = (invalidate, advance) => {
1358
1362
  }
1359
1363
  };
1360
1364
  });
1361
- const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
1362
-
1365
+ const state = rootState.getState();
1363
1366
  let oldSize = state.size;
1364
1367
  let oldDpr = state.viewport.dpr;
1368
+ let oldCamera = state.camera;
1365
1369
  rootState.subscribe(() => {
1366
1370
  const {
1367
1371
  camera,
1368
1372
  size,
1369
1373
  viewport,
1370
- gl
1371
- } = rootState.getState();
1374
+ gl,
1375
+ set
1376
+ } = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
1372
1377
 
1373
1378
  if (size !== oldSize || viewport.dpr !== oldDpr) {
1374
- updateCamera(camera, size); // Update renderer
1379
+ oldSize = size;
1380
+ oldDpr = viewport.dpr; // Update camera & renderer
1375
1381
 
1382
+ updateCamera(camera, size);
1376
1383
  gl.setPixelRatio(viewport.dpr);
1377
1384
  gl.setSize(size.width, size.height, size.updateStyle);
1378
- oldSize = size;
1379
- oldDpr = viewport.dpr;
1385
+ } // Update viewport once the camera changes
1386
+
1387
+
1388
+ if (camera !== oldCamera) {
1389
+ oldCamera = camera; // Update viewport
1390
+
1391
+ set(state => ({
1392
+ viewport: { ...state.viewport,
1393
+ ...state.viewport.getCurrentViewport(camera)
1394
+ }
1395
+ }));
1380
1396
  }
1381
1397
  }); // Invalidate on any change
1382
1398
 
@@ -1566,13 +1582,14 @@ function loadingFn(extensions, onProgress) {
1566
1582
  }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
1567
1583
  };
1568
1584
  }
1569
-
1570
1585
  /**
1571
1586
  * Synchronously loads and caches assets with a three loader.
1572
1587
  *
1573
1588
  * Note: this hook's caller must be wrapped with `React.Suspense`
1574
1589
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1575
1590
  */
1591
+
1592
+
1576
1593
  function useLoader(Proto, input, extensions, onProgress) {
1577
1594
  // Use suspense to load async assets
1578
1595
  const keys = Array.isArray(input) ? input : [input];
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('./index-1c8e10cf.cjs.dev.js');
5
+ var index = require('./index-7af14ac8.cjs.dev.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('./index-e8067a9e.cjs.prod.js');
5
+ var index = require('./index-1301c9b6.cjs.prod.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -1,5 +1,5 @@
1
- import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-ac97daed.esm.js';
2
- export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-ac97daed.esm.js';
1
+ import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-bfdbf5d7.esm.js';
2
+ export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-bfdbf5d7.esm.js';
3
3
  import _extends from '@babel/runtime/helpers/esm/extends';
4
4
  import * as React from 'react';
5
5
  import * as THREE from 'three';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('../../dist/index-1c8e10cf.cjs.dev.js');
5
+ var index = require('../../dist/index-7af14ac8.cjs.dev.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var index = require('../../dist/index-e8067a9e.cjs.prod.js');
5
+ var index = require('../../dist/index-1301c9b6.cjs.prod.js');
6
6
  var _extends = require('@babel/runtime/helpers/extends');
7
7
  var React = require('react');
8
8
  var THREE = require('three');
@@ -1,5 +1,5 @@
1
- import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-ac97daed.esm.js';
2
- export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-ac97daed.esm.js';
1
+ import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-bfdbf5d7.esm.js';
2
+ export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-bfdbf5d7.esm.js';
3
3
  import _extends from '@babel/runtime/helpers/esm/extends';
4
4
  import * as React from 'react';
5
5
  import * as THREE from 'three';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-three/fiber",
3
- "version": "8.0.23",
3
+ "version": "8.0.26",
4
4
  "description": "A React renderer for Threejs",
5
5
  "keywords": [
6
6
  "react",