Initial project import
This commit is contained in:
2
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.d.ts
generated
vendored
Normal file
2
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from "../../dist/declarations/src/native";
|
||||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhY3QtdGhyZWUtZmliZXItbmF0aXZlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL25hdGl2ZS5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
|
||||
567
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.js
generated
vendored
Normal file
567
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.dev.js
generated
vendored
Normal file
@@ -0,0 +1,567 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var events = require('../../dist/events-f19bcc32.cjs.dev.js');
|
||||
var React = require('react');
|
||||
var THREE = require('three');
|
||||
var reactNative = require('react-native');
|
||||
var expoGl = require('expo-gl');
|
||||
var itsFine = require('its-fine');
|
||||
var jsxRuntime = require('react/jsx-runtime');
|
||||
var expoAsset = require('expo-asset');
|
||||
var base64Js = require('base64-js');
|
||||
var buffer = require('buffer');
|
||||
require('zustand/traditional');
|
||||
require('suspend-react');
|
||||
require('scheduler');
|
||||
|
||||
function _interopNamespace(e) {
|
||||
if (e && e.__esModule) return e;
|
||||
var n = Object.create(null);
|
||||
if (e) {
|
||||
Object.keys(e).forEach(function (k) {
|
||||
if (k !== 'default') {
|
||||
var d = Object.getOwnPropertyDescriptor(e, k);
|
||||
Object.defineProperty(n, k, d.get ? d : {
|
||||
enumerable: true,
|
||||
get: function () { return e[k]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
n["default"] = e;
|
||||
return Object.freeze(n);
|
||||
}
|
||||
|
||||
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
||||
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
|
||||
|
||||
// TODO: React 19 needs support from react-native
|
||||
const _View = reactNative.View;
|
||||
function CanvasImpl({
|
||||
children,
|
||||
style,
|
||||
gl,
|
||||
events: events$1 = events.createPointerEvents,
|
||||
shadows,
|
||||
linear,
|
||||
flat,
|
||||
legacy,
|
||||
orthographic,
|
||||
frameloop,
|
||||
performance,
|
||||
raycaster,
|
||||
camera,
|
||||
scene,
|
||||
onPointerMissed,
|
||||
onCreated,
|
||||
ref,
|
||||
pointerEvents,
|
||||
...props
|
||||
}) {
|
||||
// Create a known catalogue of Threejs-native elements
|
||||
// This will include the entire THREE namespace by default, users can extend
|
||||
// their own elements by using the createRoot API instead
|
||||
React__namespace.useMemo(() => events.extend(THREE__namespace), []);
|
||||
const Bridge = events.useBridge();
|
||||
const [{
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
}, setSize] = React__namespace.useState({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0
|
||||
});
|
||||
const [canvas, setCanvas] = React__namespace.useState(null);
|
||||
const [bind, setBind] = React__namespace.useState();
|
||||
React__namespace.useImperativeHandle(ref, () => viewRef.current);
|
||||
const handlePointerMissed = events.useMutableCallback(onPointerMissed);
|
||||
const [block, setBlock] = React__namespace.useState(false);
|
||||
const [error, setError] = React__namespace.useState(undefined);
|
||||
|
||||
// Suspend this component if block is a promise (2nd run)
|
||||
if (block) throw block;
|
||||
// Throw exception outwards if anything within canvas throws
|
||||
if (error) throw error;
|
||||
const viewRef = React__namespace.useRef(null);
|
||||
const root = React__namespace.useRef(null);
|
||||
const [antialias, setAntialias] = React__namespace.useState(true);
|
||||
const onLayout = React__namespace.useCallback(e => {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y
|
||||
} = e.nativeEvent.layout;
|
||||
setSize({
|
||||
width,
|
||||
height,
|
||||
top: y,
|
||||
left: x
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Called on context create or swap
|
||||
// https://github.com/pmndrs/react-three-fiber/pull/2297
|
||||
const onContextCreate = React__namespace.useCallback(context => {
|
||||
const listeners = new Map();
|
||||
const canvas = {
|
||||
style: {},
|
||||
width: context.drawingBufferWidth,
|
||||
height: context.drawingBufferHeight,
|
||||
clientWidth: context.drawingBufferWidth,
|
||||
clientHeight: context.drawingBufferHeight,
|
||||
getContext: (_, {
|
||||
antialias = false
|
||||
}) => {
|
||||
setAntialias(antialias);
|
||||
return context;
|
||||
},
|
||||
addEventListener(type, listener) {
|
||||
let callbacks = listeners.get(type);
|
||||
if (!callbacks) {
|
||||
callbacks = [];
|
||||
listeners.set(type, callbacks);
|
||||
}
|
||||
callbacks.push(listener);
|
||||
},
|
||||
removeEventListener(type, listener) {
|
||||
const callbacks = listeners.get(type);
|
||||
if (callbacks) {
|
||||
const index = callbacks.indexOf(listener);
|
||||
if (index !== -1) callbacks.splice(index, 1);
|
||||
}
|
||||
},
|
||||
dispatchEvent(event) {
|
||||
Object.assign(event, {
|
||||
target: this
|
||||
});
|
||||
const callbacks = listeners.get(event.type);
|
||||
if (callbacks) {
|
||||
for (const callback of callbacks) {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
setPointerCapture() {
|
||||
// TODO
|
||||
},
|
||||
releasePointerCapture() {
|
||||
// TODO
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: this is wrong but necessary to trick controls
|
||||
// @ts-ignore
|
||||
canvas.ownerDocument = canvas;
|
||||
canvas.getRootNode = () => canvas;
|
||||
root.current = events.createRoot(canvas);
|
||||
setCanvas(canvas);
|
||||
function handleTouch(gestureEvent, type) {
|
||||
gestureEvent.persist();
|
||||
canvas.dispatchEvent(Object.assign(gestureEvent.nativeEvent, {
|
||||
type,
|
||||
offsetX: gestureEvent.nativeEvent.locationX,
|
||||
offsetY: gestureEvent.nativeEvent.locationY,
|
||||
pointerType: 'touch',
|
||||
pointerId: gestureEvent.nativeEvent.identifier
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
const responder = reactNative.PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderTerminationRequest: () => true,
|
||||
onStartShouldSetPanResponderCapture: e => handleTouch(e, 'pointercapture'),
|
||||
onPanResponderStart: e => handleTouch(e, 'pointerdown'),
|
||||
onPanResponderMove: e => handleTouch(e, 'pointermove'),
|
||||
onPanResponderEnd: (e, state) => {
|
||||
handleTouch(e, 'pointerup');
|
||||
if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'click');
|
||||
},
|
||||
onPanResponderRelease: e => handleTouch(e, 'pointerleave'),
|
||||
onPanResponderTerminate: e => handleTouch(e, 'lostpointercapture'),
|
||||
onPanResponderReject: e => handleTouch(e, 'lostpointercapture')
|
||||
});
|
||||
setBind(responder.panHandlers);
|
||||
}, []);
|
||||
events.useIsomorphicLayoutEffect(() => {
|
||||
if (root.current && width > 0 && height > 0) {
|
||||
async function run() {
|
||||
await root.current.configure({
|
||||
gl,
|
||||
events: events$1,
|
||||
shadows,
|
||||
linear,
|
||||
flat,
|
||||
legacy,
|
||||
orthographic,
|
||||
frameloop,
|
||||
performance,
|
||||
raycaster,
|
||||
camera,
|
||||
scene,
|
||||
// expo-gl can only render at native dpr/resolution
|
||||
// https://github.com/expo/expo-three/issues/39
|
||||
dpr: reactNative.PixelRatio.get(),
|
||||
size: {
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
},
|
||||
// Pass mutable reference to onPointerMissed so it's free to update
|
||||
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
||||
// Overwrite onCreated to apply RN bindings
|
||||
onCreated: state => {
|
||||
// Bind render to RN bridge
|
||||
const context = state.gl.getContext();
|
||||
const renderFrame = state.gl.render.bind(state.gl);
|
||||
state.gl.render = (scene, camera) => {
|
||||
renderFrame(scene, camera);
|
||||
context.endFrameEXP();
|
||||
};
|
||||
return onCreated == null ? void 0 : onCreated(state);
|
||||
}
|
||||
});
|
||||
root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
|
||||
children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
|
||||
set: setError,
|
||||
children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
|
||||
fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
|
||||
set: setBlock
|
||||
}),
|
||||
children: children != null ? children : null
|
||||
})
|
||||
})
|
||||
}));
|
||||
}
|
||||
run();
|
||||
}
|
||||
});
|
||||
React__namespace.useEffect(() => {
|
||||
if (canvas) {
|
||||
return () => events.unmountComponentAtNode(canvas);
|
||||
}
|
||||
}, [canvas]);
|
||||
return /*#__PURE__*/jsxRuntime.jsxs(_View, {
|
||||
...props,
|
||||
ref: viewRef,
|
||||
onLayout: onLayout,
|
||||
style: {
|
||||
flex: 1,
|
||||
...style
|
||||
},
|
||||
children: [width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
|
||||
msaaSamples: antialias ? 4 : 0,
|
||||
onContextCreate: onContextCreate,
|
||||
style: reactNative.StyleSheet.absoluteFill
|
||||
}), /*#__PURE__*/jsxRuntime.jsx(_View, {
|
||||
style: reactNative.StyleSheet.absoluteFill,
|
||||
pointerEvents: pointerEvents,
|
||||
...bind
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* A native canvas which accepts threejs elements as children.
|
||||
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
||||
*/
|
||||
function Canvas(props) {
|
||||
return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
|
||||
children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
|
||||
...props
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/** Default R3F event manager for react-native */
|
||||
function createTouchEvents(store) {
|
||||
const {
|
||||
handlePointer
|
||||
} = events.createEvents(store);
|
||||
const handleTouch = (event, name) => {
|
||||
event.persist()
|
||||
|
||||
// Apply offset
|
||||
;
|
||||
event.nativeEvent.offsetX = event.nativeEvent.locationX;
|
||||
event.nativeEvent.offsetY = event.nativeEvent.locationY;
|
||||
|
||||
// Emulate DOM event
|
||||
const callback = handlePointer(name);
|
||||
callback(event.nativeEvent);
|
||||
return true;
|
||||
};
|
||||
const responder = reactNative.PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderTerminationRequest: () => true,
|
||||
onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
|
||||
onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
|
||||
onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
|
||||
onPanResponderEnd: (e, state) => {
|
||||
handleTouch(e, 'onPointerUp');
|
||||
if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
|
||||
},
|
||||
onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
|
||||
onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
|
||||
onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
|
||||
});
|
||||
return {
|
||||
priority: 1,
|
||||
enabled: true,
|
||||
compute(event, state, previous) {
|
||||
// https://github.com/pmndrs/react-three-fiber/pull/782
|
||||
// Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
|
||||
state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
|
||||
state.raycaster.setFromCamera(state.pointer, state.camera);
|
||||
},
|
||||
connected: undefined,
|
||||
handlers: responder.panHandlers,
|
||||
update: () => {
|
||||
var _internal$lastEvent;
|
||||
const {
|
||||
events,
|
||||
internal
|
||||
} = store.getState();
|
||||
if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
|
||||
handlePointer('onPointerMove')(internal.lastEvent.current);
|
||||
}
|
||||
},
|
||||
connect: () => {
|
||||
const {
|
||||
set,
|
||||
events
|
||||
} = store.getState();
|
||||
events.disconnect == null ? void 0 : events.disconnect();
|
||||
set(state => ({
|
||||
events: {
|
||||
...state.events,
|
||||
connected: true
|
||||
}
|
||||
}));
|
||||
},
|
||||
disconnect: () => {
|
||||
const {
|
||||
set
|
||||
} = store.getState();
|
||||
set(state => ({
|
||||
events: {
|
||||
...state.events,
|
||||
connected: false
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Conditionally import expo-file-system/legacy to support Expo 54
|
||||
const getFileSystem = () => {
|
||||
try {
|
||||
return require('expo-file-system/legacy');
|
||||
} catch {
|
||||
return require('expo-file-system');
|
||||
}
|
||||
};
|
||||
const fs = getFileSystem();
|
||||
|
||||
// http://stackoverflow.com/questions/105034
|
||||
function uuidv4() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||
const r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : r & 0x3 | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
async function getAsset(input) {
|
||||
if (typeof input === 'string') {
|
||||
var _NativeModules$BlobMo;
|
||||
// Don't process storage
|
||||
if (input.startsWith('file:')) return input;
|
||||
|
||||
// Unpack Blobs from react-native BlobManager
|
||||
// https://github.com/facebook/react-native/issues/22681#issuecomment-523258955
|
||||
if (input.startsWith('blob:') || input.startsWith((_NativeModules$BlobMo = reactNative.NativeModules.BlobModule) == null ? void 0 : _NativeModules$BlobMo.BLOB_URI_SCHEME)) {
|
||||
const blob = await new Promise((res, rej) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', input);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.onload = () => res(xhr.response);
|
||||
xhr.onerror = rej;
|
||||
xhr.send();
|
||||
});
|
||||
const data = await new Promise((res, rej) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => res(reader.result);
|
||||
reader.onerror = rej;
|
||||
reader.readAsText(blob);
|
||||
});
|
||||
input = `data:${blob.type};base64,${data}`;
|
||||
}
|
||||
|
||||
// Create safe URI for JSI serialization
|
||||
if (input.startsWith('data:')) {
|
||||
const [header, data] = input.split(';base64,');
|
||||
const [, type] = header.split('/');
|
||||
const uri = fs.cacheDirectory + uuidv4() + `.${type}`;
|
||||
await fs.writeAsStringAsync(uri, data, {
|
||||
encoding: fs.EncodingType.Base64
|
||||
});
|
||||
return uri;
|
||||
}
|
||||
}
|
||||
|
||||
// Download bundler module or external URL
|
||||
const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
|
||||
let uri = asset.localUri || asset.uri;
|
||||
|
||||
// Unpack assets in Android Release Mode
|
||||
if (!uri.includes(':')) {
|
||||
const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
|
||||
await fs.copyAsync({
|
||||
from: uri,
|
||||
to: file
|
||||
});
|
||||
uri = file;
|
||||
}
|
||||
return uri;
|
||||
}
|
||||
function polyfills() {
|
||||
// Patch Blob for ArrayBuffer and URL if unsupported
|
||||
// https://github.com/facebook/react-native/pull/39276
|
||||
// https://github.com/pmndrs/react-three-fiber/issues/3058
|
||||
if (reactNative.Platform.OS !== 'web') {
|
||||
try {
|
||||
const blob = new Blob([new ArrayBuffer(4)]);
|
||||
const url = URL.createObjectURL(blob);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (_) {
|
||||
var _BlobManagerModule$de;
|
||||
const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
|
||||
const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
|
||||
const createObjectURL = URL.createObjectURL;
|
||||
URL.createObjectURL = function (blob) {
|
||||
if (blob.data._base64) {
|
||||
return `data:${blob.type};base64,${blob.data._base64}`;
|
||||
}
|
||||
return createObjectURL(blob);
|
||||
};
|
||||
const createFromParts = BlobManager.createFromParts;
|
||||
BlobManager.createFromParts = function (parts, options) {
|
||||
parts = parts.map(part => {
|
||||
if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
|
||||
part = base64Js.fromByteArray(new Uint8Array(part));
|
||||
}
|
||||
return part;
|
||||
});
|
||||
const blob = createFromParts(parts, options);
|
||||
|
||||
// Always enable slow but safe path for iOS (previously for Android unauth)
|
||||
// https://github.com/pmndrs/react-three-fiber/issues/3075
|
||||
// if (!NativeModules.BlobModule?.BLOB_URI_SCHEME) {
|
||||
blob.data._base64 = '';
|
||||
for (const part of parts) {
|
||||
var _data$_base, _data;
|
||||
blob.data._base64 += (_data$_base = (_data = part.data) == null ? void 0 : _data._base64) != null ? _data$_base : part;
|
||||
}
|
||||
// }
|
||||
|
||||
return blob;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Don't pre-process urls, let expo-asset generate an absolute URL
|
||||
const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
|
||||
THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './';
|
||||
|
||||
// There's no Image in native, so create a data texture instead
|
||||
THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
||||
if (this.path && typeof url === 'string') url = this.path + url;
|
||||
const texture = new THREE__namespace.Texture();
|
||||
getAsset(url).then(async uri => {
|
||||
// https://github.com/expo/expo-three/pull/266
|
||||
const {
|
||||
width,
|
||||
height
|
||||
} = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
|
||||
width,
|
||||
height
|
||||
}), rej));
|
||||
texture.image = {
|
||||
// Special case for EXGLImageUtils::loadImage
|
||||
data: {
|
||||
localUri: uri
|
||||
},
|
||||
width,
|
||||
height
|
||||
};
|
||||
texture.flipY = true; // Since expo-gl@12.4.0
|
||||
texture.needsUpdate = true;
|
||||
|
||||
// Force non-DOM upload for EXGL texImage2D
|
||||
// @ts-expect-error
|
||||
texture.isDataTexture = true;
|
||||
onLoad == null ? void 0 : onLoad(texture);
|
||||
}).catch(onError);
|
||||
return texture;
|
||||
};
|
||||
|
||||
// Fetches assets via FS
|
||||
THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
||||
if (this.path && typeof url === 'string') url = this.path + url;
|
||||
this.manager.itemStart(url);
|
||||
getAsset(url).then(async uri => {
|
||||
const base64 = await fs.readAsStringAsync(uri, {
|
||||
encoding: fs.EncodingType.Base64
|
||||
});
|
||||
const data = buffer.Buffer.from(base64, 'base64');
|
||||
onLoad == null ? void 0 : onLoad(data.buffer);
|
||||
}).catch(error => {
|
||||
onError == null ? void 0 : onError(error);
|
||||
this.manager.itemError(url);
|
||||
}).finally(() => {
|
||||
this.manager.itemEnd(url);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (reactNative.Platform.OS !== 'web') polyfills();
|
||||
|
||||
exports.ReactThreeFiber = events.threeTypes;
|
||||
exports._roots = events._roots;
|
||||
exports.act = events.act;
|
||||
exports.addAfterEffect = events.addAfterEffect;
|
||||
exports.addEffect = events.addEffect;
|
||||
exports.addTail = events.addTail;
|
||||
exports.advance = events.advance;
|
||||
exports.applyProps = events.applyProps;
|
||||
exports.buildGraph = events.buildGraph;
|
||||
exports.context = events.context;
|
||||
exports.createEvents = events.createEvents;
|
||||
exports.createPortal = events.createPortal;
|
||||
exports.createRoot = events.createRoot;
|
||||
exports.dispose = events.dispose;
|
||||
exports.extend = events.extend;
|
||||
exports.flushGlobalEffects = events.flushGlobalEffects;
|
||||
exports.flushSync = events.flushSync;
|
||||
exports.getRootState = events.getRootState;
|
||||
exports.invalidate = events.invalidate;
|
||||
exports.reconciler = events.reconciler;
|
||||
exports.unmountComponentAtNode = events.unmountComponentAtNode;
|
||||
exports.useFrame = events.useFrame;
|
||||
exports.useGraph = events.useGraph;
|
||||
exports.useInstanceHandle = events.useInstanceHandle;
|
||||
exports.useLoader = events.useLoader;
|
||||
exports.useStore = events.useStore;
|
||||
exports.useThree = events.useThree;
|
||||
exports.Canvas = Canvas;
|
||||
exports.events = createTouchEvents;
|
||||
7
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.js
generated
vendored
Normal file
7
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.js
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
module.exports = require("./react-three-fiber-native.cjs.prod.js");
|
||||
} else {
|
||||
module.exports = require("./react-three-fiber-native.cjs.dev.js");
|
||||
}
|
||||
567
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.prod.js
generated
vendored
Normal file
567
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.cjs.prod.js
generated
vendored
Normal file
@@ -0,0 +1,567 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var events = require('../../dist/events-583399dd.cjs.prod.js');
|
||||
var React = require('react');
|
||||
var THREE = require('three');
|
||||
var reactNative = require('react-native');
|
||||
var expoGl = require('expo-gl');
|
||||
var itsFine = require('its-fine');
|
||||
var jsxRuntime = require('react/jsx-runtime');
|
||||
var expoAsset = require('expo-asset');
|
||||
var base64Js = require('base64-js');
|
||||
var buffer = require('buffer');
|
||||
require('zustand/traditional');
|
||||
require('suspend-react');
|
||||
require('scheduler');
|
||||
|
||||
function _interopNamespace(e) {
|
||||
if (e && e.__esModule) return e;
|
||||
var n = Object.create(null);
|
||||
if (e) {
|
||||
Object.keys(e).forEach(function (k) {
|
||||
if (k !== 'default') {
|
||||
var d = Object.getOwnPropertyDescriptor(e, k);
|
||||
Object.defineProperty(n, k, d.get ? d : {
|
||||
enumerable: true,
|
||||
get: function () { return e[k]; }
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
n["default"] = e;
|
||||
return Object.freeze(n);
|
||||
}
|
||||
|
||||
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
||||
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
|
||||
|
||||
// TODO: React 19 needs support from react-native
|
||||
const _View = reactNative.View;
|
||||
function CanvasImpl({
|
||||
children,
|
||||
style,
|
||||
gl,
|
||||
events: events$1 = events.createPointerEvents,
|
||||
shadows,
|
||||
linear,
|
||||
flat,
|
||||
legacy,
|
||||
orthographic,
|
||||
frameloop,
|
||||
performance,
|
||||
raycaster,
|
||||
camera,
|
||||
scene,
|
||||
onPointerMissed,
|
||||
onCreated,
|
||||
ref,
|
||||
pointerEvents,
|
||||
...props
|
||||
}) {
|
||||
// Create a known catalogue of Threejs-native elements
|
||||
// This will include the entire THREE namespace by default, users can extend
|
||||
// their own elements by using the createRoot API instead
|
||||
React__namespace.useMemo(() => events.extend(THREE__namespace), []);
|
||||
const Bridge = events.useBridge();
|
||||
const [{
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
}, setSize] = React__namespace.useState({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0
|
||||
});
|
||||
const [canvas, setCanvas] = React__namespace.useState(null);
|
||||
const [bind, setBind] = React__namespace.useState();
|
||||
React__namespace.useImperativeHandle(ref, () => viewRef.current);
|
||||
const handlePointerMissed = events.useMutableCallback(onPointerMissed);
|
||||
const [block, setBlock] = React__namespace.useState(false);
|
||||
const [error, setError] = React__namespace.useState(undefined);
|
||||
|
||||
// Suspend this component if block is a promise (2nd run)
|
||||
if (block) throw block;
|
||||
// Throw exception outwards if anything within canvas throws
|
||||
if (error) throw error;
|
||||
const viewRef = React__namespace.useRef(null);
|
||||
const root = React__namespace.useRef(null);
|
||||
const [antialias, setAntialias] = React__namespace.useState(true);
|
||||
const onLayout = React__namespace.useCallback(e => {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y
|
||||
} = e.nativeEvent.layout;
|
||||
setSize({
|
||||
width,
|
||||
height,
|
||||
top: y,
|
||||
left: x
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Called on context create or swap
|
||||
// https://github.com/pmndrs/react-three-fiber/pull/2297
|
||||
const onContextCreate = React__namespace.useCallback(context => {
|
||||
const listeners = new Map();
|
||||
const canvas = {
|
||||
style: {},
|
||||
width: context.drawingBufferWidth,
|
||||
height: context.drawingBufferHeight,
|
||||
clientWidth: context.drawingBufferWidth,
|
||||
clientHeight: context.drawingBufferHeight,
|
||||
getContext: (_, {
|
||||
antialias = false
|
||||
}) => {
|
||||
setAntialias(antialias);
|
||||
return context;
|
||||
},
|
||||
addEventListener(type, listener) {
|
||||
let callbacks = listeners.get(type);
|
||||
if (!callbacks) {
|
||||
callbacks = [];
|
||||
listeners.set(type, callbacks);
|
||||
}
|
||||
callbacks.push(listener);
|
||||
},
|
||||
removeEventListener(type, listener) {
|
||||
const callbacks = listeners.get(type);
|
||||
if (callbacks) {
|
||||
const index = callbacks.indexOf(listener);
|
||||
if (index !== -1) callbacks.splice(index, 1);
|
||||
}
|
||||
},
|
||||
dispatchEvent(event) {
|
||||
Object.assign(event, {
|
||||
target: this
|
||||
});
|
||||
const callbacks = listeners.get(event.type);
|
||||
if (callbacks) {
|
||||
for (const callback of callbacks) {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
setPointerCapture() {
|
||||
// TODO
|
||||
},
|
||||
releasePointerCapture() {
|
||||
// TODO
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: this is wrong but necessary to trick controls
|
||||
// @ts-ignore
|
||||
canvas.ownerDocument = canvas;
|
||||
canvas.getRootNode = () => canvas;
|
||||
root.current = events.createRoot(canvas);
|
||||
setCanvas(canvas);
|
||||
function handleTouch(gestureEvent, type) {
|
||||
gestureEvent.persist();
|
||||
canvas.dispatchEvent(Object.assign(gestureEvent.nativeEvent, {
|
||||
type,
|
||||
offsetX: gestureEvent.nativeEvent.locationX,
|
||||
offsetY: gestureEvent.nativeEvent.locationY,
|
||||
pointerType: 'touch',
|
||||
pointerId: gestureEvent.nativeEvent.identifier
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
const responder = reactNative.PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderTerminationRequest: () => true,
|
||||
onStartShouldSetPanResponderCapture: e => handleTouch(e, 'pointercapture'),
|
||||
onPanResponderStart: e => handleTouch(e, 'pointerdown'),
|
||||
onPanResponderMove: e => handleTouch(e, 'pointermove'),
|
||||
onPanResponderEnd: (e, state) => {
|
||||
handleTouch(e, 'pointerup');
|
||||
if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'click');
|
||||
},
|
||||
onPanResponderRelease: e => handleTouch(e, 'pointerleave'),
|
||||
onPanResponderTerminate: e => handleTouch(e, 'lostpointercapture'),
|
||||
onPanResponderReject: e => handleTouch(e, 'lostpointercapture')
|
||||
});
|
||||
setBind(responder.panHandlers);
|
||||
}, []);
|
||||
events.useIsomorphicLayoutEffect(() => {
|
||||
if (root.current && width > 0 && height > 0) {
|
||||
async function run() {
|
||||
await root.current.configure({
|
||||
gl,
|
||||
events: events$1,
|
||||
shadows,
|
||||
linear,
|
||||
flat,
|
||||
legacy,
|
||||
orthographic,
|
||||
frameloop,
|
||||
performance,
|
||||
raycaster,
|
||||
camera,
|
||||
scene,
|
||||
// expo-gl can only render at native dpr/resolution
|
||||
// https://github.com/expo/expo-three/issues/39
|
||||
dpr: reactNative.PixelRatio.get(),
|
||||
size: {
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
},
|
||||
// Pass mutable reference to onPointerMissed so it's free to update
|
||||
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
||||
// Overwrite onCreated to apply RN bindings
|
||||
onCreated: state => {
|
||||
// Bind render to RN bridge
|
||||
const context = state.gl.getContext();
|
||||
const renderFrame = state.gl.render.bind(state.gl);
|
||||
state.gl.render = (scene, camera) => {
|
||||
renderFrame(scene, camera);
|
||||
context.endFrameEXP();
|
||||
};
|
||||
return onCreated == null ? void 0 : onCreated(state);
|
||||
}
|
||||
});
|
||||
root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
|
||||
children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
|
||||
set: setError,
|
||||
children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
|
||||
fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
|
||||
set: setBlock
|
||||
}),
|
||||
children: children != null ? children : null
|
||||
})
|
||||
})
|
||||
}));
|
||||
}
|
||||
run();
|
||||
}
|
||||
});
|
||||
React__namespace.useEffect(() => {
|
||||
if (canvas) {
|
||||
return () => events.unmountComponentAtNode(canvas);
|
||||
}
|
||||
}, [canvas]);
|
||||
return /*#__PURE__*/jsxRuntime.jsxs(_View, {
|
||||
...props,
|
||||
ref: viewRef,
|
||||
onLayout: onLayout,
|
||||
style: {
|
||||
flex: 1,
|
||||
...style
|
||||
},
|
||||
children: [width > 0 && /*#__PURE__*/jsxRuntime.jsx(expoGl.GLView, {
|
||||
msaaSamples: antialias ? 4 : 0,
|
||||
onContextCreate: onContextCreate,
|
||||
style: reactNative.StyleSheet.absoluteFill
|
||||
}), /*#__PURE__*/jsxRuntime.jsx(_View, {
|
||||
style: reactNative.StyleSheet.absoluteFill,
|
||||
pointerEvents: pointerEvents,
|
||||
...bind
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* A native canvas which accepts threejs elements as children.
|
||||
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
||||
*/
|
||||
function Canvas(props) {
|
||||
return /*#__PURE__*/jsxRuntime.jsx(itsFine.FiberProvider, {
|
||||
children: /*#__PURE__*/jsxRuntime.jsx(CanvasImpl, {
|
||||
...props
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/** Default R3F event manager for react-native */
|
||||
function createTouchEvents(store) {
|
||||
const {
|
||||
handlePointer
|
||||
} = events.createEvents(store);
|
||||
const handleTouch = (event, name) => {
|
||||
event.persist()
|
||||
|
||||
// Apply offset
|
||||
;
|
||||
event.nativeEvent.offsetX = event.nativeEvent.locationX;
|
||||
event.nativeEvent.offsetY = event.nativeEvent.locationY;
|
||||
|
||||
// Emulate DOM event
|
||||
const callback = handlePointer(name);
|
||||
callback(event.nativeEvent);
|
||||
return true;
|
||||
};
|
||||
const responder = reactNative.PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderTerminationRequest: () => true,
|
||||
onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
|
||||
onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
|
||||
onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
|
||||
onPanResponderEnd: (e, state) => {
|
||||
handleTouch(e, 'onPointerUp');
|
||||
if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
|
||||
},
|
||||
onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
|
||||
onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
|
||||
onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
|
||||
});
|
||||
return {
|
||||
priority: 1,
|
||||
enabled: true,
|
||||
compute(event, state, previous) {
|
||||
// https://github.com/pmndrs/react-three-fiber/pull/782
|
||||
// Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
|
||||
state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
|
||||
state.raycaster.setFromCamera(state.pointer, state.camera);
|
||||
},
|
||||
connected: undefined,
|
||||
handlers: responder.panHandlers,
|
||||
update: () => {
|
||||
var _internal$lastEvent;
|
||||
const {
|
||||
events,
|
||||
internal
|
||||
} = store.getState();
|
||||
if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
|
||||
handlePointer('onPointerMove')(internal.lastEvent.current);
|
||||
}
|
||||
},
|
||||
connect: () => {
|
||||
const {
|
||||
set,
|
||||
events
|
||||
} = store.getState();
|
||||
events.disconnect == null ? void 0 : events.disconnect();
|
||||
set(state => ({
|
||||
events: {
|
||||
...state.events,
|
||||
connected: true
|
||||
}
|
||||
}));
|
||||
},
|
||||
disconnect: () => {
|
||||
const {
|
||||
set
|
||||
} = store.getState();
|
||||
set(state => ({
|
||||
events: {
|
||||
...state.events,
|
||||
connected: false
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Conditionally import expo-file-system/legacy to support Expo 54
|
||||
const getFileSystem = () => {
|
||||
try {
|
||||
return require('expo-file-system/legacy');
|
||||
} catch {
|
||||
return require('expo-file-system');
|
||||
}
|
||||
};
|
||||
const fs = getFileSystem();
|
||||
|
||||
// http://stackoverflow.com/questions/105034
|
||||
function uuidv4() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||
const r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : r & 0x3 | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
async function getAsset(input) {
|
||||
if (typeof input === 'string') {
|
||||
var _NativeModules$BlobMo;
|
||||
// Don't process storage
|
||||
if (input.startsWith('file:')) return input;
|
||||
|
||||
// Unpack Blobs from react-native BlobManager
|
||||
// https://github.com/facebook/react-native/issues/22681#issuecomment-523258955
|
||||
if (input.startsWith('blob:') || input.startsWith((_NativeModules$BlobMo = reactNative.NativeModules.BlobModule) == null ? void 0 : _NativeModules$BlobMo.BLOB_URI_SCHEME)) {
|
||||
const blob = await new Promise((res, rej) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', input);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.onload = () => res(xhr.response);
|
||||
xhr.onerror = rej;
|
||||
xhr.send();
|
||||
});
|
||||
const data = await new Promise((res, rej) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => res(reader.result);
|
||||
reader.onerror = rej;
|
||||
reader.readAsText(blob);
|
||||
});
|
||||
input = `data:${blob.type};base64,${data}`;
|
||||
}
|
||||
|
||||
// Create safe URI for JSI serialization
|
||||
if (input.startsWith('data:')) {
|
||||
const [header, data] = input.split(';base64,');
|
||||
const [, type] = header.split('/');
|
||||
const uri = fs.cacheDirectory + uuidv4() + `.${type}`;
|
||||
await fs.writeAsStringAsync(uri, data, {
|
||||
encoding: fs.EncodingType.Base64
|
||||
});
|
||||
return uri;
|
||||
}
|
||||
}
|
||||
|
||||
// Download bundler module or external URL
|
||||
const asset = await expoAsset.Asset.fromModule(input).downloadAsync();
|
||||
let uri = asset.localUri || asset.uri;
|
||||
|
||||
// Unpack assets in Android Release Mode
|
||||
if (!uri.includes(':')) {
|
||||
const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
|
||||
await fs.copyAsync({
|
||||
from: uri,
|
||||
to: file
|
||||
});
|
||||
uri = file;
|
||||
}
|
||||
return uri;
|
||||
}
|
||||
function polyfills() {
|
||||
// Patch Blob for ArrayBuffer and URL if unsupported
|
||||
// https://github.com/facebook/react-native/pull/39276
|
||||
// https://github.com/pmndrs/react-three-fiber/issues/3058
|
||||
if (reactNative.Platform.OS !== 'web') {
|
||||
try {
|
||||
const blob = new Blob([new ArrayBuffer(4)]);
|
||||
const url = URL.createObjectURL(blob);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (_) {
|
||||
var _BlobManagerModule$de;
|
||||
const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
|
||||
const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
|
||||
const createObjectURL = URL.createObjectURL;
|
||||
URL.createObjectURL = function (blob) {
|
||||
if (blob.data._base64) {
|
||||
return `data:${blob.type};base64,${blob.data._base64}`;
|
||||
}
|
||||
return createObjectURL(blob);
|
||||
};
|
||||
const createFromParts = BlobManager.createFromParts;
|
||||
BlobManager.createFromParts = function (parts, options) {
|
||||
parts = parts.map(part => {
|
||||
if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
|
||||
part = base64Js.fromByteArray(new Uint8Array(part));
|
||||
}
|
||||
return part;
|
||||
});
|
||||
const blob = createFromParts(parts, options);
|
||||
|
||||
// Always enable slow but safe path for iOS (previously for Android unauth)
|
||||
// https://github.com/pmndrs/react-three-fiber/issues/3075
|
||||
// if (!NativeModules.BlobModule?.BLOB_URI_SCHEME) {
|
||||
blob.data._base64 = '';
|
||||
for (const part of parts) {
|
||||
var _data$_base, _data;
|
||||
blob.data._base64 += (_data$_base = (_data = part.data) == null ? void 0 : _data._base64) != null ? _data$_base : part;
|
||||
}
|
||||
// }
|
||||
|
||||
return blob;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Don't pre-process urls, let expo-asset generate an absolute URL
|
||||
const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
|
||||
THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './';
|
||||
|
||||
// There's no Image in native, so create a data texture instead
|
||||
THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
||||
if (this.path && typeof url === 'string') url = this.path + url;
|
||||
const texture = new THREE__namespace.Texture();
|
||||
getAsset(url).then(async uri => {
|
||||
// https://github.com/expo/expo-three/pull/266
|
||||
const {
|
||||
width,
|
||||
height
|
||||
} = await new Promise((res, rej) => reactNative.Image.getSize(uri, (width, height) => res({
|
||||
width,
|
||||
height
|
||||
}), rej));
|
||||
texture.image = {
|
||||
// Special case for EXGLImageUtils::loadImage
|
||||
data: {
|
||||
localUri: uri
|
||||
},
|
||||
width,
|
||||
height
|
||||
};
|
||||
texture.flipY = true; // Since expo-gl@12.4.0
|
||||
texture.needsUpdate = true;
|
||||
|
||||
// Force non-DOM upload for EXGL texImage2D
|
||||
// @ts-expect-error
|
||||
texture.isDataTexture = true;
|
||||
onLoad == null ? void 0 : onLoad(texture);
|
||||
}).catch(onError);
|
||||
return texture;
|
||||
};
|
||||
|
||||
// Fetches assets via FS
|
||||
THREE__namespace.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
||||
if (this.path && typeof url === 'string') url = this.path + url;
|
||||
this.manager.itemStart(url);
|
||||
getAsset(url).then(async uri => {
|
||||
const base64 = await fs.readAsStringAsync(uri, {
|
||||
encoding: fs.EncodingType.Base64
|
||||
});
|
||||
const data = buffer.Buffer.from(base64, 'base64');
|
||||
onLoad == null ? void 0 : onLoad(data.buffer);
|
||||
}).catch(error => {
|
||||
onError == null ? void 0 : onError(error);
|
||||
this.manager.itemError(url);
|
||||
}).finally(() => {
|
||||
this.manager.itemEnd(url);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (reactNative.Platform.OS !== 'web') polyfills();
|
||||
|
||||
exports.ReactThreeFiber = events.threeTypes;
|
||||
exports._roots = events._roots;
|
||||
exports.act = events.act;
|
||||
exports.addAfterEffect = events.addAfterEffect;
|
||||
exports.addEffect = events.addEffect;
|
||||
exports.addTail = events.addTail;
|
||||
exports.advance = events.advance;
|
||||
exports.applyProps = events.applyProps;
|
||||
exports.buildGraph = events.buildGraph;
|
||||
exports.context = events.context;
|
||||
exports.createEvents = events.createEvents;
|
||||
exports.createPortal = events.createPortal;
|
||||
exports.createRoot = events.createRoot;
|
||||
exports.dispose = events.dispose;
|
||||
exports.extend = events.extend;
|
||||
exports.flushGlobalEffects = events.flushGlobalEffects;
|
||||
exports.flushSync = events.flushSync;
|
||||
exports.getRootState = events.getRootState;
|
||||
exports.invalidate = events.invalidate;
|
||||
exports.reconciler = events.reconciler;
|
||||
exports.unmountComponentAtNode = events.unmountComponentAtNode;
|
||||
exports.useFrame = events.useFrame;
|
||||
exports.useGraph = events.useGraph;
|
||||
exports.useInstanceHandle = events.useInstanceHandle;
|
||||
exports.useLoader = events.useLoader;
|
||||
exports.useStore = events.useStore;
|
||||
exports.useThree = events.useThree;
|
||||
exports.Canvas = Canvas;
|
||||
exports.events = createTouchEvents;
|
||||
515
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.esm.js
generated
vendored
Normal file
515
node_modules/@react-three/fiber/native/dist/react-three-fiber-native.esm.js
generated
vendored
Normal file
@@ -0,0 +1,515 @@
|
||||
import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-b389eeca.esm.js';
|
||||
export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-b389eeca.esm.js';
|
||||
import * as React from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
|
||||
import { GLView } from 'expo-gl';
|
||||
import { FiberProvider } from 'its-fine';
|
||||
import { jsx, jsxs } from 'react/jsx-runtime';
|
||||
import { Asset } from 'expo-asset';
|
||||
import { fromByteArray } from 'base64-js';
|
||||
import { Buffer } from 'buffer';
|
||||
import 'zustand/traditional';
|
||||
import 'suspend-react';
|
||||
import 'scheduler';
|
||||
|
||||
// TODO: React 19 needs support from react-native
|
||||
const _View = View;
|
||||
function CanvasImpl({
|
||||
children,
|
||||
style,
|
||||
gl,
|
||||
events = createPointerEvents,
|
||||
shadows,
|
||||
linear,
|
||||
flat,
|
||||
legacy,
|
||||
orthographic,
|
||||
frameloop,
|
||||
performance,
|
||||
raycaster,
|
||||
camera,
|
||||
scene,
|
||||
onPointerMissed,
|
||||
onCreated,
|
||||
ref,
|
||||
pointerEvents,
|
||||
...props
|
||||
}) {
|
||||
// Create a known catalogue of Threejs-native elements
|
||||
// This will include the entire THREE namespace by default, users can extend
|
||||
// their own elements by using the createRoot API instead
|
||||
React.useMemo(() => extend(THREE), []);
|
||||
const Bridge = useBridge();
|
||||
const [{
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
}, setSize] = React.useState({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0
|
||||
});
|
||||
const [canvas, setCanvas] = React.useState(null);
|
||||
const [bind, setBind] = React.useState();
|
||||
React.useImperativeHandle(ref, () => viewRef.current);
|
||||
const handlePointerMissed = useMutableCallback(onPointerMissed);
|
||||
const [block, setBlock] = React.useState(false);
|
||||
const [error, setError] = React.useState(undefined);
|
||||
|
||||
// Suspend this component if block is a promise (2nd run)
|
||||
if (block) throw block;
|
||||
// Throw exception outwards if anything within canvas throws
|
||||
if (error) throw error;
|
||||
const viewRef = React.useRef(null);
|
||||
const root = React.useRef(null);
|
||||
const [antialias, setAntialias] = React.useState(true);
|
||||
const onLayout = React.useCallback(e => {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y
|
||||
} = e.nativeEvent.layout;
|
||||
setSize({
|
||||
width,
|
||||
height,
|
||||
top: y,
|
||||
left: x
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Called on context create or swap
|
||||
// https://github.com/pmndrs/react-three-fiber/pull/2297
|
||||
const onContextCreate = React.useCallback(context => {
|
||||
const listeners = new Map();
|
||||
const canvas = {
|
||||
style: {},
|
||||
width: context.drawingBufferWidth,
|
||||
height: context.drawingBufferHeight,
|
||||
clientWidth: context.drawingBufferWidth,
|
||||
clientHeight: context.drawingBufferHeight,
|
||||
getContext: (_, {
|
||||
antialias = false
|
||||
}) => {
|
||||
setAntialias(antialias);
|
||||
return context;
|
||||
},
|
||||
addEventListener(type, listener) {
|
||||
let callbacks = listeners.get(type);
|
||||
if (!callbacks) {
|
||||
callbacks = [];
|
||||
listeners.set(type, callbacks);
|
||||
}
|
||||
callbacks.push(listener);
|
||||
},
|
||||
removeEventListener(type, listener) {
|
||||
const callbacks = listeners.get(type);
|
||||
if (callbacks) {
|
||||
const index = callbacks.indexOf(listener);
|
||||
if (index !== -1) callbacks.splice(index, 1);
|
||||
}
|
||||
},
|
||||
dispatchEvent(event) {
|
||||
Object.assign(event, {
|
||||
target: this
|
||||
});
|
||||
const callbacks = listeners.get(event.type);
|
||||
if (callbacks) {
|
||||
for (const callback of callbacks) {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
setPointerCapture() {
|
||||
// TODO
|
||||
},
|
||||
releasePointerCapture() {
|
||||
// TODO
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: this is wrong but necessary to trick controls
|
||||
// @ts-ignore
|
||||
canvas.ownerDocument = canvas;
|
||||
canvas.getRootNode = () => canvas;
|
||||
root.current = createRoot(canvas);
|
||||
setCanvas(canvas);
|
||||
function handleTouch(gestureEvent, type) {
|
||||
gestureEvent.persist();
|
||||
canvas.dispatchEvent(Object.assign(gestureEvent.nativeEvent, {
|
||||
type,
|
||||
offsetX: gestureEvent.nativeEvent.locationX,
|
||||
offsetY: gestureEvent.nativeEvent.locationY,
|
||||
pointerType: 'touch',
|
||||
pointerId: gestureEvent.nativeEvent.identifier
|
||||
}));
|
||||
return true;
|
||||
}
|
||||
const responder = PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderTerminationRequest: () => true,
|
||||
onStartShouldSetPanResponderCapture: e => handleTouch(e, 'pointercapture'),
|
||||
onPanResponderStart: e => handleTouch(e, 'pointerdown'),
|
||||
onPanResponderMove: e => handleTouch(e, 'pointermove'),
|
||||
onPanResponderEnd: (e, state) => {
|
||||
handleTouch(e, 'pointerup');
|
||||
if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'click');
|
||||
},
|
||||
onPanResponderRelease: e => handleTouch(e, 'pointerleave'),
|
||||
onPanResponderTerminate: e => handleTouch(e, 'lostpointercapture'),
|
||||
onPanResponderReject: e => handleTouch(e, 'lostpointercapture')
|
||||
});
|
||||
setBind(responder.panHandlers);
|
||||
}, []);
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (root.current && width > 0 && height > 0) {
|
||||
async function run() {
|
||||
await root.current.configure({
|
||||
gl,
|
||||
events,
|
||||
shadows,
|
||||
linear,
|
||||
flat,
|
||||
legacy,
|
||||
orthographic,
|
||||
frameloop,
|
||||
performance,
|
||||
raycaster,
|
||||
camera,
|
||||
scene,
|
||||
// expo-gl can only render at native dpr/resolution
|
||||
// https://github.com/expo/expo-three/issues/39
|
||||
dpr: PixelRatio.get(),
|
||||
size: {
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left
|
||||
},
|
||||
// Pass mutable reference to onPointerMissed so it's free to update
|
||||
onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
|
||||
// Overwrite onCreated to apply RN bindings
|
||||
onCreated: state => {
|
||||
// Bind render to RN bridge
|
||||
const context = state.gl.getContext();
|
||||
const renderFrame = state.gl.render.bind(state.gl);
|
||||
state.gl.render = (scene, camera) => {
|
||||
renderFrame(scene, camera);
|
||||
context.endFrameEXP();
|
||||
};
|
||||
return onCreated == null ? void 0 : onCreated(state);
|
||||
}
|
||||
});
|
||||
root.current.render( /*#__PURE__*/jsx(Bridge, {
|
||||
children: /*#__PURE__*/jsx(ErrorBoundary, {
|
||||
set: setError,
|
||||
children: /*#__PURE__*/jsx(React.Suspense, {
|
||||
fallback: /*#__PURE__*/jsx(Block, {
|
||||
set: setBlock
|
||||
}),
|
||||
children: children != null ? children : null
|
||||
})
|
||||
})
|
||||
}));
|
||||
}
|
||||
run();
|
||||
}
|
||||
});
|
||||
React.useEffect(() => {
|
||||
if (canvas) {
|
||||
return () => unmountComponentAtNode(canvas);
|
||||
}
|
||||
}, [canvas]);
|
||||
return /*#__PURE__*/jsxs(_View, {
|
||||
...props,
|
||||
ref: viewRef,
|
||||
onLayout: onLayout,
|
||||
style: {
|
||||
flex: 1,
|
||||
...style
|
||||
},
|
||||
children: [width > 0 && /*#__PURE__*/jsx(GLView, {
|
||||
msaaSamples: antialias ? 4 : 0,
|
||||
onContextCreate: onContextCreate,
|
||||
style: StyleSheet.absoluteFill
|
||||
}), /*#__PURE__*/jsx(_View, {
|
||||
style: StyleSheet.absoluteFill,
|
||||
pointerEvents: pointerEvents,
|
||||
...bind
|
||||
})]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* A native canvas which accepts threejs elements as children.
|
||||
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
|
||||
*/
|
||||
function Canvas(props) {
|
||||
return /*#__PURE__*/jsx(FiberProvider, {
|
||||
children: /*#__PURE__*/jsx(CanvasImpl, {
|
||||
...props
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/** Default R3F event manager for react-native */
|
||||
function createTouchEvents(store) {
|
||||
const {
|
||||
handlePointer
|
||||
} = createEvents(store);
|
||||
const handleTouch = (event, name) => {
|
||||
event.persist()
|
||||
|
||||
// Apply offset
|
||||
;
|
||||
event.nativeEvent.offsetX = event.nativeEvent.locationX;
|
||||
event.nativeEvent.offsetY = event.nativeEvent.locationY;
|
||||
|
||||
// Emulate DOM event
|
||||
const callback = handlePointer(name);
|
||||
callback(event.nativeEvent);
|
||||
return true;
|
||||
};
|
||||
const responder = PanResponder.create({
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponder: () => true,
|
||||
onMoveShouldSetPanResponderCapture: () => true,
|
||||
onPanResponderTerminationRequest: () => true,
|
||||
onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
|
||||
onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
|
||||
onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
|
||||
onPanResponderEnd: (e, state) => {
|
||||
handleTouch(e, 'onPointerUp');
|
||||
if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
|
||||
},
|
||||
onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
|
||||
onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
|
||||
onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
|
||||
});
|
||||
return {
|
||||
priority: 1,
|
||||
enabled: true,
|
||||
compute(event, state, previous) {
|
||||
// https://github.com/pmndrs/react-three-fiber/pull/782
|
||||
// Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
|
||||
state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
|
||||
state.raycaster.setFromCamera(state.pointer, state.camera);
|
||||
},
|
||||
connected: undefined,
|
||||
handlers: responder.panHandlers,
|
||||
update: () => {
|
||||
var _internal$lastEvent;
|
||||
const {
|
||||
events,
|
||||
internal
|
||||
} = store.getState();
|
||||
if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
|
||||
handlePointer('onPointerMove')(internal.lastEvent.current);
|
||||
}
|
||||
},
|
||||
connect: () => {
|
||||
const {
|
||||
set,
|
||||
events
|
||||
} = store.getState();
|
||||
events.disconnect == null ? void 0 : events.disconnect();
|
||||
set(state => ({
|
||||
events: {
|
||||
...state.events,
|
||||
connected: true
|
||||
}
|
||||
}));
|
||||
},
|
||||
disconnect: () => {
|
||||
const {
|
||||
set
|
||||
} = store.getState();
|
||||
set(state => ({
|
||||
events: {
|
||||
...state.events,
|
||||
connected: false
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Conditionally import expo-file-system/legacy to support Expo 54
|
||||
const getFileSystem = () => {
|
||||
try {
|
||||
return require('expo-file-system/legacy');
|
||||
} catch {
|
||||
return require('expo-file-system');
|
||||
}
|
||||
};
|
||||
const fs = getFileSystem();
|
||||
|
||||
// http://stackoverflow.com/questions/105034
|
||||
function uuidv4() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
||||
const r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : r & 0x3 | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
async function getAsset(input) {
|
||||
if (typeof input === 'string') {
|
||||
var _NativeModules$BlobMo;
|
||||
// Don't process storage
|
||||
if (input.startsWith('file:')) return input;
|
||||
|
||||
// Unpack Blobs from react-native BlobManager
|
||||
// https://github.com/facebook/react-native/issues/22681#issuecomment-523258955
|
||||
if (input.startsWith('blob:') || input.startsWith((_NativeModules$BlobMo = NativeModules.BlobModule) == null ? void 0 : _NativeModules$BlobMo.BLOB_URI_SCHEME)) {
|
||||
const blob = await new Promise((res, rej) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', input);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.onload = () => res(xhr.response);
|
||||
xhr.onerror = rej;
|
||||
xhr.send();
|
||||
});
|
||||
const data = await new Promise((res, rej) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => res(reader.result);
|
||||
reader.onerror = rej;
|
||||
reader.readAsText(blob);
|
||||
});
|
||||
input = `data:${blob.type};base64,${data}`;
|
||||
}
|
||||
|
||||
// Create safe URI for JSI serialization
|
||||
if (input.startsWith('data:')) {
|
||||
const [header, data] = input.split(';base64,');
|
||||
const [, type] = header.split('/');
|
||||
const uri = fs.cacheDirectory + uuidv4() + `.${type}`;
|
||||
await fs.writeAsStringAsync(uri, data, {
|
||||
encoding: fs.EncodingType.Base64
|
||||
});
|
||||
return uri;
|
||||
}
|
||||
}
|
||||
|
||||
// Download bundler module or external URL
|
||||
const asset = await Asset.fromModule(input).downloadAsync();
|
||||
let uri = asset.localUri || asset.uri;
|
||||
|
||||
// Unpack assets in Android Release Mode
|
||||
if (!uri.includes(':')) {
|
||||
const file = `${fs.cacheDirectory}ExponentAsset-${asset.hash}.${asset.type}`;
|
||||
await fs.copyAsync({
|
||||
from: uri,
|
||||
to: file
|
||||
});
|
||||
uri = file;
|
||||
}
|
||||
return uri;
|
||||
}
|
||||
function polyfills() {
|
||||
// Patch Blob for ArrayBuffer and URL if unsupported
|
||||
// https://github.com/facebook/react-native/pull/39276
|
||||
// https://github.com/pmndrs/react-three-fiber/issues/3058
|
||||
if (Platform.OS !== 'web') {
|
||||
try {
|
||||
const blob = new Blob([new ArrayBuffer(4)]);
|
||||
const url = URL.createObjectURL(blob);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (_) {
|
||||
var _BlobManagerModule$de;
|
||||
const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
|
||||
const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
|
||||
const createObjectURL = URL.createObjectURL;
|
||||
URL.createObjectURL = function (blob) {
|
||||
if (blob.data._base64) {
|
||||
return `data:${blob.type};base64,${blob.data._base64}`;
|
||||
}
|
||||
return createObjectURL(blob);
|
||||
};
|
||||
const createFromParts = BlobManager.createFromParts;
|
||||
BlobManager.createFromParts = function (parts, options) {
|
||||
parts = parts.map(part => {
|
||||
if (part instanceof ArrayBuffer || ArrayBuffer.isView(part)) {
|
||||
part = fromByteArray(new Uint8Array(part));
|
||||
}
|
||||
return part;
|
||||
});
|
||||
const blob = createFromParts(parts, options);
|
||||
|
||||
// Always enable slow but safe path for iOS (previously for Android unauth)
|
||||
// https://github.com/pmndrs/react-three-fiber/issues/3075
|
||||
// if (!NativeModules.BlobModule?.BLOB_URI_SCHEME) {
|
||||
blob.data._base64 = '';
|
||||
for (const part of parts) {
|
||||
var _data$_base, _data;
|
||||
blob.data._base64 += (_data$_base = (_data = part.data) == null ? void 0 : _data._base64) != null ? _data$_base : part;
|
||||
}
|
||||
// }
|
||||
|
||||
return blob;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Don't pre-process urls, let expo-asset generate an absolute URL
|
||||
const extractUrlBase = THREE.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
|
||||
THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './';
|
||||
|
||||
// There's no Image in native, so create a data texture instead
|
||||
THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
||||
if (this.path && typeof url === 'string') url = this.path + url;
|
||||
const texture = new THREE.Texture();
|
||||
getAsset(url).then(async uri => {
|
||||
// https://github.com/expo/expo-three/pull/266
|
||||
const {
|
||||
width,
|
||||
height
|
||||
} = await new Promise((res, rej) => Image.getSize(uri, (width, height) => res({
|
||||
width,
|
||||
height
|
||||
}), rej));
|
||||
texture.image = {
|
||||
// Special case for EXGLImageUtils::loadImage
|
||||
data: {
|
||||
localUri: uri
|
||||
},
|
||||
width,
|
||||
height
|
||||
};
|
||||
texture.flipY = true; // Since expo-gl@12.4.0
|
||||
texture.needsUpdate = true;
|
||||
|
||||
// Force non-DOM upload for EXGL texImage2D
|
||||
// @ts-expect-error
|
||||
texture.isDataTexture = true;
|
||||
onLoad == null ? void 0 : onLoad(texture);
|
||||
}).catch(onError);
|
||||
return texture;
|
||||
};
|
||||
|
||||
// Fetches assets via FS
|
||||
THREE.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
|
||||
if (this.path && typeof url === 'string') url = this.path + url;
|
||||
this.manager.itemStart(url);
|
||||
getAsset(url).then(async uri => {
|
||||
const base64 = await fs.readAsStringAsync(uri, {
|
||||
encoding: fs.EncodingType.Base64
|
||||
});
|
||||
const data = Buffer.from(base64, 'base64');
|
||||
onLoad == null ? void 0 : onLoad(data.buffer);
|
||||
}).catch(error => {
|
||||
onError == null ? void 0 : onError(error);
|
||||
this.manager.itemError(url);
|
||||
}).finally(() => {
|
||||
this.manager.itemEnd(url);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (Platform.OS !== 'web') polyfills();
|
||||
|
||||
export { Canvas, createTouchEvents as events };
|
||||
5
node_modules/@react-three/fiber/native/package.json
generated
vendored
Normal file
5
node_modules/@react-three/fiber/native/package.json
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"main": "dist/react-three-fiber-native.cjs.js",
|
||||
"module": "dist/react-three-fiber-native.esm.js",
|
||||
"types": "dist/react-three-fiber-native.cjs.d.ts"
|
||||
}
|
||||
Reference in New Issue
Block a user