@react-three/fiber 8.3.1 → 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/react-three-fiber.cjs.dev.js

@@ -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

@@ -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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.3.1",
+  "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_)