@react-three/fiber 8.2.3 → 8.4.0

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,11 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+    eventTarget?: HTMLElement;
+    eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen';
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-201bf0bf.esm.js → index-212b30d8.esm.js}

@@ -45,8 +45,8 @@ class ErrorBoundary extends React.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -849,7 +849,7 @@ function createRenderer(_roots, _getEventPriority) {
     }
 
     if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
       instance = prepare(object, {
         type,
@@ -861,11 +861,11 @@ function createRenderer(_roots, _getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
       } // Throw if an object or literal was passed for args
 
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -1103,7 +1103,7 @@ function createRenderer(_roots, _getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1566,7 +1566,7 @@ function createLoop(roots) {
 
 function useStore() {
   const store = React.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1610,7 +1610,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**

package/dist/{index-942a305b.cjs.dev.js → index-bcd3e47c.cjs.dev.js}

@@ -72,8 +72,8 @@ class ErrorBoundary extends React__namespace.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -876,7 +876,7 @@ function createRenderer(_roots, _getEventPriority) {
     }
 
     if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
       instance = prepare(object, {
         type,
@@ -888,11 +888,11 @@ function createRenderer(_roots, _getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
       } // Throw if an object or literal was passed for args
 
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -1130,7 +1130,7 @@ function createRenderer(_roots, _getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1593,7 +1593,7 @@ function createLoop(roots) {
 
 function useStore() {
   const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1637,7 +1637,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**

package/dist/{index-1be7d4d7.cjs.prod.js → index-e086bd20.cjs.prod.js}

@@ -72,8 +72,8 @@ class ErrorBoundary extends React__namespace.Component {
     };
   }
 
-  componentDidCatch(error) {
-    this.props.set(error);
+  componentDidCatch(err) {
+    this.props.set(err);
   }
 
   render() {
@@ -876,7 +876,7 @@ function createRenderer(_roots, _getEventPriority) {
     }
 
     if (type === 'primitive') {
-      if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
       const object = props.object;
       instance = prepare(object, {
         type,
@@ -888,11 +888,11 @@ function createRenderer(_roots, _getEventPriority) {
       const target = catalogue[name];
 
       if (!target) {
-        throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`;
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
       } // Throw if an object or literal was passed for args
 
 
-      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!'); // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -1130,7 +1130,7 @@ function createRenderer(_roots, _getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!'); // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1593,7 +1593,7 @@ function createLoop(roots) {
 
 function useStore() {
   const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
   return store;
 }
 /**
@@ -1637,7 +1637,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
       if (data.scene) Object.assign(data, buildGraph(data.scene));
       res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+    }, onProgress, error => reject(new Error(`Could not load ${input}: ${error.message})`))))));
   };
 }
 /**

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-942a305b.cjs.dev.js');
+var index = require('./index-bcd3e47c.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -126,6 +126,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   style,
   gl,
   events = createPointerEvents,
+  eventTarget,
+  eventPrefix,
   shadows,
   linear,
   flat,
@@ -184,7 +186,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
+        // Connect to event source
+        state.events.connect == null ? void 0 : state.events.connect(eventTarget ? eventTarget : divRef.current); // Set up compute function
+
+        if (eventPrefix) {
+          state.setEvents({
+            compute: (event, state) => {
+              const x = event[eventPrefix + 'X'];
+              const y = event[eventPrefix + 'Y'];
+              state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+              state.raycaster.setFromCamera(state.pointer, state.camera);
+            }
+          });
+        } // Call onCreated callback
+
+
         onCreated == null ? void 0 : onCreated(state);
       }
     });

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-1be7d4d7.cjs.prod.js');
+var index = require('./index-e086bd20.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -126,6 +126,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   style,
   gl,
   events = createPointerEvents,
+  eventTarget,
+  eventPrefix,
   shadows,
   linear,
   flat,
@@ -184,7 +186,21 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
+        // Connect to event source
+        state.events.connect == null ? void 0 : state.events.connect(eventTarget ? eventTarget : divRef.current); // Set up compute function
+
+        if (eventPrefix) {
+          state.setEvents({
+            compute: (event, state) => {
+              const x = event[eventPrefix + 'X'];
+              const y = event[eventPrefix + 'Y'];
+              state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+              state.raycaster.setFromCamera(state.pointer, state.camera);
+            }
+          });
+        } // Call onCreated callback
+
+
         onCreated == null ? void 0 : onCreated(state);
       }
     });

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-201bf0bf.esm.js';
-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, c as createEvents, 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 './index-201bf0bf.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-212b30d8.esm.js';
+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, c as createEvents, 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 './index-212b30d8.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -99,6 +99,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   style,
   gl,
   events = createPointerEvents,
+  eventTarget,
+  eventPrefix,
   shadows,
   linear,
   flat,
@@ -157,7 +159,21 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
+        // Connect to event source
+        state.events.connect == null ? void 0 : state.events.connect(eventTarget ? eventTarget : divRef.current); // Set up compute function
+
+        if (eventPrefix) {
+          state.setEvents({
+            compute: (event, state) => {
+              const x = event[eventPrefix + 'X'];
+              const y = event[eventPrefix + 'Y'];
+              state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+              state.raycaster.setFromCamera(state.pointer, state.camera);
+            }
+          });
+        } // Call onCreated callback
+
+
         onCreated == null ? void 0 : onCreated(state);
       }
     });

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-942a305b.cjs.dev.js');
+var index = require('../../dist/index-bcd3e47c.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -146,7 +146,7 @@ function getAsset(input) {
       return expAsset.fromModule(input);
 
     default:
-      throw 'Invalid asset! Must be a URI or module.';
+      throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
 
@@ -274,7 +274,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
+  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
 

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-1be7d4d7.cjs.prod.js');
+var index = require('../../dist/index-e086bd20.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -146,7 +146,7 @@ function getAsset(input) {
       return expAsset.fromModule(input);
 
     default:
-      throw 'Invalid asset! Must be a URI or module.';
+      throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
 
@@ -274,7 +274,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
+  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
 

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

@@ -1,5 +1,5 @@
-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-201bf0bf.esm.js';
-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-201bf0bf.esm.js';
+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-212b30d8.esm.js';
+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-212b30d8.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -119,7 +119,7 @@ function getAsset(input) {
       return expAsset.fromModule(input);
 
     default:
-      throw 'Invalid asset! Must be a URI or module.';
+      throw new Error('R3F: Invalid asset! Must be a URI or module.');
   }
 }
 
@@ -247,7 +247,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   React.useImperativeHandle(forwardedRef, () => viewRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
-  const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
+  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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.2.3",
+  "version": "8.4.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",

package/readme.md

@@ -164,7 +164,7 @@ Some reading material:
 
 - [Threejs-docs](https://threejs.org/docs)
 - [Threejs-examples](https://threejs.org/examples)
-- [Threejs-fundamentals](https://threejsfundamentals.org)
+- [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)
 - [Discover Threejs](https://discoverthreejs.com)
 - [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices
 - [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\_](https://twitter.com/dghez_)