@react-three/drei 9.75.0 → 9.76.0

package/README.md

@@ -675,7 +675,73 @@ type FaceControlsApi = THREE.EventDispatcher & {
 }
 ```
 
-> **Note** <br>`FaceControls` uses [`requestVideoFrameCallback`](https://caniuse.com/mdn-api_htmlvideoelement_requestvideoframecallback), you may need [a polyfill](https://github.com/ThaUnknown/rvfc-polyfill) (for Firefox).
+##### FaceControls events
+
+Two `THREE.Event`s are dispatched on FaceControls ref object:
+
+- `{ type: "stream", stream: MediaStream }` -- when webcam's `.getUserMedia()` stream begins
+- `{ type: "videoFrame", texture: THREE.VideoTexture, time: number }` -- each time a new video frame is sent to the compositor (thanks to rVFC)
+
+> **Note** <br>rVFC
+>
+> Internally, `FaceControls` uses [`requestVideoFrameCallback`](https://caniuse.com/mdn-api_htmlvideoelement_requestvideoframecallback), you may need [a polyfill](https://github.com/ThaUnknown/rvfc-polyfill) (for Firefox).
+
+##### FaceControls[manualDetect]
+
+By default, `detect` is called on each `"videoFrame"`. You can disable this by `manualDetect` and call `detect` yourself.
+
+For example:
+
+```jsx
+const controls = useThree((state) => state.controls)
+
+const onVideoFrame = useCallback((event) => {
+  controls.detect(event.texture.source.data, event.time)
+}, [controls])
+
+<FaceControls makeDefault
+  manualDetect
+  onVideoFrame={onVideoFrame}
+/>
+```
+
+##### FaceControls[manualUpdate]
+
+By default, `update` is called each rAF `useFrame` frame, with damping. You can disable this by `manualUpdate` and update the camera yourself.
+
+For example:
+
+```jsx
+const controls = useThree((state) => state.controls)
+
+const [current] = useState(() => new THREE.Object3D())
+
+useFrame((_, delta) => {
+  const target = controls?.computeTarget()
+
+  if (target) {
+    //
+    // A. Define your own damping
+    //
+
+    const eps = 1e-9
+    easing.damp3(current.position, target.position, .25, delta, undefined, undefined, eps)
+    easing.dampE(current.rotation, target.rotation, .25, delta, undefined, undefined, eps)
+    camera.position.copy(current.position)
+    camera.rotation.copy(current.rotation)
+
+    //
+    // B. Or maybe with no damping at all?
+    //
+
+    // controls.update(delta, target)
+    // camera.position.copy(target.position)
+    // camera.rotation.copy(target.rotation)
+  }
+})
+
+<FaceControls makeDefault manualUpdate />
+```
 
 # Gizmos
 
@@ -3388,6 +3454,8 @@ const stencil = useMask(1, true)
 #### MeshPortalMaterial
 
 <p>
+  <a href="https://codesandbox.io/s/9m4tpc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/9m4tpc/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/drc6qg"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/drc6qg/screenshot.png" alt="Demo"/></a>
   <a href="https://codesandbox.io/s/ik11ln"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ik11ln/screenshot.png" alt="Demo"/></a>
 </p>
 
@@ -4019,7 +4087,7 @@ Treat the output of the shader like an alpha map where `1` is opaque and `0` is
 
 ```glsl
 gl_FragColor = vec4(vec3(1.), 1.); // Opaque
-gl_FragColor = vec4(vec3(0.), 1.); // Transparnet
+gl_FragColor = vec4(vec3(0.), 1.); // Transparent
 ```
 
 #### Environment

package/core/CameraControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=s(e),c=a(t),i=a(r),d=s(o);const l=r.forwardRef(((e,t)=>{r.useMemo((()=>{d.default.install({THREE:c}),n.extend({CameraControlsImpl:d.default})}),[]);const{camera:o,domElement:s,makeDefault:a,onStart:l,onEnd:f,onChange:v,regress:m,...E}=e,p=n.useThree((e=>e.camera)),b=n.useThree((e=>e.gl)),h=n.useThree((e=>e.invalidate)),L=n.useThree((e=>e.events)),T=n.useThree((e=>e.setEvents)),g=n.useThree((e=>e.set)),j=n.useThree((e=>e.get)),O=n.useThree((e=>e.performance)),q=o||p,w=s||L.connected||b.domElement,y=r.useMemo((()=>new d.default(q)),[q]);return n.useFrame(((e,t)=>{y.enabled&&y.update(t)}),-1),r.useEffect((()=>(y.connect(w),()=>{y.disconnect()})),[w,y]),i.useEffect((()=>{const e=e=>{h(),m&&O.regress(),v&&v(e)},t=e=>{l&&l(e)},r=e=>{f&&f(e)};return y.addEventListener("update",e),y.addEventListener("controlstart",t),y.addEventListener("controlend",r),y.addEventListener("control",e),y.addEventListener("transitionstart",e),y.addEventListener("wake",e),()=>{y.removeEventListener("update",e),y.removeEventListener("controlstart",t),y.removeEventListener("controlend",r),y.removeEventListener("control",e),y.removeEventListener("transitionstart",e),y.removeEventListener("wake",e)}}),[y,l,f,h,T,m,v]),r.useEffect((()=>{if(a){const e=j().controls;return g({controls:y}),()=>g({controls:e})}}),[a,y]),i.createElement("primitive",u.default({ref:t,object:y},E))}));exports.CameraControls=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=a(e),u=s(r),i=a(o);const l=r.forwardRef(((e,o)=>{r.useMemo((()=>{const e={Box3:t.Box3,MathUtils:{clamp:t.MathUtils.clamp},Matrix4:t.Matrix4,Quaternion:t.Quaternion,Raycaster:t.Raycaster,Sphere:t.Sphere,Spherical:t.Spherical,Vector2:t.Vector2,Vector3:t.Vector3,Vector4:t.Vector4};i.default.install({THREE:e}),n.extend({CameraControlsImpl:i.default})}),[]);const{camera:a,domElement:s,makeDefault:l,onStart:d,onEnd:f,onChange:m,regress:v,...E}=e,p=n.useThree((e=>e.camera)),h=n.useThree((e=>e.gl)),b=n.useThree((e=>e.invalidate)),L=n.useThree((e=>e.events)),T=n.useThree((e=>e.setEvents)),g=n.useThree((e=>e.set)),j=n.useThree((e=>e.get)),x=n.useThree((e=>e.performance)),M=a||p,y=s||L.connected||h.domElement,O=r.useMemo((()=>new i.default(M)),[M]);return n.useFrame(((e,t)=>{O.enabled&&O.update(t)}),-1),r.useEffect((()=>(O.connect(y),()=>{O.disconnect()})),[y,O]),r.useEffect((()=>{const e=e=>{b(),v&&x.regress(),m&&m(e)},t=e=>{d&&d(e)},r=e=>{f&&f(e)};return O.addEventListener("update",e),O.addEventListener("controlstart",t),O.addEventListener("controlend",r),O.addEventListener("control",e),O.addEventListener("transitionstart",e),O.addEventListener("wake",e),()=>{O.removeEventListener("update",e),O.removeEventListener("controlstart",t),O.removeEventListener("controlend",r),O.removeEventListener("control",e),O.removeEventListener("transitionstart",e),O.removeEventListener("wake",e)}}),[O,d,f,b,T,v,m]),r.useEffect((()=>{if(l){const e=j().controls;return g({controls:O}),()=>g({controls:e})}}),[l,O]),u.createElement("primitive",c.default({ref:o,object:O},E))}));exports.CameraControls=l;

package/core/CameraControls.d.ts

@@ -1,4 +1,4 @@
-import type { PerspectiveCamera, OrthographicCamera } from 'three';
+import { OrthographicCamera, PerspectiveCamera } from 'three';
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';

package/core/CameraControls.js

@@ -1,14 +1,31 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
-import * as THREE from 'three';
+import { Box3, MathUtils, Matrix4, Quaternion, Raycaster, Sphere, Spherical, Vector2, Vector3, Vector4 } from 'three';
 import * as React from 'react';
 import { forwardRef, useMemo, useEffect } from 'react';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';
 
 const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
+  // useMemo is used here instead of useEffect, otherwise the useMemo below runs first and throws
   useMemo(() => {
+    // to allow for tree shaking, we only import the subset of THREE that is used by camera-controls
+    // see https://github.com/yomotsu/camera-controls#important
+    const subsetOfTHREE = {
+      Box3,
+      MathUtils: {
+        clamp: MathUtils.clamp
+      },
+      Matrix4,
+      Quaternion,
+      Raycaster,
+      Sphere,
+      Spherical,
+      Vector2,
+      Vector3,
+      Vector4
+    };
     CameraControlsImpl.install({
-      THREE
+      THREE: subsetOfTHREE
     });
     extend({
       CameraControlsImpl
@@ -42,7 +59,7 @@ const CameraControls = /*#__PURE__*/forwardRef((props, ref) => {
     controls.connect(explDomElement);
     return () => void controls.disconnect();
   }, [explDomElement, controls]);
-  React.useEffect(() => {
+  useEffect(() => {
     const callback = e => {
       invalidate();
       if (regress) performance.regress();

package/core/CubeCamera.d.ts

@@ -1,7 +1,7 @@
 import { Texture } from 'three';
 import * as React from 'react';
 import { CubeCameraOptions } from './useCubeCamera';
-declare type Props = JSX.IntrinsicElements['group'] & {
+declare type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
     children: (tex: Texture) => React.ReactNode;
     frames?: number;
 } & CubeCameraOptions;