@react-three/fiber 7.0.28 → 7.0.29
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 -32
- 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 -118
- package/dist/declarations/src/index.d.ts +8 -8
- package/dist/declarations/src/three-types.d.ts +329 -329
- 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/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 +1 -2
- package/native/dist/react-three-fiber-native.cjs.dev.js +0 -369
- package/native/dist/react-three-fiber-native.cjs.prod.js +0 -369
- package/native/dist/react-three-fiber-native.esm.js +0 -317
|
@@ -1,369 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var THREE = require('three');
|
|
6
|
-
var expoAsset = require('expo-asset');
|
|
7
|
-
var index = require('../../dist/index-46325a70.cjs.prod.js');
|
|
8
|
-
var _extends = require('@babel/runtime/helpers/extends');
|
|
9
|
-
var React = require('react');
|
|
10
|
-
var mergeRefs = require('react-merge-refs');
|
|
11
|
-
var reactNative = require('react-native');
|
|
12
|
-
var expoGl = require('expo-gl');
|
|
13
|
-
var Pressability = require('react-native/Libraries/Pressability/Pressability');
|
|
14
|
-
require('react-reconciler/constants');
|
|
15
|
-
require('zustand');
|
|
16
|
-
require('react-reconciler');
|
|
17
|
-
require('scheduler');
|
|
18
|
-
require('suspend-react');
|
|
19
|
-
|
|
20
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
21
|
-
|
|
22
|
-
function _interopNamespace(e) {
|
|
23
|
-
if (e && e.__esModule) return e;
|
|
24
|
-
var n = Object.create(null);
|
|
25
|
-
if (e) {
|
|
26
|
-
Object.keys(e).forEach(function (k) {
|
|
27
|
-
if (k !== 'default') {
|
|
28
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
29
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
30
|
-
enumerable: true,
|
|
31
|
-
get: function () { return e[k]; }
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
n["default"] = e;
|
|
37
|
-
return Object.freeze(n);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
|
|
41
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
42
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
|
|
43
|
-
var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
|
|
44
|
-
|
|
45
|
-
const EVENTS = {
|
|
46
|
-
PRESS: 'onPress',
|
|
47
|
-
PRESSIN: 'onPressIn',
|
|
48
|
-
PRESSOUT: 'onPressOut',
|
|
49
|
-
LONGPRESS: 'onLongPress',
|
|
50
|
-
HOVERIN: 'onHoverIn',
|
|
51
|
-
HOVEROUT: 'onHoverOut',
|
|
52
|
-
PRESSMOVE: 'onPressMove'
|
|
53
|
-
};
|
|
54
|
-
const DOM_EVENTS = {
|
|
55
|
-
[EVENTS.PRESS]: 'onClick',
|
|
56
|
-
[EVENTS.PRESSIN]: 'onPointerDown',
|
|
57
|
-
[EVENTS.PRESSOUT]: 'onPointerUp',
|
|
58
|
-
[EVENTS.LONGPRESS]: 'onDoubleClick',
|
|
59
|
-
[EVENTS.HOVERIN]: 'onPointerOver',
|
|
60
|
-
[EVENTS.HOVEROUT]: 'onPointerOut',
|
|
61
|
-
[EVENTS.PRESSMOVE]: 'onPointerMove'
|
|
62
|
-
};
|
|
63
|
-
/** Default R3F event manager for react-native */
|
|
64
|
-
|
|
65
|
-
function createTouchEvents(store) {
|
|
66
|
-
const {
|
|
67
|
-
handlePointer
|
|
68
|
-
} = index.createEvents(store);
|
|
69
|
-
|
|
70
|
-
const handleTouch = (event, name) => {
|
|
71
|
-
event.persist() // Apply offset
|
|
72
|
-
;
|
|
73
|
-
event.nativeEvent.offsetX = event.nativeEvent.locationX;
|
|
74
|
-
event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
|
|
75
|
-
|
|
76
|
-
const callback = handlePointer(DOM_EVENTS[name]);
|
|
77
|
-
return callback(event.nativeEvent);
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
return {
|
|
81
|
-
priority: 1,
|
|
82
|
-
enabled: true,
|
|
83
|
-
|
|
84
|
-
compute(event, state, previous) {
|
|
85
|
-
// https://github.com/pmndrs/react-three-fiber/pull/782
|
|
86
|
-
// Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
|
|
87
|
-
state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
|
|
88
|
-
state.raycaster.setFromCamera(state.pointer, state.camera);
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
connected: undefined,
|
|
92
|
-
handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
|
|
93
|
-
[name]: event => handleTouch(event, name)
|
|
94
|
-
}), {}),
|
|
95
|
-
connect: () => {
|
|
96
|
-
const {
|
|
97
|
-
set,
|
|
98
|
-
events
|
|
99
|
-
} = store.getState();
|
|
100
|
-
events.disconnect == null ? void 0 : events.disconnect();
|
|
101
|
-
const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
|
|
102
|
-
set(state => ({
|
|
103
|
-
events: { ...state.events,
|
|
104
|
-
connected
|
|
105
|
-
}
|
|
106
|
-
}));
|
|
107
|
-
const handlers = connected.getEventHandlers();
|
|
108
|
-
return handlers;
|
|
109
|
-
},
|
|
110
|
-
disconnect: () => {
|
|
111
|
-
const {
|
|
112
|
-
set,
|
|
113
|
-
events
|
|
114
|
-
} = store.getState();
|
|
115
|
-
|
|
116
|
-
if (events.connected) {
|
|
117
|
-
events.connected.reset();
|
|
118
|
-
set(state => ({
|
|
119
|
-
events: { ...state.events,
|
|
120
|
-
connected: undefined
|
|
121
|
-
}
|
|
122
|
-
}));
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* A native canvas which accepts threejs elements as children.
|
|
130
|
-
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
|
131
|
-
*/
|
|
132
|
-
const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
|
|
133
|
-
children,
|
|
134
|
-
style,
|
|
135
|
-
gl,
|
|
136
|
-
events = createTouchEvents,
|
|
137
|
-
shadows,
|
|
138
|
-
linear,
|
|
139
|
-
flat,
|
|
140
|
-
legacy,
|
|
141
|
-
orthographic,
|
|
142
|
-
frameloop,
|
|
143
|
-
performance,
|
|
144
|
-
raycaster,
|
|
145
|
-
camera,
|
|
146
|
-
onPointerMissed,
|
|
147
|
-
onCreated,
|
|
148
|
-
...props
|
|
149
|
-
}, forwardedRef) => {
|
|
150
|
-
// Create a known catalogue of Threejs-native elements
|
|
151
|
-
// This will include the entire THREE namespace by default, users can extend
|
|
152
|
-
// their own elements by using the createRoot API instead
|
|
153
|
-
React__namespace.useMemo(() => index.extend(THREE__namespace), []);
|
|
154
|
-
const [{
|
|
155
|
-
width,
|
|
156
|
-
height
|
|
157
|
-
}, setSize] = React__namespace.useState({
|
|
158
|
-
width: 0,
|
|
159
|
-
height: 0
|
|
160
|
-
});
|
|
161
|
-
const [canvas, setCanvas] = React__namespace.useState(null);
|
|
162
|
-
const [bind, setBind] = React__namespace.useState();
|
|
163
|
-
const handlePointerMissed = index.useMutableCallback(onPointerMissed);
|
|
164
|
-
const [block, setBlock] = React__namespace.useState(false);
|
|
165
|
-
const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
|
|
166
|
-
|
|
167
|
-
if (block) throw block; // Throw exception outwards if anything within canvas throws
|
|
168
|
-
|
|
169
|
-
if (error) throw error;
|
|
170
|
-
const viewRef = React__namespace.useRef(null);
|
|
171
|
-
const root = React__namespace.useRef(null);
|
|
172
|
-
const onLayout = React__namespace.useCallback(e => {
|
|
173
|
-
const {
|
|
174
|
-
width,
|
|
175
|
-
height
|
|
176
|
-
} = e.nativeEvent.layout;
|
|
177
|
-
setSize({
|
|
178
|
-
width,
|
|
179
|
-
height
|
|
180
|
-
});
|
|
181
|
-
}, []);
|
|
182
|
-
const onContextCreate = React__namespace.useCallback(context => {
|
|
183
|
-
const canvasShim = {
|
|
184
|
-
width: context.drawingBufferWidth,
|
|
185
|
-
height: context.drawingBufferHeight,
|
|
186
|
-
style: {},
|
|
187
|
-
addEventListener: () => {},
|
|
188
|
-
removeEventListener: () => {},
|
|
189
|
-
clientHeight: context.drawingBufferHeight,
|
|
190
|
-
getContext: () => context
|
|
191
|
-
};
|
|
192
|
-
setCanvas(canvasShim);
|
|
193
|
-
}, []);
|
|
194
|
-
|
|
195
|
-
if (width > 0 && height > 0 && canvas) {
|
|
196
|
-
if (!root.current) root.current = index.createRoot(canvas);
|
|
197
|
-
root.current.configure({
|
|
198
|
-
gl,
|
|
199
|
-
events,
|
|
200
|
-
shadows,
|
|
201
|
-
linear,
|
|
202
|
-
flat,
|
|
203
|
-
legacy,
|
|
204
|
-
orthographic,
|
|
205
|
-
frameloop,
|
|
206
|
-
performance,
|
|
207
|
-
raycaster,
|
|
208
|
-
camera,
|
|
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
|
-
},
|
|
216
|
-
// Pass mutable reference to onPointerMissed so it's free to update
|
|
217
|
-
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
|
218
|
-
// Overwrite onCreated to apply RN bindings
|
|
219
|
-
onCreated: state => {
|
|
220
|
-
// Bind events after creation
|
|
221
|
-
const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
|
|
222
|
-
setBind(handlers); // Bind render to RN bridge
|
|
223
|
-
|
|
224
|
-
const context = state.gl.getContext();
|
|
225
|
-
const renderFrame = state.gl.render.bind(state.gl);
|
|
226
|
-
|
|
227
|
-
state.gl.render = (scene, camera) => {
|
|
228
|
-
renderFrame(scene, camera);
|
|
229
|
-
context.endFrameEXP();
|
|
230
|
-
};
|
|
231
|
-
|
|
232
|
-
return onCreated == null ? void 0 : onCreated(state);
|
|
233
|
-
}
|
|
234
|
-
});
|
|
235
|
-
root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
|
|
236
|
-
set: setError
|
|
237
|
-
}, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
|
|
238
|
-
fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
|
|
239
|
-
set: setBlock
|
|
240
|
-
})
|
|
241
|
-
}, children)));
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
React__namespace.useEffect(() => {
|
|
245
|
-
if (canvas) {
|
|
246
|
-
return () => index.unmountComponentAtNode(canvas);
|
|
247
|
-
}
|
|
248
|
-
}, [canvas]);
|
|
249
|
-
return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
|
|
250
|
-
ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
|
|
251
|
-
onLayout: onLayout,
|
|
252
|
-
style: {
|
|
253
|
-
flex: 1,
|
|
254
|
-
...style
|
|
255
|
-
}
|
|
256
|
-
}, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
|
|
257
|
-
onContextCreate: onContextCreate,
|
|
258
|
-
style: reactNative.StyleSheet.absoluteFill
|
|
259
|
-
}));
|
|
260
|
-
});
|
|
261
|
-
|
|
262
|
-
/**
|
|
263
|
-
* Generates an asset based on input type.
|
|
264
|
-
*/
|
|
265
|
-
|
|
266
|
-
const getAsset = input => {
|
|
267
|
-
if (input instanceof expoAsset.Asset) return input;
|
|
268
|
-
|
|
269
|
-
switch (typeof input) {
|
|
270
|
-
case 'string':
|
|
271
|
-
return expoAsset.Asset.fromURI(input);
|
|
272
|
-
|
|
273
|
-
case 'number':
|
|
274
|
-
return expoAsset.Asset.fromModule(input);
|
|
275
|
-
|
|
276
|
-
default:
|
|
277
|
-
throw 'Invalid asset! Must be a URI or module.';
|
|
278
|
-
}
|
|
279
|
-
}; // Don't pre-process urls, let expo-asset generate an absolute URL
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
|
|
283
|
-
|
|
284
|
-
THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
|
288
|
-
const texture = new THREE__namespace.Texture(); // @ts-ignore
|
|
289
|
-
|
|
290
|
-
texture.isDataTexture = true;
|
|
291
|
-
getAsset(url).downloadAsync().then(asset => {
|
|
292
|
-
texture.image = {
|
|
293
|
-
data: asset,
|
|
294
|
-
width: asset.width,
|
|
295
|
-
height: asset.height
|
|
296
|
-
};
|
|
297
|
-
texture.needsUpdate = true;
|
|
298
|
-
onLoad == null ? void 0 : onLoad(texture);
|
|
299
|
-
}).catch(onError);
|
|
300
|
-
return texture;
|
|
301
|
-
}; // Fetches assets via XMLHttpRequest
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
THREE__namespace.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
|
|
305
|
-
if (this.path) url = this.path + url;
|
|
306
|
-
const request = new XMLHttpRequest();
|
|
307
|
-
getAsset(url).downloadAsync().then(asset => {
|
|
308
|
-
request.open('GET', asset.uri, true);
|
|
309
|
-
request.addEventListener('load', event => {
|
|
310
|
-
if (request.status === 200) {
|
|
311
|
-
onLoad == null ? void 0 : onLoad(request.response);
|
|
312
|
-
this.manager.itemEnd(url);
|
|
313
|
-
} else {
|
|
314
|
-
onError == null ? void 0 : onError(event);
|
|
315
|
-
this.manager.itemError(url);
|
|
316
|
-
this.manager.itemEnd(url);
|
|
317
|
-
}
|
|
318
|
-
}, false);
|
|
319
|
-
request.addEventListener('progress', event => {
|
|
320
|
-
onProgress == null ? void 0 : onProgress(event);
|
|
321
|
-
}, false);
|
|
322
|
-
request.addEventListener('error', event => {
|
|
323
|
-
onError == null ? void 0 : onError(event);
|
|
324
|
-
this.manager.itemError(url);
|
|
325
|
-
this.manager.itemEnd(url);
|
|
326
|
-
}, false);
|
|
327
|
-
request.addEventListener('abort', event => {
|
|
328
|
-
onError == null ? void 0 : onError(event);
|
|
329
|
-
this.manager.itemError(url);
|
|
330
|
-
this.manager.itemEnd(url);
|
|
331
|
-
}, false);
|
|
332
|
-
if (this.responseType) request.responseType = this.responseType;
|
|
333
|
-
if (this.withCredentials) request.withCredentials = this.withCredentials;
|
|
334
|
-
|
|
335
|
-
for (const header in this.requestHeader) {
|
|
336
|
-
request.setRequestHeader(header, this.requestHeader[header]);
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
request.send(null);
|
|
340
|
-
this.manager.itemStart(url);
|
|
341
|
-
});
|
|
342
|
-
return request;
|
|
343
|
-
};
|
|
344
|
-
|
|
345
|
-
exports.ReactThreeFiber = index.threeTypes;
|
|
346
|
-
exports._roots = index.roots;
|
|
347
|
-
exports.act = index.act;
|
|
348
|
-
exports.addAfterEffect = index.addAfterEffect;
|
|
349
|
-
exports.addEffect = index.addEffect;
|
|
350
|
-
exports.addTail = index.addTail;
|
|
351
|
-
exports.advance = index.advance;
|
|
352
|
-
exports.applyProps = index.applyProps;
|
|
353
|
-
exports.context = index.context;
|
|
354
|
-
exports.createPortal = index.createPortal;
|
|
355
|
-
exports.createRoot = index.createRoot;
|
|
356
|
-
exports.dispose = index.dispose;
|
|
357
|
-
exports.extend = index.extend;
|
|
358
|
-
exports.getRootState = index.getRootState;
|
|
359
|
-
exports.invalidate = index.invalidate;
|
|
360
|
-
exports.reconciler = index.reconciler;
|
|
361
|
-
exports.render = index.render;
|
|
362
|
-
exports.unmountComponentAtNode = index.unmountComponentAtNode;
|
|
363
|
-
exports.useFrame = index.useFrame;
|
|
364
|
-
exports.useGraph = index.useGraph;
|
|
365
|
-
exports.useLoader = index.useLoader;
|
|
366
|
-
exports.useStore = index.useStore;
|
|
367
|
-
exports.useThree = index.useThree;
|
|
368
|
-
exports.Canvas = Canvas;
|
|
369
|
-
exports.events = createTouchEvents;
|
|
@@ -1,317 +0,0 @@
|
|
|
1
|
-
import * as THREE from 'three';
|
|
2
|
-
import { Asset } from 'expo-asset';
|
|
3
|
-
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-ec95272c.esm.js';
|
|
4
|
-
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-ec95272c.esm.js';
|
|
5
|
-
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
6
|
-
import * as React from 'react';
|
|
7
|
-
import mergeRefs from 'react-merge-refs';
|
|
8
|
-
import { PixelRatio, View, StyleSheet } from 'react-native';
|
|
9
|
-
import { GLView } from 'expo-gl';
|
|
10
|
-
import Pressability from 'react-native/Libraries/Pressability/Pressability';
|
|
11
|
-
import 'react-reconciler/constants';
|
|
12
|
-
import 'zustand';
|
|
13
|
-
import 'react-reconciler';
|
|
14
|
-
import 'scheduler';
|
|
15
|
-
import 'suspend-react';
|
|
16
|
-
|
|
17
|
-
const EVENTS = {
|
|
18
|
-
PRESS: 'onPress',
|
|
19
|
-
PRESSIN: 'onPressIn',
|
|
20
|
-
PRESSOUT: 'onPressOut',
|
|
21
|
-
LONGPRESS: 'onLongPress',
|
|
22
|
-
HOVERIN: 'onHoverIn',
|
|
23
|
-
HOVEROUT: 'onHoverOut',
|
|
24
|
-
PRESSMOVE: 'onPressMove'
|
|
25
|
-
};
|
|
26
|
-
const DOM_EVENTS = {
|
|
27
|
-
[EVENTS.PRESS]: 'onClick',
|
|
28
|
-
[EVENTS.PRESSIN]: 'onPointerDown',
|
|
29
|
-
[EVENTS.PRESSOUT]: 'onPointerUp',
|
|
30
|
-
[EVENTS.LONGPRESS]: 'onDoubleClick',
|
|
31
|
-
[EVENTS.HOVERIN]: 'onPointerOver',
|
|
32
|
-
[EVENTS.HOVEROUT]: 'onPointerOut',
|
|
33
|
-
[EVENTS.PRESSMOVE]: 'onPointerMove'
|
|
34
|
-
};
|
|
35
|
-
/** Default R3F event manager for react-native */
|
|
36
|
-
|
|
37
|
-
function createTouchEvents(store) {
|
|
38
|
-
const {
|
|
39
|
-
handlePointer
|
|
40
|
-
} = createEvents(store);
|
|
41
|
-
|
|
42
|
-
const handleTouch = (event, name) => {
|
|
43
|
-
event.persist() // Apply offset
|
|
44
|
-
;
|
|
45
|
-
event.nativeEvent.offsetX = event.nativeEvent.locationX;
|
|
46
|
-
event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
|
|
47
|
-
|
|
48
|
-
const callback = handlePointer(DOM_EVENTS[name]);
|
|
49
|
-
return callback(event.nativeEvent);
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
return {
|
|
53
|
-
priority: 1,
|
|
54
|
-
enabled: true,
|
|
55
|
-
|
|
56
|
-
compute(event, state, previous) {
|
|
57
|
-
// https://github.com/pmndrs/react-three-fiber/pull/782
|
|
58
|
-
// Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
|
|
59
|
-
state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
|
|
60
|
-
state.raycaster.setFromCamera(state.pointer, state.camera);
|
|
61
|
-
},
|
|
62
|
-
|
|
63
|
-
connected: undefined,
|
|
64
|
-
handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
|
|
65
|
-
[name]: event => handleTouch(event, name)
|
|
66
|
-
}), {}),
|
|
67
|
-
connect: () => {
|
|
68
|
-
const {
|
|
69
|
-
set,
|
|
70
|
-
events
|
|
71
|
-
} = store.getState();
|
|
72
|
-
events.disconnect == null ? void 0 : events.disconnect();
|
|
73
|
-
const connected = new Pressability(events == null ? void 0 : events.handlers);
|
|
74
|
-
set(state => ({
|
|
75
|
-
events: { ...state.events,
|
|
76
|
-
connected
|
|
77
|
-
}
|
|
78
|
-
}));
|
|
79
|
-
const handlers = connected.getEventHandlers();
|
|
80
|
-
return handlers;
|
|
81
|
-
},
|
|
82
|
-
disconnect: () => {
|
|
83
|
-
const {
|
|
84
|
-
set,
|
|
85
|
-
events
|
|
86
|
-
} = store.getState();
|
|
87
|
-
|
|
88
|
-
if (events.connected) {
|
|
89
|
-
events.connected.reset();
|
|
90
|
-
set(state => ({
|
|
91
|
-
events: { ...state.events,
|
|
92
|
-
connected: undefined
|
|
93
|
-
}
|
|
94
|
-
}));
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* A native canvas which accepts threejs elements as children.
|
|
102
|
-
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
|
103
|
-
*/
|
|
104
|
-
const Canvas = /*#__PURE__*/React.forwardRef(({
|
|
105
|
-
children,
|
|
106
|
-
style,
|
|
107
|
-
gl,
|
|
108
|
-
events = createTouchEvents,
|
|
109
|
-
shadows,
|
|
110
|
-
linear,
|
|
111
|
-
flat,
|
|
112
|
-
legacy,
|
|
113
|
-
orthographic,
|
|
114
|
-
frameloop,
|
|
115
|
-
performance,
|
|
116
|
-
raycaster,
|
|
117
|
-
camera,
|
|
118
|
-
onPointerMissed,
|
|
119
|
-
onCreated,
|
|
120
|
-
...props
|
|
121
|
-
}, forwardedRef) => {
|
|
122
|
-
// Create a known catalogue of Threejs-native elements
|
|
123
|
-
// This will include the entire THREE namespace by default, users can extend
|
|
124
|
-
// their own elements by using the createRoot API instead
|
|
125
|
-
React.useMemo(() => extend(THREE), []);
|
|
126
|
-
const [{
|
|
127
|
-
width,
|
|
128
|
-
height
|
|
129
|
-
}, setSize] = React.useState({
|
|
130
|
-
width: 0,
|
|
131
|
-
height: 0
|
|
132
|
-
});
|
|
133
|
-
const [canvas, setCanvas] = React.useState(null);
|
|
134
|
-
const [bind, setBind] = React.useState();
|
|
135
|
-
const handlePointerMissed = useMutableCallback(onPointerMissed);
|
|
136
|
-
const [block, setBlock] = React.useState(false);
|
|
137
|
-
const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
|
|
138
|
-
|
|
139
|
-
if (block) throw block; // Throw exception outwards if anything within canvas throws
|
|
140
|
-
|
|
141
|
-
if (error) throw error;
|
|
142
|
-
const viewRef = React.useRef(null);
|
|
143
|
-
const root = React.useRef(null);
|
|
144
|
-
const onLayout = React.useCallback(e => {
|
|
145
|
-
const {
|
|
146
|
-
width,
|
|
147
|
-
height
|
|
148
|
-
} = e.nativeEvent.layout;
|
|
149
|
-
setSize({
|
|
150
|
-
width,
|
|
151
|
-
height
|
|
152
|
-
});
|
|
153
|
-
}, []);
|
|
154
|
-
const onContextCreate = React.useCallback(context => {
|
|
155
|
-
const canvasShim = {
|
|
156
|
-
width: context.drawingBufferWidth,
|
|
157
|
-
height: context.drawingBufferHeight,
|
|
158
|
-
style: {},
|
|
159
|
-
addEventListener: () => {},
|
|
160
|
-
removeEventListener: () => {},
|
|
161
|
-
clientHeight: context.drawingBufferHeight,
|
|
162
|
-
getContext: () => context
|
|
163
|
-
};
|
|
164
|
-
setCanvas(canvasShim);
|
|
165
|
-
}, []);
|
|
166
|
-
|
|
167
|
-
if (width > 0 && height > 0 && canvas) {
|
|
168
|
-
if (!root.current) root.current = createRoot(canvas);
|
|
169
|
-
root.current.configure({
|
|
170
|
-
gl,
|
|
171
|
-
events,
|
|
172
|
-
shadows,
|
|
173
|
-
linear,
|
|
174
|
-
flat,
|
|
175
|
-
legacy,
|
|
176
|
-
orthographic,
|
|
177
|
-
frameloop,
|
|
178
|
-
performance,
|
|
179
|
-
raycaster,
|
|
180
|
-
camera,
|
|
181
|
-
// expo-gl can only render at native dpr/resolution
|
|
182
|
-
// https://github.com/expo/expo-three/issues/39
|
|
183
|
-
dpr: PixelRatio.get(),
|
|
184
|
-
size: {
|
|
185
|
-
width,
|
|
186
|
-
height
|
|
187
|
-
},
|
|
188
|
-
// Pass mutable reference to onPointerMissed so it's free to update
|
|
189
|
-
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
|
190
|
-
// Overwrite onCreated to apply RN bindings
|
|
191
|
-
onCreated: state => {
|
|
192
|
-
// Bind events after creation
|
|
193
|
-
const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
|
|
194
|
-
setBind(handlers); // Bind render to RN bridge
|
|
195
|
-
|
|
196
|
-
const context = state.gl.getContext();
|
|
197
|
-
const renderFrame = state.gl.render.bind(state.gl);
|
|
198
|
-
|
|
199
|
-
state.gl.render = (scene, camera) => {
|
|
200
|
-
renderFrame(scene, camera);
|
|
201
|
-
context.endFrameEXP();
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
return onCreated == null ? void 0 : onCreated(state);
|
|
205
|
-
}
|
|
206
|
-
});
|
|
207
|
-
root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
208
|
-
set: setError
|
|
209
|
-
}, /*#__PURE__*/React.createElement(React.Suspense, {
|
|
210
|
-
fallback: /*#__PURE__*/React.createElement(Block, {
|
|
211
|
-
set: setBlock
|
|
212
|
-
})
|
|
213
|
-
}, children)));
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
React.useEffect(() => {
|
|
217
|
-
if (canvas) {
|
|
218
|
-
return () => unmountComponentAtNode(canvas);
|
|
219
|
-
}
|
|
220
|
-
}, [canvas]);
|
|
221
|
-
return /*#__PURE__*/React.createElement(View, _extends({}, props, {
|
|
222
|
-
ref: mergeRefs([viewRef, forwardedRef]),
|
|
223
|
-
onLayout: onLayout,
|
|
224
|
-
style: {
|
|
225
|
-
flex: 1,
|
|
226
|
-
...style
|
|
227
|
-
}
|
|
228
|
-
}, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
|
|
229
|
-
onContextCreate: onContextCreate,
|
|
230
|
-
style: StyleSheet.absoluteFill
|
|
231
|
-
}));
|
|
232
|
-
});
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Generates an asset based on input type.
|
|
236
|
-
*/
|
|
237
|
-
|
|
238
|
-
const getAsset = input => {
|
|
239
|
-
if (input instanceof Asset) return input;
|
|
240
|
-
|
|
241
|
-
switch (typeof input) {
|
|
242
|
-
case 'string':
|
|
243
|
-
return Asset.fromURI(input);
|
|
244
|
-
|
|
245
|
-
case 'number':
|
|
246
|
-
return Asset.fromModule(input);
|
|
247
|
-
|
|
248
|
-
default:
|
|
249
|
-
throw 'Invalid asset! Must be a URI or module.';
|
|
250
|
-
}
|
|
251
|
-
}; // Don't pre-process urls, let expo-asset generate an absolute URL
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
const extractUrlBase = THREE.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
|
|
255
|
-
|
|
256
|
-
THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
|
260
|
-
const texture = new THREE.Texture(); // @ts-ignore
|
|
261
|
-
|
|
262
|
-
texture.isDataTexture = true;
|
|
263
|
-
getAsset(url).downloadAsync().then(asset => {
|
|
264
|
-
texture.image = {
|
|
265
|
-
data: asset,
|
|
266
|
-
width: asset.width,
|
|
267
|
-
height: asset.height
|
|
268
|
-
};
|
|
269
|
-
texture.needsUpdate = true;
|
|
270
|
-
onLoad == null ? void 0 : onLoad(texture);
|
|
271
|
-
}).catch(onError);
|
|
272
|
-
return texture;
|
|
273
|
-
}; // Fetches assets via XMLHttpRequest
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
THREE.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
|
|
277
|
-
if (this.path) url = this.path + url;
|
|
278
|
-
const request = new XMLHttpRequest();
|
|
279
|
-
getAsset(url).downloadAsync().then(asset => {
|
|
280
|
-
request.open('GET', asset.uri, true);
|
|
281
|
-
request.addEventListener('load', event => {
|
|
282
|
-
if (request.status === 200) {
|
|
283
|
-
onLoad == null ? void 0 : onLoad(request.response);
|
|
284
|
-
this.manager.itemEnd(url);
|
|
285
|
-
} else {
|
|
286
|
-
onError == null ? void 0 : onError(event);
|
|
287
|
-
this.manager.itemError(url);
|
|
288
|
-
this.manager.itemEnd(url);
|
|
289
|
-
}
|
|
290
|
-
}, false);
|
|
291
|
-
request.addEventListener('progress', event => {
|
|
292
|
-
onProgress == null ? void 0 : onProgress(event);
|
|
293
|
-
}, false);
|
|
294
|
-
request.addEventListener('error', event => {
|
|
295
|
-
onError == null ? void 0 : onError(event);
|
|
296
|
-
this.manager.itemError(url);
|
|
297
|
-
this.manager.itemEnd(url);
|
|
298
|
-
}, false);
|
|
299
|
-
request.addEventListener('abort', event => {
|
|
300
|
-
onError == null ? void 0 : onError(event);
|
|
301
|
-
this.manager.itemError(url);
|
|
302
|
-
this.manager.itemEnd(url);
|
|
303
|
-
}, false);
|
|
304
|
-
if (this.responseType) request.responseType = this.responseType;
|
|
305
|
-
if (this.withCredentials) request.withCredentials = this.withCredentials;
|
|
306
|
-
|
|
307
|
-
for (const header in this.requestHeader) {
|
|
308
|
-
request.setRequestHeader(header, this.requestHeader[header]);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
request.send(null);
|
|
312
|
-
this.manager.itemStart(url);
|
|
313
|
-
});
|
|
314
|
-
return request;
|
|
315
|
-
};
|
|
316
|
-
|
|
317
|
-
export { Canvas, createTouchEvents as events };
|