@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 +18 -0
- package/dist/declarations/src/core/hooks.d.ts +2 -5
- package/dist/{index-e8067a9e.cjs.prod.js → index-1301c9b6.cjs.prod.js} +48 -31
- package/dist/{index-1c8e10cf.cjs.dev.js → index-7af14ac8.cjs.dev.js} +48 -31
- package/dist/{index-ac97daed.esm.js → index-bfdbf5d7.esm.js} +48 -31
- package/dist/react-three-fiber.cjs.dev.js +1 -1
- package/dist/react-three-fiber.cjs.prod.js +1 -1
- package/dist/react-three-fiber.esm.js +2 -2
- package/native/dist/react-three-fiber-native.cjs.dev.js +1 -1
- package/native/dist/react-three-fiber-native.cjs.prod.js +1 -1
- package/native/dist/react-three-fiber-native.esm.js +2 -2
- package/package.json +1 -1
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
|
-
|
|
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
|
-
|
|
918
|
-
|
|
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 (
|
|
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
|
|
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
|
|
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();
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1406
|
-
|
|
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
|
-
|
|
918
|
-
|
|
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 (
|
|
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
|
|
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
|
|
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();
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1406
|
-
|
|
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
|
-
|
|
891
|
-
|
|
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 (
|
|
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
|
|
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
|
|
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();
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1379
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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';
|