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