@react-three/fiber 9.5.0 → 10.0.0-alpha.1

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.
Files changed (47) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.cjs +15250 -0
  3. package/dist/index.d.cts +3526 -0
  4. package/dist/index.d.mts +3526 -0
  5. package/dist/index.d.ts +3526 -0
  6. package/dist/index.mjs +15163 -0
  7. package/dist/{events-358c3764.cjs.dev.js → legacy.cjs} +5751 -6761
  8. package/dist/legacy.d.cts +3525 -0
  9. package/dist/legacy.d.mts +3525 -0
  10. package/dist/legacy.d.ts +3525 -0
  11. package/dist/{events-5a94e5eb.esm.js → legacy.mjs} +5700 -6739
  12. package/dist/webgpu/index.cjs +15715 -0
  13. package/dist/webgpu/index.d.cts +3678 -0
  14. package/dist/webgpu/index.d.mts +3678 -0
  15. package/dist/webgpu/index.d.ts +3678 -0
  16. package/dist/webgpu/index.mjs +15616 -0
  17. package/package.json +43 -45
  18. package/readme.md +98 -33
  19. package/CHANGELOG.md +0 -1192
  20. package/dist/declarations/react-reconciler/index.d.ts +0 -1044
  21. package/dist/declarations/src/core/events.d.ts +0 -92
  22. package/dist/declarations/src/core/hooks.d.ts +0 -53
  23. package/dist/declarations/src/core/index.d.ts +0 -13
  24. package/dist/declarations/src/core/loop.d.ts +0 -31
  25. package/dist/declarations/src/core/reconciler.d.ts +0 -50
  26. package/dist/declarations/src/core/renderer.d.ts +0 -89
  27. package/dist/declarations/src/core/store.d.ts +0 -130
  28. package/dist/declarations/src/core/utils.d.ts +0 -262
  29. package/dist/declarations/src/index.d.ts +0 -6
  30. package/dist/declarations/src/native/Canvas.d.ts +0 -13
  31. package/dist/declarations/src/native/events.d.ts +0 -4
  32. package/dist/declarations/src/native.d.ts +0 -6
  33. package/dist/declarations/src/three-types.d.ts +0 -68
  34. package/dist/declarations/src/web/Canvas.d.ts +0 -23
  35. package/dist/declarations/src/web/events.d.ts +0 -4
  36. package/dist/events-238e0986.cjs.prod.js +0 -8048
  37. package/dist/react-three-fiber.cjs.d.ts +0 -2
  38. package/dist/react-three-fiber.cjs.dev.js +0 -220
  39. package/dist/react-three-fiber.cjs.js +0 -7
  40. package/dist/react-three-fiber.cjs.prod.js +0 -220
  41. package/dist/react-three-fiber.esm.js +0 -165
  42. package/native/dist/react-three-fiber-native.cjs.d.ts +0 -2
  43. package/native/dist/react-three-fiber-native.cjs.dev.js +0 -567
  44. package/native/dist/react-three-fiber-native.cjs.js +0 -7
  45. package/native/dist/react-three-fiber-native.cjs.prod.js +0 -567
  46. package/native/dist/react-three-fiber-native.esm.js +0 -515
  47. package/native/package.json +0 -5
@@ -1,567 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var events = require('../../dist/events-238e0986.cjs.prod.js');
6
- var React = require('react');
7
- var THREE = require('three');
8
- var reactNative = require('react-native');
9
- var expoGl = require('expo-gl');
10
- var itsFine = require('its-fine');
11
- var jsxRuntime = require('react/jsx-runtime');
12
- var expoAsset = require('expo-asset');
13
- var base64Js = require('base64-js');
14
- var buffer = require('buffer');
15
- require('zustand/traditional');
16
- require('suspend-react');
17
- require('scheduler');
18
-
19
- function _interopNamespace(e) {
20
- if (e && e.__esModule) return e;
21
- var n = Object.create(null);
22
- if (e) {
23
- Object.keys(e).forEach(function (k) {
24
- if (k !== 'default') {
25
- var d = Object.getOwnPropertyDescriptor(e, k);
26
- Object.defineProperty(n, k, d.get ? d : {
27
- enumerable: true,
28
- get: function () { return e[k]; }
29
- });
30
- }
31
- });
32
- }
33
- n["default"] = e;
34
- return Object.freeze(n);
35
- }
36
-
37
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
38
- var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
39
-
40
- // TODO: React 19 needs support from react-native
41
- const _View = reactNative.View;
42
- function CanvasImpl({
43
- children,
44
- style,
45
- gl,
46
- events: events$1 = events.createPointerEvents,
47
- shadows,
48
- linear,
49
- flat,
50
- legacy,
51
- orthographic,
52
- frameloop,
53
- performance,
54
- raycaster,
55
- camera,
56
- scene,
57
- onPointerMissed,
58
- onCreated,
59
- ref,
60
- pointerEvents,
61
- ...props
62
- }) {
63
- // Create a known catalogue of Threejs-native elements
64
- // This will include the entire THREE namespace by default, users can extend
65
- // their own elements by using the createRoot API instead
66
- React__namespace.useMemo(() => events.extend(THREE__namespace), []);
67
- const Bridge = events.useBridge();
68
- const [{
69
- width,
70
- height,
71
- top,
72
- left
73
- }, setSize] = React__namespace.useState({
74
- width: 0,
75
- height: 0,
76
- top: 0,
77
- left: 0
78
- });
79
- const [canvas, setCanvas] = React__namespace.useState(null);
80
- const [bind, setBind] = React__namespace.useState();
81
- React__namespace.useImperativeHandle(ref, () => viewRef.current);
82
- const handlePointerMissed = events.useMutableCallback(onPointerMissed);
83
- const [block, setBlock] = React__namespace.useState(false);
84
- const [error, setError] = React__namespace.useState(undefined);
85
-
86
- // Suspend this component if block is a promise (2nd run)
87
- if (block) throw block;
88
- // Throw exception outwards if anything within canvas throws
89
- if (error) throw error;
90
- const viewRef = React__namespace.useRef(null);
91
- const root = React__namespace.useRef(null);
92
- const [antialias, setAntialias] = React__namespace.useState(true);
93
- const onLayout = React__namespace.useCallback(e => {
94
- const {
95
- width,
96
- height,
97
- x,
98
- y
99
- } = e.nativeEvent.layout;
100
- setSize({
101
- width,
102
- height,
103
- top: y,
104
- left: x
105
- });
106
- }, []);
107
-
108
- // Called on context create or swap
109
- // https://github.com/pmndrs/react-three-fiber/pull/2297
110
- const onContextCreate = React__namespace.useCallback(context => {
111
- const listeners = new Map();
112
- const canvas = {
113
- style: {},
114
- width: context.drawingBufferWidth,
115
- height: context.drawingBufferHeight,
116
- clientWidth: context.drawingBufferWidth,
117
- clientHeight: context.drawingBufferHeight,
118
- getContext: (_, {
119
- antialias = false
120
- }) => {
121
- setAntialias(antialias);
122
- return context;
123
- },
124
- addEventListener(type, listener) {
125
- let callbacks = listeners.get(type);
126
- if (!callbacks) {
127
- callbacks = [];
128
- listeners.set(type, callbacks);
129
- }
130
- callbacks.push(listener);
131
- },
132
- removeEventListener(type, listener) {
133
- const callbacks = listeners.get(type);
134
- if (callbacks) {
135
- const index = callbacks.indexOf(listener);
136
- if (index !== -1) callbacks.splice(index, 1);
137
- }
138
- },
139
- dispatchEvent(event) {
140
- Object.assign(event, {
141
- target: this
142
- });
143
- const callbacks = listeners.get(event.type);
144
- if (callbacks) {
145
- for (const callback of callbacks) {
146
- callback(event);
147
- }
148
- }
149
- },
150
- setPointerCapture() {
151
- // TODO
152
- },
153
- releasePointerCapture() {
154
- // TODO
155
- }
156
- };
157
-
158
- // TODO: this is wrong but necessary to trick controls
159
- // @ts-ignore
160
- canvas.ownerDocument = canvas;
161
- canvas.getRootNode = () => canvas;
162
- root.current = events.createRoot(canvas);
163
- setCanvas(canvas);
164
- function handleTouch(gestureEvent, type) {
165
- gestureEvent.persist();
166
- canvas.dispatchEvent(Object.assign(gestureEvent.nativeEvent, {
167
- type,
168
- offsetX: gestureEvent.nativeEvent.locationX,
169
- offsetY: gestureEvent.nativeEvent.locationY,
170
- pointerType: 'touch',
171
- pointerId: gestureEvent.nativeEvent.identifier
172
- }));
173
- return true;
174
- }
175
- const responder = reactNative.PanResponder.create({
176
- onStartShouldSetPanResponder: () => true,
177
- onMoveShouldSetPanResponder: () => true,
178
- onMoveShouldSetPanResponderCapture: () => true,
179
- onPanResponderTerminationRequest: () => true,
180
- onStartShouldSetPanResponderCapture: e => handleTouch(e, 'pointercapture'),
181
- onPanResponderStart: e => handleTouch(e, 'pointerdown'),
182
- onPanResponderMove: e => handleTouch(e, 'pointermove'),
183
- onPanResponderEnd: (e, state) => {
184
- handleTouch(e, 'pointerup');
185
- if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'click');
186
- },
187
- onPanResponderRelease: e => handleTouch(e, 'pointerleave'),
188
- onPanResponderTerminate: e => handleTouch(e, 'lostpointercapture'),
189
- onPanResponderReject: e => handleTouch(e, 'lostpointercapture')
190
- });
191
- setBind(responder.panHandlers);
192
- }, []);
193
- events.useIsomorphicLayoutEffect(() => {
194
- if (root.current && width > 0 && height > 0) {
195
- async function run() {
196
- await root.current.configure({
197
- gl,
198
- events: events$1,
199
- shadows,
200
- linear,
201
- flat,
202
- legacy,
203
- orthographic,
204
- frameloop,
205
- performance,
206
- raycaster,
207
- camera,
208
- scene,
209
- // expo-gl can only render at native dpr/resolution
210
- // https://github.com/expo/expo-three/issues/39
211
- dpr: reactNative.PixelRatio.get(),
212
- size: {
213
- width,
214
- height,
215
- top,
216
- left
217
- },
218
- // Pass mutable reference to onPointerMissed so it's free to update
219
- onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
220
- // Overwrite onCreated to apply RN bindings
221
- onCreated: state => {
222
- // Bind render to RN bridge
223
- const context = state.gl.getContext();
224
- const renderFrame = state.gl.render.bind(state.gl);
225
- state.gl.render = (scene, camera) => {
226
- renderFrame(scene, camera);
227
- context.endFrameEXP();
228
- };
229
- return onCreated == null ? void 0 : onCreated(state);
230
- }
231
- });
232
- root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
233
- children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
234
- set: setError,
235
- children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
236
- fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
237
- set: setBlock
238
- }),
239
- children: children != null ? children : null
240
- })
241
- })
242
- }));
243
- }
244
- run();
245
- }
246
- });
247
- React__namespace.useEffect(() => {
248
- if (canvas) {
249
- return () => events.unmountComponentAtNode(canvas);
250
- }
251
- }, [canvas]);
252
- return /*#__PURE__*/jsxRuntime.jsxs(_View, {
253
- ...props,
254
- ref: viewRef,
255
- onLayout: onLayout,
256
- style: {
257
- flex: 1,
258
- ...style
259
- },
260
- children: [width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
261
- msaaSamples: antialias ? 4 : 0,
262
- onContextCreate: onContextCreate,
263
- style: reactNative.StyleSheet.absoluteFill
264
- }), /*#__PURE__*/jsxRuntime.jsx(_View, {
265
- style: reactNative.StyleSheet.absoluteFill,
266
- pointerEvents: pointerEvents,
267
- ...bind
268
- })]
269
- });
270
- }
271
-
272
- /**
273
- * A native canvas which accepts threejs elements as children.
274
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
275
- */
276
- function Canvas(props) {
277
- return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
278
- children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
279
- ...props
280
- })
281
- });
282
- }
283
-
284
- /** Default R3F event manager for react-native */
285
- function createTouchEvents(store) {
286
- const {
287
- handlePointer
288
- } = events.createEvents(store);
289
- const handleTouch = (event, name) => {
290
- event.persist()
291
-
292
- // Apply offset
293
- ;
294
- event.nativeEvent.offsetX = event.nativeEvent.locationX;
295
- event.nativeEvent.offsetY = event.nativeEvent.locationY;
296
-
297
- // Emulate DOM event
298
- const callback = handlePointer(name);
299
- callback(event.nativeEvent);
300
- return true;
301
- };
302
- const responder = reactNative.PanResponder.create({
303
- onStartShouldSetPanResponder: () => true,
304
- onMoveShouldSetPanResponder: () => true,
305
- onMoveShouldSetPanResponderCapture: () => true,
306
- onPanResponderTerminationRequest: () => true,
307
- onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
308
- onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
309
- onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
310
- onPanResponderEnd: (e, state) => {
311
- handleTouch(e, 'onPointerUp');
312
- if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
313
- },
314
- onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
315
- onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
316
- onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
317
- });
318
- return {
319
- priority: 1,
320
- enabled: true,
321
- compute(event, state, previous) {
322
- // https://github.com/pmndrs/react-three-fiber/pull/782
323
- // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
324
- state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
325
- state.raycaster.setFromCamera(state.pointer, state.camera);
326
- },
327
- connected: undefined,
328
- handlers: responder.panHandlers,
329
- update: () => {
330
- var _internal$lastEvent;
331
- const {
332
- events,
333
- internal
334
- } = store.getState();
335
- if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
336
- handlePointer('onPointerMove')(internal.lastEvent.current);
337
- }
338
- },
339
- connect: () => {
340
- const {
341
- set,
342
- events
343
- } = store.getState();
344
- events.disconnect == null ? void 0 : events.disconnect();
345
- set(state => ({
346
- events: {
347
- ...state.events,
348
- connected: true
349
- }
350
- }));
351
- },
352
- disconnect: () => {
353
- const {
354
- set
355
- } = store.getState();
356
- set(state => ({
357
- events: {
358
- ...state.events,
359
- connected: false
360
- }
361
- }));
362
- }
363
- };
364
- }
365
-
366
- // Conditionally import expo-file-system/legacy to support Expo 54
367
- const getFileSystem = () => {
368
- try {
369
- return require('expo-file-system/legacy');
370
- } catch {
371
- return require('expo-file-system');
372
- }
373
- };
374
- const fs = getFileSystem();
375
-
376
- // http://stackoverflow.com/questions/105034
377
- function uuidv4() {
378
- return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
379
- const r = Math.random() * 16 | 0,
380
- v = c == 'x' ? r : r & 0x3 | 0x8;
381
- return v.toString(16);
382
- });
383
- }
384
- async function getAsset(input) {
385
- if (typeof input === 'string') {
386
- var _NativeModules$BlobMo;
387
- // Don't process storage
388
- if (input.startsWith('file:')) return input;
389
-
390
- // Unpack Blobs from react-native BlobManager
391
- // https://github.com/facebook/react-native/issues/22681#issuecomment-523258955
392
- if (input.startsWith('blob:') || input.startsWith((_NativeModules$BlobMo = reactNative.NativeModules.BlobModule) == null ? void 0 : _NativeModules$BlobMo.BLOB_URI_SCHEME)) {
393
- const blob = await new Promise((res, rej) => {
394
- const xhr = new XMLHttpRequest();
395
- xhr.open('GET', input);
396
- xhr.responseType = 'blob';
397
- xhr.onload = () => res(xhr.response);
398
- xhr.onerror = rej;
399
- xhr.send();
400
- });
401
- const data = await new Promise((res, rej) => {
402
- const reader = new FileReader();
403
- reader.onload = () => res(reader.result);
404
- reader.onerror = rej;
405
- reader.readAsText(blob);
406
- });
407
- input = `data:${blob.type};base64,${data}`;
408
- }
409
-
410
- // Create safe URI for JSI serialization
411
- if (input.startsWith('data:')) {
412
- const [header, data] = input.split(';base64,');
413
- const [, type] = header.split('/');
414
- const uri = fs.cacheDirectory + uuidv4() + `.${type}`;
415
- await fs.writeAsStringAsync(uri, data, {
416
- encoding: fs.EncodingType.Base64
417
- });
418
- return uri;
419
- }
420
- }
421
-
422
- // Download bundler module or external URL
423
- const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
424
- let uri = asset.localUri || asset.uri;
425
-
426
- // Unpack assets in Android Release Mode
427
- if (!uri.includes(':')) {
428
- const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
429
- await fs.copyAsync({
430
- from: uri,
431
- to: file
432
- });
433
- uri = file;
434
- }
435
- return uri;
436
- }
437
- function polyfills() {
438
- // Patch Blob for ArrayBuffer and URL if unsupported
439
- // https://github.com/facebook/react-native/pull/39276
440
- // https://github.com/pmndrs/react-three-fiber/issues/3058
441
- if (reactNative.Platform.OS !== 'web') {
442
- try {
443
- const blob = new Blob([new ArrayBuffer(4)]);
444
- const url = URL.createObjectURL(blob);
445
- URL.revokeObjectURL(url);
446
- } catch (_) {
447
- var _BlobManagerModule$de;
448
- const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
449
- const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
450
- const createObjectURL = URL.createObjectURL;
451
- URL.createObjectURL = function (blob) {
452
- if (blob.data._base64) {
453
- return `data:${blob.type};base64,${blob.data._base64}`;
454
- }
455
- return createObjectURL(blob);
456
- };
457
- const createFromParts = BlobManager.createFromParts;
458
- BlobManager.createFromParts = function (parts, options) {
459
- parts = parts.map(part => {
460
- if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
461
- part = base64Js.fromByteArray(new Uint8Array(part));
462
- }
463
- return part;
464
- });
465
- const blob = createFromParts(parts, options);
466
-
467
- // Always enable slow but safe path for iOS (previously for Android unauth)
468
- // https://github.com/pmndrs/react-three-fiber/issues/3075
469
- // if (!NativeModules.BlobModule?.BLOB_URI_SCHEME) {
470
- blob.data._base64 = '';
471
- for (const part of parts) {
472
- var _data$_base, _data;
473
- blob.data._base64 += (_data$_base = (_data = part.data) == null ? void 0 : _data._base64) != null ? _data$_base : part;
474
- }
475
- // }
476
-
477
- return blob;
478
- };
479
- }
480
- }
481
-
482
- // Don't pre-process urls, let expo-asset generate an absolute URL
483
- const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
484
- THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './';
485
-
486
- // There's no Image in native, so create a data texture instead
487
- THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
488
- if (this.path && typeof url === 'string') url = this.path + url;
489
- const texture = new THREE__namespace.Texture();
490
- getAsset(url).then(async uri => {
491
- // https://github.com/expo/expo-three/pull/266
492
- const {
493
- width,
494
- height
495
- } = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
496
- width,
497
- height
498
- }), rej));
499
- texture.image = {
500
- // Special case for EXGLImageUtils::loadImage
501
- data: {
502
- localUri: uri
503
- },
504
- width,
505
- height
506
- };
507
- texture.flipY = true; // Since expo-gl@12.4.0
508
- texture.needsUpdate = true;
509
-
510
- // Force non-DOM upload for EXGL texImage2D
511
- // @ts-expect-error
512
- texture.isDataTexture = true;
513
- onLoad == null ? void 0 : onLoad(texture);
514
- }).catch(onError);
515
- return texture;
516
- };
517
-
518
- // Fetches assets via FS
519
- THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
520
- if (this.path && typeof url === 'string') url = this.path + url;
521
- this.manager.itemStart(url);
522
- getAsset(url).then(async uri => {
523
- const base64 = await fs.readAsStringAsync(uri, {
524
- encoding: fs.EncodingType.Base64
525
- });
526
- const data = buffer.Buffer.from(base64, 'base64');
527
- onLoad == null ? void 0 : onLoad(data.buffer);
528
- }).catch(error => {
529
- onError == null ? void 0 : onError(error);
530
- this.manager.itemError(url);
531
- }).finally(() => {
532
- this.manager.itemEnd(url);
533
- });
534
- };
535
- }
536
-
537
- if (reactNative.Platform.OS !== 'web') polyfills();
538
-
539
- exports.ReactThreeFiber = events.threeTypes;
540
- exports._roots = events._roots;
541
- exports.act = events.act;
542
- exports.addAfterEffect = events.addAfterEffect;
543
- exports.addEffect = events.addEffect;
544
- exports.addTail = events.addTail;
545
- exports.advance = events.advance;
546
- exports.applyProps = events.applyProps;
547
- exports.buildGraph = events.buildGraph;
548
- exports.context = events.context;
549
- exports.createEvents = events.createEvents;
550
- exports.createPortal = events.createPortal;
551
- exports.createRoot = events.createRoot;
552
- exports.dispose = events.dispose;
553
- exports.extend = events.extend;
554
- exports.flushGlobalEffects = events.flushGlobalEffects;
555
- exports.flushSync = events.flushSync;
556
- exports.getRootState = events.getRootState;
557
- exports.invalidate = events.invalidate;
558
- exports.reconciler = events.reconciler;
559
- exports.unmountComponentAtNode = events.unmountComponentAtNode;
560
- exports.useFrame = events.useFrame;
561
- exports.useGraph = events.useGraph;
562
- exports.useInstanceHandle = events.useInstanceHandle;
563
- exports.useLoader = events.useLoader;
564
- exports.useStore = events.useStore;
565
- exports.useThree = events.useThree;
566
- exports.Canvas = Canvas;
567
- exports.events = createTouchEvents;