@react-three/fiber 7.0.24 → 7.0.25

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.
@@ -1,336 +0,0 @@
1
- import { z as buildGraph, A as is, c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-fccd77b0.esm.js';
2
- export { t as ReactThreeFiber, y as _roots, x as act, v as addAfterEffect, s as addEffect, w as addTail, q as advance, l as applyProps, i as context, j as createPortal, a as createRoot, m as dispose, e as extend, n as invalidate, k as reconciler, r as render, u as unmountComponentAtNode, f as useFrame, g as useGraph, b as useStore, d as useThree } from '../../dist/index-fccd77b0.esm.js';
3
- import * as THREE from 'three';
4
- import { Asset } from 'expo-asset';
5
- import { readAsStringAsync } from 'expo-file-system';
6
- import { decode } from 'base64-arraybuffer';
7
- import { suspend, preload, clear } from 'suspend-react';
8
- import _extends from '@babel/runtime/helpers/esm/extends';
9
- import * as React from 'react';
10
- import { PixelRatio, View, StyleSheet } from 'react-native';
11
- import { GLView } from 'expo-gl';
12
- import Pressability from 'react-native/Libraries/Pressability/Pressability';
13
- import 'react-reconciler/constants';
14
- import 'zustand';
15
- import 'react-reconciler';
16
- import 'scheduler';
17
-
18
- /**
19
- * Generates an asset based on input type.
20
- */
21
-
22
- const getAsset = input => {
23
- if (input instanceof Asset) return input;
24
-
25
- switch (typeof input) {
26
- case 'string':
27
- return Asset.fromURI(input);
28
-
29
- case 'number':
30
- return Asset.fromModule(input);
31
-
32
- default:
33
- throw 'Invalid asset! Must be a URI or module.';
34
- }
35
- };
36
- /**
37
- * Downloads from a local URI and decodes into an ArrayBuffer.
38
- */
39
-
40
-
41
- const toBuffer = async localUri => readAsStringAsync(localUri, {
42
- encoding: 'base64'
43
- }).then(decode);
44
-
45
- function loadingFn(extensions, onProgress) {
46
- return function (Proto, ...input) {
47
- // Construct new loader and run extensions
48
- const loader = new Proto();
49
- if (extensions) extensions(loader); // Go through the urls and load them
50
-
51
- return Promise.all(input.map(entry => new Promise(async (res, reject) => {
52
- // Construct URL
53
- const url = typeof entry === 'string' ? loader.path + entry : entry; // There's no Image in native, so we create & pass a data texture instead
54
-
55
- if (loader instanceof THREE.TextureLoader) {
56
- const asset = await getAsset(url).downloadAsync();
57
- const texture = new THREE.Texture();
58
- texture.isDataTexture = true;
59
- texture.image = {
60
- data: asset,
61
- width: asset.width,
62
- height: asset.height
63
- };
64
- texture.needsUpdate = true;
65
- return res(texture);
66
- } // Do similar for CubeTextures
67
-
68
-
69
- if (loader instanceof THREE.CubeTextureLoader) {
70
- const texture = new THREE.CubeTexture();
71
- texture.isDataTexture = true;
72
- texture.images = await Promise.all(url.map(async src => {
73
- const asset = await getAsset(src).downloadAsync();
74
- return {
75
- data: asset,
76
- width: asset.width,
77
- height: asset.height
78
- };
79
- }));
80
- texture.needsUpdate = true;
81
- return res(texture);
82
- } // If asset is external and not an Image, load it
83
-
84
-
85
- if (url.startsWith != null && url.startsWith('http') && Proto.prototype.hasOwnProperty('load')) {
86
- return loader.load(entry, data => {
87
- if (data.scene) Object.assign(data, buildGraph(data.scene));
88
- res(data);
89
- }, onProgress, error => reject(`Could not load ${url}: ${error.message}`));
90
- } // Otherwise, create a localUri and a file buffer
91
-
92
-
93
- const {
94
- localUri
95
- } = await getAsset(url).downloadAsync();
96
- const arrayBuffer = await toBuffer(localUri); // Parse it
97
-
98
- const parsed = loader.parse == null ? void 0 : loader.parse(arrayBuffer, undefined, data => {
99
- if (data.scene) Object.assign(data, buildGraph(data.scene));
100
- res(data);
101
- }, error => reject(`Could not load ${url}: ${error.message}`)); // Respect synchronous parsers which don't have callbacks
102
-
103
- if (parsed) return res(parsed);
104
- })));
105
- };
106
- }
107
-
108
- function useLoader(Proto, input, extensions, onProgress) {
109
- // Use suspense to load async assets
110
- const keys = Array.isArray(input) ? input : [input];
111
- const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
112
- equal: is.equ
113
- }); // Return the object/s
114
-
115
- return Array.isArray(input) ? results : results[0];
116
- }
117
-
118
- useLoader.preload = function (Proto, input, extensions) {
119
- const keys = Array.isArray(input) ? input : [input];
120
- return preload(loadingFn(extensions), [Proto, ...keys]);
121
- };
122
-
123
- useLoader.clear = function (Proto, input) {
124
- const keys = Array.isArray(input) ? input : [input];
125
- return clear([Proto, ...keys]);
126
- };
127
-
128
- const EVENTS = {
129
- PRESS: 'onPress',
130
- PRESSIN: 'onPressIn',
131
- PRESSOUT: 'onPressOut',
132
- LONGPRESS: 'onLongPress',
133
- HOVERIN: 'onHoverIn',
134
- HOVEROUT: 'onHoverOut',
135
- PRESSMOVE: 'onPressMove'
136
- };
137
- const DOM_EVENTS = {
138
- [EVENTS.PRESS]: 'onClick',
139
- [EVENTS.PRESSIN]: 'onPointerDown',
140
- [EVENTS.PRESSOUT]: 'onPointerUp',
141
- [EVENTS.LONGPRESS]: 'onDoubleClick',
142
- [EVENTS.HOVERIN]: 'onPointerOver',
143
- [EVENTS.HOVEROUT]: 'onPointerOut',
144
- [EVENTS.PRESSMOVE]: 'onPointerMove'
145
- };
146
- function createTouchEvents(store) {
147
- const {
148
- handlePointer
149
- } = createEvents(store);
150
-
151
- const handleTouch = (event, name) => {
152
- event.persist() // Apply offset
153
- ;
154
- event.nativeEvent.offsetX = event.nativeEvent.pageX;
155
- event.nativeEvent.offsetY = event.nativeEvent.pageY; // Emulate DOM event
156
-
157
- const callback = handlePointer(DOM_EVENTS[name]);
158
- return callback(event.nativeEvent);
159
- };
160
-
161
- return {
162
- connected: false,
163
- handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
164
- [name]: event => handleTouch(event, name)
165
- }), {}),
166
- connect: () => {
167
- const {
168
- set,
169
- events
170
- } = store.getState();
171
- events.disconnect == null ? void 0 : events.disconnect();
172
- const connected = new Pressability(events == null ? void 0 : events.handlers);
173
- const handlers = connected.getEventHandlers();
174
- set(state => ({
175
- events: { ...state.events,
176
- connected,
177
- handlers
178
- }
179
- }));
180
- },
181
- disconnect: () => {
182
- const {
183
- set,
184
- events
185
- } = store.getState();
186
-
187
- if (events.connected) {
188
- events.connected.reset();
189
- set(state => ({
190
- events: { ...state.events,
191
- connected: false
192
- }
193
- }));
194
- }
195
- }
196
- };
197
- }
198
-
199
- const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
200
-
201
- function Block({
202
- set
203
- }) {
204
- React.useLayoutEffect(() => {
205
- set(new Promise(() => null));
206
- return () => set(false);
207
- }, [set]);
208
- return null;
209
- }
210
-
211
- class ErrorBoundary extends React.Component {
212
- constructor(...args) {
213
- super(...args);
214
- this.state = {
215
- error: false
216
- };
217
- }
218
-
219
- componentDidCatch(error) {
220
- this.props.set(error);
221
- }
222
-
223
- render() {
224
- return this.state.error ? null : this.props.children;
225
- }
226
-
227
- }
228
-
229
- ErrorBoundary.getDerivedStateFromError = () => ({
230
- error: true
231
- });
232
-
233
- const Canvas = /*#__PURE__*/React.forwardRef(({
234
- children,
235
- fallback,
236
- style,
237
- events,
238
- ...props
239
- }, forwardedRef) => {
240
- // Create a known catalogue of Threejs-native elements
241
- // This will include the entire THREE namespace by default, users can extend
242
- // their own elements by using the createRoot API instead
243
- React.useMemo(() => extend(THREE), []);
244
- const [{
245
- width,
246
- height
247
- }, setSize] = React.useState({
248
- width: 0,
249
- height: 0
250
- });
251
- const [canvas, setCanvas] = React.useState(null);
252
- const [bind, setBind] = React.useState();
253
- const canvasProps = pick(props, CANVAS_PROPS);
254
- const viewProps = omit(props, CANVAS_PROPS);
255
- const [block, setBlock] = React.useState(false);
256
- const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
257
-
258
- if (block) throw block; // Throw exception outwards if anything within canvas throws
259
-
260
- if (error) throw error;
261
- const onLayout = React.useCallback(e => {
262
- const {
263
- width,
264
- height
265
- } = e.nativeEvent.layout;
266
- setSize({
267
- width,
268
- height
269
- });
270
- }, []);
271
- const onContextCreate = React.useCallback(context => {
272
- const canvasShim = {
273
- width: context.drawingBufferWidth,
274
- height: context.drawingBufferHeight,
275
- style: {},
276
- addEventListener: () => {},
277
- removeEventListener: () => {},
278
- clientHeight: context.drawingBufferHeight,
279
- getContext: () => context
280
- };
281
- setCanvas(canvasShim);
282
- }, []);
283
-
284
- if (width > 0 && height > 0 && canvas) {
285
- // Overwrite onCreated to apply RN bindings
286
- const onCreated = state => {
287
- // Bind events after creation
288
- setBind(state.events.handlers); // Bind render to RN bridge
289
-
290
- const context = state.gl.getContext();
291
- const renderFrame = state.gl.render.bind(state.gl);
292
-
293
- state.gl.render = (scene, camera) => {
294
- renderFrame(scene, camera);
295
- context.endFrameEXP();
296
- };
297
-
298
- return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
299
- };
300
-
301
- createRoot(canvas, { ...canvasProps,
302
- // expo-gl can only render at native dpr/resolution
303
- // https://github.com/expo/expo-three/issues/39
304
- dpr: PixelRatio.get(),
305
- size: {
306
- width,
307
- height
308
- },
309
- events: events || createTouchEvents,
310
- onCreated
311
- }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
312
- set: setError
313
- }, /*#__PURE__*/React.createElement(React.Suspense, {
314
- fallback: /*#__PURE__*/React.createElement(Block, {
315
- set: setBlock
316
- })
317
- }, children)));
318
- }
319
-
320
- React.useEffect(() => {
321
- return () => unmountComponentAtNode(canvas);
322
- }, [canvas]);
323
- return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
324
- ref: forwardedRef,
325
- onLayout: onLayout,
326
- style: {
327
- flex: 1,
328
- ...style
329
- }
330
- }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
331
- onContextCreate: onContextCreate,
332
- style: StyleSheet.absoluteFill
333
- }));
334
- });
335
-
336
- export { Canvas, createTouchEvents as events, useLoader };