@react-three/fiber 8.0.0-alpha-09 → 8.0.0-beta-03

package/native/dist/react-three-fiber-native.esm.js

@@ -0,0 +1,537 @@
+import { c as createEvents, s as buildGraph, v as is, a as createLoop, b as createRenderer, e as createStore, f as context, g as dispose, i as isRenderer, h as extend, p as pick, o as omit } from '../../dist/hooks-15c12e3e.esm.js';
+export { t as ReactThreeFiber, k as addAfterEffect, j as addEffect, l as addTail, f as context, g as dispose, h as extend, n as useFrame, q as useGraph, u as useStore, m as useThree } from '../../dist/hooks-15c12e3e.esm.js';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+import { PixelRatio, View, StyleSheet } from 'react-native';
+import { GLView } from 'expo-gl';
+import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
+import Pressability from 'react-native/Libraries/Pressability/Pressability';
+import { Asset } from 'expo-asset';
+import { readAsStringAsync } from 'expo-file-system';
+import { decode } from 'base64-arraybuffer';
+import { suspend, preload, clear } from 'suspend-react';
+import 'react-reconciler';
+import 'scheduler';
+import 'zustand';
+
+// @ts-ignore
+const EVENTS = {
+  PRESS: 'onPress',
+  PRESSIN: 'onPressIn',
+  PRESSOUT: 'onPressOut',
+  LONGPRESS: 'onLongPress',
+  HOVERIN: 'onHoverIn',
+  HOVEROUT: 'onHoverOut',
+  PRESSMOVE: 'onPressMove'
+};
+const DOM_EVENTS = {
+  [EVENTS.PRESS]: 'onClick',
+  [EVENTS.PRESSIN]: 'onPointerDown',
+  [EVENTS.PRESSOUT]: 'onPointerUp',
+  [EVENTS.LONGPRESS]: 'onDoubleClick',
+  [EVENTS.HOVERIN]: 'onPointerOver',
+  [EVENTS.HOVEROUT]: 'onPointerOut',
+  [EVENTS.PRESSMOVE]: 'onPointerMove'
+}; // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
+// Gives React a clue as to how import the current interaction is
+
+function getEventPriority() {
+  var _window, _window$event;
+
+  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+
+  switch (name) {
+    case EVENTS.PRESS:
+    case EVENTS.PRESSIN:
+    case EVENTS.PRESSOUT:
+    case EVENTS.LONGPRESS:
+      return DiscreteEventPriority;
+
+    case EVENTS.HOVERIN:
+    case EVENTS.HOVEROUT:
+    case EVENTS.PRESSMOVE:
+      return ContinuousEventPriority;
+
+    default:
+      return DefaultEventPriority;
+  }
+}
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+
+  const handleTouch = (event, name) => {
+    event.persist() // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.pageX;
+    event.nativeEvent.offsetY = event.nativeEvent.pageY; // Emulate DOM event
+
+    const callback = handlePointer(DOM_EVENTS[name]);
+    return callback(event.nativeEvent);
+  };
+
+  return {
+    connected: false,
+    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
+      [name]: event => handleTouch(event, name)
+    }), {}),
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      const manager = new Pressability(events == null ? void 0 : events.handlers);
+      set(state => ({
+        events: { ...state.events,
+          connected: manager
+        }
+      }));
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
+          }
+        }));
+      }
+    }
+  };
+}
+
+/**
+ * Generates an asset based on input type.
+ */
+
+const getAsset = input => {
+  if (input instanceof Asset) return input;
+
+  switch (typeof input) {
+    case 'string':
+      return Asset.fromURI(input);
+
+    case 'number':
+      return Asset.fromModule(input);
+
+    default:
+      throw 'Invalid asset! Must be a URI or module.';
+  }
+};
+/**
+ * Downloads from a local URI and decodes into an ArrayBuffer.
+ */
+
+
+const toBuffer = async localUri => readAsStringAsync(localUri, {
+  encoding: 'base64'
+}).then(decode);
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(entry => new Promise(async (res, reject) => {
+      // Construct URL
+      const url = typeof entry === 'string' ? loader.path + entry : entry; // There's no Image in native, so we create & pass a data texture instead
+
+      if (loader instanceof THREE.TextureLoader) {
+        const asset = await getAsset(url).downloadAsync();
+        const texture = new THREE.Texture();
+        texture.isDataTexture = true;
+        texture.image = {
+          data: asset,
+          width: asset.width,
+          height: asset.height
+        };
+        texture.needsUpdate = true;
+        return res(texture);
+      } // Do similar for CubeTextures
+
+
+      if (loader instanceof THREE.CubeTextureLoader) {
+        const texture = new THREE.CubeTexture();
+        texture.isDataTexture = true;
+        texture.images = await Promise.all(url.map(async src => {
+          const asset = await getAsset(src).downloadAsync();
+          return {
+            data: asset,
+            width: asset.width,
+            height: asset.height
+          };
+        }));
+        texture.needsUpdate = true;
+        return res(texture);
+      } // If asset is external and not an Image, load it
+
+
+      if (url.startsWith != null && url.startsWith('http') && Proto.prototype.hasOwnProperty('load')) {
+        return loader.load(entry, data => {
+          if (data.scene) Object.assign(data, buildGraph(data.scene));
+          res(data);
+        }, onProgress, error => reject(`Could not load ${url}: ${error.message}`));
+      } // Otherwise, create a localUri and a file buffer
+
+
+      const {
+        localUri
+      } = await getAsset(url).downloadAsync();
+      const arrayBuffer = await toBuffer(localUri); // Parse it
+
+      const parsed = loader.parse == null ? void 0 : loader.parse(arrayBuffer, undefined, data => {
+        if (data.scene) Object.assign(data, buildGraph(data.scene));
+        res(data);
+      }, error => reject(`Could not load ${url}: ${error.message}`)); // Respect synchronous parsers which don't have callbacks
+
+      if (parsed) return res(parsed);
+    })));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([Proto, ...keys]);
+};
+
+const roots = new Map();
+const {
+  invalidate,
+  advance
+} = createLoop(roots);
+const {
+  reconciler,
+  applyProps
+} = createRenderer(roots, getEventPriority);
+
+const createRendererInstance = (gl, context) => {
+  // Create canvas shim
+  const canvas = {
+    width: context.drawingBufferWidth,
+    height: context.drawingBufferHeight,
+    style: {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    clientHeight: context.drawingBufferHeight
+  }; // If a renderer is specified, return it
+
+  const customRenderer = typeof gl === 'function' ? gl(canvas, context) : gl;
+  if (isRenderer(customRenderer)) return customRenderer; // Create renderer and pass our canvas and its context
+
+  const renderer = new THREE.WebGLRenderer({
+    powerPreference: 'high-performance',
+    antialias: true,
+    alpha: true,
+    ...gl,
+    canvas,
+    context
+  }); // Set color management
+
+  renderer.outputEncoding = THREE.sRGBEncoding;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping; // Set GL props
+
+  if (gl) applyProps(renderer, gl); // Bind render to RN bridge
+
+  if (context.endFrameEXP) {
+    const renderFrame = renderer.render.bind(renderer);
+
+    renderer.render = (scene, camera) => {
+      renderFrame(scene, camera);
+      context.endFrameEXP();
+    };
+  }
+
+  return renderer;
+};
+
+function createRoot(context, config) {
+  return {
+    render: element => {
+      var _store;
+
+      let {
+        gl,
+        size = {
+          width: 0,
+          height: 0
+        },
+        events,
+        onCreated,
+        ...props
+      } = config || {};
+      let root = roots.get(context);
+      let fiber = root == null ? void 0 : root.fiber;
+      let store = root == null ? void 0 : root.store;
+      let state = (_store = store) == null ? void 0 : _store.getState();
+
+      if (fiber && state) {
+        // When a root was found, see if any fundamental props must be changed or exchanged
+        // Check size
+        if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+
+        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
+        // Changes to the color-space
+
+        const linearChanged = props.linear !== state.internal.lastProps.linear;
+
+        if (linearChanged) {
+          unmountComponentAtNode(context);
+          fiber = undefined;
+        }
+      }
+
+      if (!fiber) {
+        // If no root has been found, make one
+        // Create gl
+        const glRenderer = createRendererInstance(gl, context); // Create store
+
+        store = createStore(applyProps, invalidate, advance, {
+          gl: glRenderer,
+          size,
+          ...props,
+          // expo-gl can only render at native dpr/resolution
+          // https://github.com/expo/expo-three/issues/39
+          dpr: PixelRatio.get()
+        });
+        const state = store.getState(); // Create renderer
+
+        fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
+
+        roots.set(context, {
+          fiber,
+          store
+        }); // Store event manager internally and connect it
+
+        if (events) {
+          var _state$get$events$con, _state$get$events;
+
+          state.set({
+            events: events(store)
+          });
+          (_state$get$events$con = (_state$get$events = state.get().events).connect) == null ? void 0 : _state$get$events$con.call(_state$get$events, context);
+        }
+      }
+
+      if (store && fiber) {
+        reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
+          store: store,
+          element: element,
+          onCreated: onCreated
+        }), fiber, null, () => undefined);
+        return store;
+      } else {
+        throw 'Error creating root!';
+      }
+    },
+    unmount: () => unmountComponentAtNode(context)
+  };
+}
+
+function render(element, context, config = {}) {
+  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
+  return createRoot(context, config).render(element);
+}
+
+function Provider({
+  store,
+  element,
+  onCreated
+}) {
+  React.useEffect(() => {
+    const state = store.getState(); // Flag the canvas active, rendering will now begin
+
+    state.set(state => ({
+      internal: { ...state.internal,
+        active: true
+      }
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+
+    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(context.Provider, {
+    value: store
+  }, element);
+}
+
+function unmountComponentAtNode(context, callback) {
+  const root = roots.get(context);
+  const fiber = root == null ? void 0 : root.fiber;
+
+  if (fiber) {
+    const state = root == null ? void 0 : root.store.getState();
+    if (state) state.internal.active = false;
+    reconciler.updateContainer(null, fiber, null, () => {
+      if (state) {
+        setTimeout(() => {
+          try {
+            var _state$gl, _state$gl$renderLists, _state$gl2;
+
+            state.events.disconnect == null ? void 0 : state.events.disconnect();
+            (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
+            (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
+            dispose(state);
+            roots.delete(context);
+            if (callback) callback(context);
+          } catch (e) {
+            /* ... */
+          }
+        }, 500);
+      }
+    });
+  }
+}
+
+const act = React.unstable_act;
+
+function createPortal(children, container) {
+  return reconciler.createPortal(children, container, null, null);
+}
+
+reconciler.injectIntoDevTools({
+  bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
+  rendererPackageName: '@react-three/fiber',
+  version: '18.0.0'
+});
+
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+
+function Block({
+  set
+}) {
+  React.useLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, [set]);
+  return null;
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      error: false
+    };
+  }
+
+  componentDidCatch(error) {
+    this.props.set(error);
+  }
+
+  render() {
+    return this.state.error ? null : this.props.children;
+  }
+
+}
+
+ErrorBoundary.getDerivedStateFromError = () => ({
+  error: true
+});
+
+const Canvas = /*#__PURE__*/React.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  nativeRef_EXPERIMENTAL,
+  onContextCreate,
+  ...props
+}, forwardedRef) => {
+  // 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 [{
+    width,
+    height
+  }, setSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const [context, setContext] = React.useState(null);
+  const [bind, setBind] = React.useState();
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const viewProps = omit(props, CANVAS_PROPS);
+  const [block, setBlock] = React.useState(false);
+  const [error, setError] = React.useState(false); // 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 onLayout = React.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      width,
+      height
+    });
+  }, []);
+
+  if (width > 0 && height > 0 && context) {
+    const store = createRoot(context, { ...canvasProps,
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents
+    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+    const state = store.getState();
+    setBind(state.events.connected.getEventHandlers());
+  }
+
+  React.useEffect(() => {
+    return () => unmountComponentAtNode(context);
+  }, [context]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
+    nativeRef_EXPERIMENTAL: ref => {
+      if (nativeRef_EXPERIMENTAL && !nativeRef_EXPERIMENTAL.current) {
+        nativeRef_EXPERIMENTAL.current = ref;
+      }
+    },
+    onContextCreate: async gl => {
+      await (onContextCreate == null ? void 0 : onContextCreate(gl));
+      setContext(gl);
+    },
+    style: StyleSheet.absoluteFill
+  }));
+});
+
+export { Canvas, roots as _roots, act, advance, applyProps, createPortal, createRoot, createTouchEvents as events, invalidate, reconciler, render, unmountComponentAtNode, useLoader };

package/native/package.json

@@ -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"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.0-alpha-09",
+  "version": "8.0.0-beta-03",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "author": "Paul Henschel (https://github.com/drcmda)",
   "license": "MIT",
   "maintainers": [
-    "Josh Ellis (https://github.com/joshuaellis)"
+    "Josh Ellis (https://github.com/joshuaellis)",
+    "Cody Bennett (https://github.com/codyjasonbennett)"
   ],
   "bugs": {
     "url": "https://github.com/pmndrs/react-three-fiber/issues"
@@ -29,11 +30,12 @@
   "main": "dist/react-three-fiber.cjs.js",
   "module": "dist/react-three-fiber.esm.js",
   "types": "dist/react-three-fiber.cjs.d.ts",
-  "react-native": "dist/native.js",
+  "react-native": "native/dist/react-three-fiber-native.cjs.js",
   "sideEffects": false,
   "preconstruct": {
     "entrypoints": [
-      "index.tsx"
+      "index.tsx",
+      "native.tsx"
     ]
   },
   "scripts": {
@@ -41,23 +43,31 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "base64-arraybuffer": "^1.0.1",
+    "expo-asset": "^8.4.3",
+    "expo-file-system": "^13.0.3",
+    "expo-gl": "^11.0.3",
     "react-merge-refs": "^1.1.0",
-    "react-reconciler": "0.0.0-experimental-031abd24b-20210907",
-    "react-use-measure": "^2.0.4",
+    "react-reconciler": "^0.27.0-rc.0",
+    "react-use-measure": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "scheduler": "0.0.0-experimental-031abd24b-20210907",
-    "use-asset": "2.0.0-alpha-00",
+    "scheduler": "0.21.0-rc.0",
+    "suspend-react": "^0.0.8",
     "utility-types": "^3.10.0",
     "zustand": "^3.5.10"
   },
   "peerDependencies": {
     "react": ">=18.0",
     "react-dom": ">=18.0",
+    "react-native": ">=0.64",
     "three": ">=0.132"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
     }
   }
 }

package/readme.md

@@ -156,7 +156,7 @@ ReactDOM.render(
 You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official [React docs](https://reactjs.org/docs/getting-started.html), especially [the section about hooks](https://reactjs.org/docs/hooks-reference.html). As for Threejs, make sure you at least glance over the following links:
 
 1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
-2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/react-spring/react-three-fiber#what-does-it-look-like).
+2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
 3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
 4. Try changing some values, scroll though our [Api](/markdown/api.md) to see what the various settings and hooks do.
 
@@ -171,15 +171,15 @@ Some reading material:
 
 # Ecosystem
 
-- [`@react-three/gltfjsx`](https://github.com/react-spring/gltfjsx) – turns GLTFs into JSX components
-- [`@react-three/drei`](https://github.com/react-spring/drei) – useful helpers for react-three-fiber
-- [`@react-three/postprocessing`](https://github.com/react-spring/react-postprocessing) – post-processing effects
-- [`@react-three/flex`](https://github.com/react-spring/react-three-flex) – flexbox for react-three-fiber
-- [`@react-three/xr`](https://github.com/react-spring/react-xr) – VR/AR controllers and events
-- [`@react-three/cannon`](https://github.com/react-spring/use-cannon) – physics based hooks
-- [`zustand`](https://github.com/react-spring/zustand) – state management
-- [`react-spring`](https://github.com/react-spring/react-spring) – a spring-physics-based animation library
-- [`react-use-gesture`](https://github.com/react-spring/react-use-gesture) – mouse/touch gestures
+- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) – turns GLTFs into JSX components
+- [`@react-three/drei`](https://github.com/pmndrs/drei) – useful helpers for react-three-fiber
+- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) – post-processing effects
+- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) – flexbox for react-three-fiber
+- [`@react-three/xr`](https://github.com/pmndrs/react-xr) – VR/AR controllers and events
+- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) – physics based hooks
+- [`zustand`](https://github.com/pmndrs/zustand) – state management
+- [`react-spring`](https://github.com/pmndrs/react-spring) – a spring-physics-based animation library
+- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) – mouse/touch gestures
 
 # How to contribute
 

package/__mocks__/react-use-measure/index.ts

@@ -1,22 +0,0 @@
-import * as React from 'react'
-
-export default function useMeasure() {
-  const element = React.useRef<HTMLElement | null>(null)
-  const [bounds] = React.useState({
-    left: 0,
-    top: 0,
-    width: 1280,
-    height: 800,
-    bottom: 0,
-    right: 0,
-    x: 0,
-    y: 0,
-  })
-  const ref = (node: HTMLElement) => {
-    if (!node || element.current) {
-      return
-    }
-    element.current = node
-  }
-  return [ref, bounds]
-}