@react-three/fiber 8.8.9 → 8.8.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.8.11
+
+### Patch Changes
+
+- 2068f0cc: fix: events pointerlock, useLoader extension types
+
+## 8.8.10
+
+### Patch Changes
+
+- 00c24718: fix: invalidate pierced props
+
 ## 8.8.9
 
 ### Patch Changes

package/dist/declarations/src/core/hooks.d.ts

@@ -4,13 +4,16 @@ import { StateSelector, EqualityChecker } from 'zustand';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
-import { LoadingManager } from 'three';
 import { LocalState } from './renderer';
 export interface Loader<T> extends THREE.Loader {
     load(url: string, onLoad?: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): unknown;
 }
-export declare type Extensions = (loader: THREE.Loader) => void;
+export declare type LoaderProto<T> = new (...args: any) => Loader<T extends unknown ? any : T>;
+export declare type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
 export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
+export declare type Extensions<T extends {
+    prototype: LoaderProto<any>;
+}> = (loader: T['prototype']) => void;
 export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
 export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
 export declare function useInstanceHandle<O>(ref: React.MutableRefObject<O>): React.MutableRefObject<LocalState>;
@@ -18,8 +21,8 @@ export declare function useStore(): import("zustand").UseBoundStore<RootState, i
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-export declare function useLoader<T, U extends string | string[]>(Proto: new (manager?: LoadingManager) => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;
+export declare function useLoader<T, U extends string | string[], L extends LoaderProto<T>, R = LoaderReturnType<T, L>>(Proto: L, input: U, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<R, GLTF, GLTF & ObjectMap>[] : BranchingReturn<R, GLTF, GLTF & ObjectMap>;
 export declare namespace useLoader {
-    var preload: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions | undefined) => undefined;
-    var clear: <T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U) => void;
+    var preload: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U, extensions?: Extensions<L> | undefined) => undefined;
+    var clear: <T, U extends string | string[], L extends LoaderProto<T>>(Proto: L, input: U) => void;
 }

package/dist/{index-409682b7.cjs.prod.js → index-4592040d.cjs.prod.js}

@@ -283,7 +283,12 @@ function diffProps(instance, {
 
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
-    changes.push([key, value, false, entries]);
+    changes.push([key, value, false, entries]); // Reset pierced props
+
+    for (const prop in props) {
+      const value = props[prop];
+      if (prop.startsWith(`${key}-`)) changes.push([prop, value, false, prop.split('-')]);
+    }
   });
   const memoized = { ...props
   };
@@ -574,7 +579,7 @@ function createEvents(store) {
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
     }) // Filter out duplicates
     .filter(item => {
@@ -603,7 +608,7 @@ function createEvents(store) {
 
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
 
@@ -772,7 +777,7 @@ function createEvents(store) {
             internal
           } = store.getState();
 
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
             internal.capturedMap.delete(event.pointerId);

package/dist/{index-cd40f4c7.cjs.dev.js → index-b97b7ffd.cjs.dev.js}

@@ -283,7 +283,12 @@ function diffProps(instance, {
 
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
-    changes.push([key, value, false, entries]);
+    changes.push([key, value, false, entries]); // Reset pierced props
+
+    for (const prop in props) {
+      const value = props[prop];
+      if (prop.startsWith(`${key}-`)) changes.push([prop, value, false, prop.split('-')]);
+    }
   });
   const memoized = { ...props
   };
@@ -574,7 +579,7 @@ function createEvents(store) {
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
     }) // Filter out duplicates
     .filter(item => {
@@ -603,7 +608,7 @@ function createEvents(store) {
 
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
 
@@ -772,7 +777,7 @@ function createEvents(store) {
             internal
           } = store.getState();
 
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
             internal.capturedMap.delete(event.pointerId);

package/dist/{index-8c780a08.esm.js → index-b9d9a4a8.esm.js}

@@ -256,7 +256,12 @@ function diffProps(instance, {
 
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
-    changes.push([key, value, false, entries]);
+    changes.push([key, value, false, entries]); // Reset pierced props
+
+    for (const prop in props) {
+      const value = props[prop];
+      if (prop.startsWith(`${key}-`)) changes.push([prop, value, false, prop.split('-')]);
+    }
   });
   const memoized = { ...props
   };
@@ -547,7 +552,7 @@ function createEvents(store) {
     .sort((a, b) => {
       const aState = getRootState(a.object);
       const bState = getRootState(b.object);
-      if (!aState || !bState) return 0;
+      if (!aState || !bState) return a.distance - b.distance;
       return bState.events.priority - aState.events.priority || a.distance - b.distance;
     }) // Filter out duplicates
     .filter(item => {
@@ -576,7 +581,7 @@ function createEvents(store) {
 
     if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
       for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        intersections.push(captureData.intersection);
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
     }
 
@@ -745,7 +750,7 @@ function createEvents(store) {
             internal
           } = store.getState();
 
-          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
             internal.capturedMap.delete(event.pointerId);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-cd40f4c7.cjs.dev.js');
+var index = require('./index-b97b7ffd.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-409682b7.cjs.prod.js');
+var index = require('./index-4592040d.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-8c780a08.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-8c780a08.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-b9d9a4a8.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-b9d9a4a8.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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-cd40f4c7.cjs.dev.js');
+var index = require('../../dist/index-b97b7ffd.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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-409682b7.cjs.prod.js');
+var index = require('../../dist/index-4592040d.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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-8c780a08.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-8c780a08.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-b9d9a4a8.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-b9d9a4a8.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.8.9",
+  "version": "8.8.11",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
-    "its-fine": "^1.0.4",
+    "its-fine": "^1.0.6",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
     "scheduler": "^0.21.0",

package/readme.md

@@ -10,112 +10,160 @@
 
 react-three-fiber is a <a href="https://reactjs.org/docs/codebase-overview.html#renderers">React renderer</a> for threejs.
 
+Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem.
+
 ```bash
 npm install three @react-three/fiber
 ```
 
-### Why?
-
-Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can tap into React's ecosystem.
-
 #### Does it have limitations?
 
-None. Everything that works in threejs will work here without exception.
+None. Everything that works in Threejs will work here without exception.
 
-#### Can it keep up with frequent updates to threejs?
+#### Is it slower than plain Threejs?
 
-Yes, because it merely expresses threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. There is no hard dependency on a particular threejs version, it does not wrap or duplicate a single threejs class.
+No. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to Reacts scheduling abilities.
 
-#### Is it slower than plain threejs?
+#### Can it keep up with frequent feature updates to Threejs?
 
-There is no additional overhead. Components participate in the renderloop outside of React.
+Yes. It merely expresses Threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. If a new Threejs version adds, removes or changes features, it will be available to you instantly without depending on updates to this library.
 
 ### What does it look like?
 
 <table>
-  <tr>
-    <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href="https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js">live demo</a>).</td>
-    <td>
-      <a href="https://codesandbox.io/s/rrppl0y8l4">
-        <img src="https://i.imgur.com/sS4ArrZ.gif" /></td>
-      </a>
-  </tr>
+  <tbody>
+    <tr>
+      <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href="https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js">live demo</a>).</td>
+      <td>
+        <a href="https://codesandbox.io/s/rrppl0y8l4">
+          <img src="https://i.imgur.com/sS4ArrZ.gif" />
+        </a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-#### Imports first
-
 ```jsx
+import { createRoot } from 'react-dom/client'
 import React, { useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
 import { Canvas, useFrame } from '@react-three/fiber'
-```
 
-#### Define a component
-
-```jsx
 function Box(props) {
-  // This reference will give us direct access to the mesh
-  const mesh = useRef()
-  // Set up state for the hovered and active state
-  const [hovered, setHover] = useState(false)
-  const [active, setActive] = useState(false)
-  // Rotate mesh every frame, this is outside of React without overhead
-  useFrame(() => (mesh.current.rotation.x += 0.01))
-
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef()
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
+  // Return the view, these are regular Threejs elements expressed in JSX
   return (
     <mesh
       {...props}
-      ref={mesh}
-      scale={active ? 1.5 : 1}
-      onClick={(event) => setActive(!active)}
-      onPointerOver={(event) => setHover(true)}
-      onPointerOut={(event) => setHover(false)}>
-      <boxGeometry args={[1, 2, 3]} />
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => hover(true)}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
       <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
     </mesh>
   )
 }
+
+createRoot(document.getElementById('root')).render(
+  <Canvas>
+    <ambientLight />
+    <pointLight position={[10, 10, 10]} />
+    <Box position={[-1.2, 0, 0]} />
+    <Box position={[1.2, 0, 0]} />
+  </Canvas>,
+)
 ```
 
-#### Compose the scene
+<details>
+  <summary>Show TypeScript example</summary>
+  
+```bash
+npm install @types/three
+```
 
-Either use `Canvas`, which you can think of as a portal to threejs inside your regular dom graph. Everything within it is a [native threejs element](https://threejs.org/docs). If you want to mix Webgl and Html (react-dom) this is what you should use.
+```tsx
+import * as THREE from 'three'
+import { createRoot } from 'react-dom/client'
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'
 
-```jsx
-ReactDOM.render(
+function Box(props: ThreeElements['mesh']) {
+  const ref = useRef<THREE.Mesh>(null!)
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => hover(true)}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render(
   <Canvas>
     <ambientLight />
     <pointLight position={[10, 10, 10]} />
     <Box position={[-1.2, 0, 0]} />
     <Box position={[1.2, 0, 0]} />
   </Canvas>,
-  document.getElementById('root'),
 )
 ```
 
-Or use react-three-fibers own `render` function, which is a little more low-level but could save you the extra cost of carrying react-dom. It renders into a dom `canvas` element. Use this for Webgl-only apps.
+Live demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx
 
-```jsx
-import { render } from '@react-three/fiber'
+</details>
+
+<details>
+  <summary>Show React Native example</summary>
+
+This example relies on react 18 and uses `expo-cli`, but you can create a bare project with their template or with the `react-native` CLI.
 
-render(<Scene />, document.querySelector('canvas'))
+```bash
+# Install expo-cli, this will create our app
+npm install expo-cli -g
+# Create app and cd into it
+expo init my-app
+cd my-app
+# Install dependencies
+npm install three @react-three/fiber@beta react@rc
+# Start
+expo start
 ```
 
-<details>
-  <summary>Show TypeScript example</summary>
+Some configuration may be required to tell the Metro bundler about your assets if you use `useLoader` or Drei abstractions like `useGLTF` and `useTexture`:
 
-```tsx
-import { Canvas, MeshProps, useFrame } from '@react-three/fiber'
+```js
+// metro.config.js
+module.exports = {
+  resolver: {
+    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
+    assetExts: ['glb', 'png', 'jpg'],
+  },
+}
+```
 
-const Box: React.FC<MeshProps> = (props) => {
-  // This reference will give us direct access to the mesh
-  const mesh = useRef<THREE.Mesh>(null!)
-  // Set up state for the hovered and active state
+```tsx
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber/native'
+function Box(props) {
+  const mesh = useRef(null)
   const [hovered, setHover] = useState(false)
   const [active, setActive] = useState(false)
-  // Rotate mesh every frame, this is outside of React without overhead
-  useFrame(() => (mesh.current.rotation.x += 0.01))
-
+  useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
   return (
     <mesh
       {...props}
@@ -124,32 +172,32 @@ const Box: React.FC<MeshProps> = (props) => {
       onClick={(event) => setActive(!active)}
       onPointerOver={(event) => setHover(true)}
       onPointerOut={(event) => setHover(false)}>
-      <boxGeometry args={[1, 2, 3]} />
+      <boxGeometry args={[1, 1, 1]} />
       <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
     </mesh>
   )
 }
-
-ReactDOM.render(
-  <Canvas>
-    <ambientLight />
-    <pointLight position={[10, 10, 10]} />
-    <Box position={[-1.2, 0, 0]} />
-    <Box position={[1.2, 0, 0]} />
-  </Canvas>,
-  document.getElementById('root'),
-)
+export default function App() {
+  return (
+    <Canvas>
+      <ambientLight />
+      <pointLight position={[10, 10, 10]} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+    </Canvas>
+  )
+}
 ```
 
 </details>
 
 ---
 
-# Documentation
+# Documentation, tutorials, examples
+
+Visit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)
 
-- [api.md](/markdown/api.md)
-- [pitfalls.md](/markdown/pitfalls.md)
-- [testing.md](/packages/test-renderer)
+<a href="https://docs.pmnd.rs/react-three-fiber"><img src="/docs/preview.jpg"></a>
 
 # Fundamentals
 
@@ -158,13 +206,14 @@ You need to be versed in both React and Threejs before rushing into this. If you
 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/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.
+4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber/API) to see what the various settings and hooks do.
 
 Some reading material:
 
 - [Threejs-docs](https://threejs.org/docs)
 - [Threejs-examples](https://threejs.org/examples)
 - [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)
+- [three.js-journey](https://threejs-journey.com)
 - [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_)
@@ -177,9 +226,11 @@ Some reading material:
 - [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) &ndash; flexbox for react-three-fiber
 - [`@react-three/xr`](https://github.com/pmndrs/react-xr) &ndash; VR/AR controllers and events
 - [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) &ndash; physics based hooks
+- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) &ndash; real a11y for your scene
 - [`zustand`](https://github.com/pmndrs/zustand) &ndash; state management
 - [`react-spring`](https://github.com/pmndrs/react-spring) &ndash; a spring-physics-based animation library
 - [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) &ndash; mouse/touch gestures
+- [`leva`](https://github.com/pmndrs/leva) &ndash; create GUI controls in seconds
 
 # How to contribute