@react-three/drei 9.83.8 → 9.84.0

package/core/ContactShadows.js

@@ -34,27 +34,27 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     const blurPlane = new THREE.Mesh(planeGeometry);
     const depthMaterial = new THREE.MeshDepthMaterial();
     depthMaterial.depthTest = depthMaterial.depthWrite = false;
-
     depthMaterial.onBeforeCompile = shader => {
-      shader.uniforms = { ...shader.uniforms,
+      shader.uniforms = {
+        ...shader.uniforms,
         ucolor: {
           value: new THREE.Color(color)
         }
       };
-      shader.fragmentShader = shader.fragmentShader.replace(`void main() {`, //
+      shader.fragmentShader = shader.fragmentShader.replace(`void main() {`,
+      //
       `uniform vec3 ucolor;
            void main() {
           `);
-      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', // Colorize the shadow, multiply by the falloff so that the center can remain darker
+      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+      // Colorize the shadow, multiply by the falloff so that the center can remain darker
       'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );');
     };
-
     const horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader);
     const verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader);
     verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false;
     return [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur];
   }, [resolution, width, height, scale, color]);
-
   const blurShadows = blur => {
     blurPlane.visible = true;
     blurPlane.material = horizontalBlurMaterial;
@@ -69,7 +69,6 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     gl.render(blurPlane, shadowCamera.current);
     blurPlane.visible = false;
   };
-
   let count = 0;
   let initialBackground;
   let initialOverrideMaterial;

package/core/CubeCamera.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./useCubeCamera.cjs.js");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var a=u(e);exports.CubeCamera=function({children:e,frames:u=1/0,resolution:n,near:c,far:i,envMap:o,fog:f,...s}){const l=a.useRef(),{fbo:b,camera:p,update:m}=t.useCubeCamera({resolution:n,near:c,far:i,envMap:o,fog:f});let v=0;return r.useFrame((()=>{l.current&&(u===1/0||v<u)&&(l.current.visible=!1,m(),l.current.visible=!0,v++)})),a.createElement("group",s,a.createElement("primitive",{object:p}),a.createElement("group",{ref:l},e(b.texture)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./useCubeCamera.cjs.js");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var a=u(e);exports.CubeCamera=function({children:e,frames:u=1/0,resolution:n,near:c,far:i,envMap:o,fog:f,...s}){const l=a.useRef(null),{fbo:b,camera:p,update:m}=t.useCubeCamera({resolution:n,near:c,far:i,envMap:o,fog:f});let v=0;return r.useFrame((()=>{l.current&&(u===1/0||v<u)&&(l.current.visible=!1,m(),l.current.visible=!0,v++)})),a.createElement("group",s,a.createElement("primitive",{object:p}),a.createElement("group",{ref:l},e(b.texture)))};

package/core/CubeCamera.d.ts

@@ -1,9 +1,9 @@
 import { Texture } from 'three';
 import * as React from 'react';
 import { CubeCameraOptions } from './useCubeCamera';
-declare type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
+type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
     children: (tex: Texture) => React.ReactNode;
     frames?: number;
 } & CubeCameraOptions;
-export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: Props): JSX.Element;
+export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: Props): React.JSX.Element;
 export {};

package/core/CubeCamera.js

@@ -12,7 +12,7 @@ function CubeCamera({
   fog,
   ...props
 }) {
-  const ref = React.useRef();
+  const ref = React.useRef(null);
   const {
     fbo,
     camera,

package/core/CubicBezierLine.d.ts

@@ -2,7 +2,7 @@ import { Vector3 } from 'three';
 import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = Omit<LineProps, 'points' | 'ref'> & {
+type Props = Omit<LineProps, 'points' | 'ref'> & {
     start: Vector3 | [number, number, number];
     end: Vector3 | [number, number, number];
     midA: Vector3 | [number, number, number];

package/core/CurveModifier.d.ts

@@ -6,5 +6,5 @@ export interface CurveModifierProps {
     children: React.ReactElement<JSX.IntrinsicElements['mesh']>;
     curve?: THREE.Curve<THREE.Vector3>;
 }
-export declare type CurveModifierRef = Pick<Flow, 'moveAlongCurve'>;
+export type CurveModifierRef = Pick<Flow, 'moveAlongCurve'>;
 export declare const CurveModifier: ForwardRefComponent<CurveModifierProps, CurveModifierRef>;

package/core/CurveModifier.js

@@ -16,14 +16,12 @@ const CurveModifier = /*#__PURE__*/React.forwardRef(({
   }, [children]);
   React.useEffect(() => {
     var _modifier$current;
-
-    if (curve) (_modifier$current = modifier.current) == null ? void 0 : _modifier$current.updateCurve(0, curve);
+    if (curve) (_modifier$current = modifier.current) == null || _modifier$current.updateCurve(0, curve);
   }, [curve]);
   React.useImperativeHandle(ref, () => ({
     moveAlongCurve: val => {
       var _modifier$current2;
-
-      (_modifier$current2 = modifier.current) == null ? void 0 : _modifier$current2.moveAlongCurve(val);
+      (_modifier$current2 = modifier.current) == null || _modifier$current2.moveAlongCurve(val);
     }
   }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal(children, scene), obj && /*#__PURE__*/React.createElement("primitive", {

package/core/Decal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as THREE from 'three';
 import * as FIBER from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type DecalProps = Omit<JSX.IntrinsicElements['mesh'], 'children'> & {
+export type DecalProps = Omit<JSX.IntrinsicElements['mesh'], 'children'> & {
     debug?: boolean;
     mesh?: React.MutableRefObject<THREE.Mesh>;
     position?: FIBER.Vector3;

package/core/Decal.js

@@ -7,7 +7,6 @@ import { DecalGeometry } from 'three-stdlib';
 function isArray(vec) {
   return Array.isArray(vec);
 }
-
 function vecToArray(vec = [0, 0, 0]) {
   if (isArray(vec)) {
     return vec;
@@ -17,7 +16,6 @@ function vecToArray(vec = [0, 0, 0]) {
     return [vec, vec, vec];
   }
 }
-
 const Decal = /*#__PURE__*/React.forwardRef(function Decal({
   debug,
   depthTest = false,
@@ -36,26 +34,23 @@ const Decal = /*#__PURE__*/React.forwardRef(function Decal({
   React.useLayoutEffect(() => {
     const parent = (mesh == null ? void 0 : mesh.current) || ref.current.parent;
     const target = ref.current;
-
     if (!(parent instanceof THREE.Mesh)) {
       throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');
     }
-
     const state = {
       position: new THREE.Vector3(),
       rotation: new THREE.Euler(),
       scale: new THREE.Vector3(1, 1, 1)
     };
-
     if (parent) {
       applyProps(state, {
         position,
         scale
-      }); // Zero out the parents matrix world for this operation
+      });
 
+      // Zero out the parents matrix world for this operation
       const matrixWorld = parent.matrixWorld.clone();
       parent.matrixWorld.identity();
-
       if (!rotation || typeof rotation === 'number') {
         const o = new THREE.Object3D();
         o.position.copy(state.position);
@@ -69,23 +64,21 @@ const Decal = /*#__PURE__*/React.forwardRef(function Decal({
           rotation
         });
       }
-
       target.geometry = new DecalGeometry(parent, state.position, state.rotation, state.scale);
-
       if (helper.current) {
-        applyProps(helper.current, state); // Prevent the helpers from blocking rays
-
+        applyProps(helper.current, state);
+        // Prevent the helpers from blocking rays
         helper.current.traverse(child => child.raycast = () => null);
-      } // Reset parents matix-world
-
-
+      }
+      // Reset parents matix-world
       parent.matrixWorld = matrixWorld;
       return () => {
         target.geometry.dispose();
       };
     }
-  }, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]); // <meshStandardMaterial transparent polygonOffset polygonOffsetFactor={-10} {...props} />}
+  }, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]);
 
+  // <meshStandardMaterial transparent polygonOffset polygonOffsetFactor={-10} {...props} />}
   return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
     "material-transparent": true,

package/core/Detailed.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LOD, Object3D } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = JSX.IntrinsicElements['lOD'] & {
+type Props = JSX.IntrinsicElements['lOD'] & {
     children: React.ReactElement<Object3D>[];
     hysteresis?: number;
     distances: number[];

package/core/Detailed.js

@@ -23,7 +23,6 @@ const Detailed = /*#__PURE__*/React.forwardRef(({
   });
   useFrame(state => {
     var _lodRef$current;
-
     return (_lodRef$current = lodRef.current) == null ? void 0 : _lodRef$current.update(state.camera);
   });
   return /*#__PURE__*/React.createElement("lOD", _extends({

package/core/DeviceOrientationControls.d.ts

@@ -2,7 +2,7 @@ import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { DeviceOrientationControls as DeviceOrientationControlsImp } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type DeviceOrientationControlsProps = ReactThreeFiber.Object3DNode<DeviceOrientationControlsImp, typeof DeviceOrientationControlsImp> & {
+export type DeviceOrientationControlsProps = ReactThreeFiber.Object3DNode<DeviceOrientationControlsImp, typeof DeviceOrientationControlsImp> & {
     camera?: THREE.Camera;
     onChange?: (e?: THREE.Event) => void;
     makeDefault?: boolean;

package/core/DeviceOrientationControls.js

@@ -21,14 +21,13 @@ const DeviceOrientationControls = /*#__PURE__*/React.forwardRef((props, ref) =>
       invalidate();
       if (onChange) onChange(e);
     };
-
-    controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('change', callback);
-    return () => controls == null ? void 0 : controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
+    controls == null || controls.addEventListener == null || controls.addEventListener('change', callback);
+    return () => controls == null || controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
   }, [onChange, controls, invalidate]);
   useFrame(() => controls == null ? void 0 : controls.update(), -1);
   React.useEffect(() => {
     const current = controls;
-    current == null ? void 0 : current.connect();
+    current == null || current.connect();
     return () => current == null ? void 0 : current.dispose();
   }, [controls]);
   React.useEffect(() => {

package/core/Edges.d.ts

@@ -1,7 +1,7 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = JSX.IntrinsicElements['lineSegments'] & {
+type Props = JSX.IntrinsicElements['lineSegments'] & {
     threshold?: number;
     color?: ReactThreeFiber.Color;
 };

package/core/Edges.js

@@ -13,10 +13,8 @@ const Edges = /*#__PURE__*/React.forwardRef(({
   const ref = React.useRef(null);
   React.useLayoutEffect(() => {
     const parent = ref.current.parent;
-
     if (parent) {
       const geom = geometry || parent.geometry;
-
       if (geom !== ref.current.userData.currentGeom || threshold !== ref.current.userData.currentThreshold) {
         ref.current.userData.currentGeom = geom;
         ref.current.userData.currentThreshold = threshold;

package/core/Effects.d.ts

@@ -1,7 +1,7 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 import { EffectComposer, RenderPass, ShaderPass } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
+type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
     multisamping?: number;
     encoding?: number;
     type?: number;

package/core/Effects.js

@@ -47,25 +47,23 @@ const Effects = /*#__PURE__*/React.forwardRef(({
       depthBuffer,
       stencilBuffer,
       anisotropy
-    }); // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
+    });
 
+    // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
     if (type === UnsignedByteType && encoding != null) {
       if ('colorSpace' in t) t.texture.colorSpace = encoding;else t.texture.encoding = encoding;
     }
-
     t.samples = multisamping;
     return t;
   });
   React.useEffect(() => {
     var _composer$current, _composer$current2;
-
-    (_composer$current = composer.current) == null ? void 0 : _composer$current.setSize(size.width, size.height);
-    (_composer$current2 = composer.current) == null ? void 0 : _composer$current2.setPixelRatio(viewport.dpr);
+    (_composer$current = composer.current) == null || _composer$current.setSize(size.width, size.height);
+    (_composer$current2 = composer.current) == null || _composer$current2.setPixelRatio(viewport.dpr);
   }, [gl, size, viewport.dpr]);
   useFrame(() => {
     var _composer$current3;
-
-    if (!disableRender) (_composer$current3 = composer.current) == null ? void 0 : _composer$current3.render();
+    if (!disableRender) (_composer$current3 = composer.current) == null || _composer$current3.render();
   }, renderIndex);
   const passes = [];
   if (!disableRenderPass) passes.push( /*#__PURE__*/React.createElement("renderPass", {

package/core/Environment.d.ts

@@ -4,7 +4,7 @@ import { Scene } from 'three';
 import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
 import { PresetsType } from '../helpers/environment-assets';
 import { EnvironmentLoaderProps } from './useEnvironment';
-export declare type EnvironmentProps = {
+export type EnvironmentProps = {
     children?: React.ReactNode;
     frames?: number;
     near?: number;
@@ -23,7 +23,7 @@ export declare type EnvironmentProps = {
 } & EnvironmentLoaderProps;
 export declare function EnvironmentMap({ scene, background, blur, map }: EnvironmentProps): null;
 export declare function EnvironmentCube({ background, scene, blur, ...rest }: EnvironmentProps): null;
-export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, scene, files, path, preset, extensions, }: EnvironmentProps): JSX.Element;
+export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, scene, files, path, preset, extensions, }: EnvironmentProps): React.JSX.Element;
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -31,4 +31,4 @@ declare global {
         }
     }
 }
-export declare function Environment(props: EnvironmentProps): JSX.Element;
+export declare function Environment(props: EnvironmentProps): React.JSX.Element;

package/core/Environment.js

@@ -6,27 +6,24 @@ import { GroundProjectedEnv } from 'three-stdlib';
 import { useEnvironment } from './useEnvironment.js';
 
 const isRef = obj => obj.current && obj.current.isScene;
-
 const resolveScene = scene => isRef(scene) ? scene.current : scene;
-
 function setEnvProps(background, scene, defaultScene, texture, blur = 0) {
   const target = resolveScene(scene || defaultScene);
   const oldbg = target.background;
-  const oldenv = target.environment; // @ts-ignore
-
+  const oldenv = target.environment;
+  // @ts-ignore
   const oldBlur = target.backgroundBlurriness || 0;
   if (background !== 'only') target.environment = texture;
-  if (background) target.background = texture; // @ts-ignore
-
+  if (background) target.background = texture;
+  // @ts-ignore
   if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = blur;
   return () => {
     if (background !== 'only') target.environment = oldenv;
-    if (background) target.background = oldbg; // @ts-ignore
-
+    if (background) target.background = oldbg;
+    // @ts-ignore
     if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = oldBlur;
   };
 }
-
 function EnvironmentMap({
   scene,
   background = false,
@@ -102,10 +99,8 @@ function EnvironmentPortal({
     extensions: extensions
   }) : null), virtualScene));
 }
-
 function EnvironmentGround(props) {
   var _props$ground, _props$ground2, _scale, _props$ground3;
-
   const textureDefault = useEnvironment(props);
   const texture = props.map || textureDefault;
   React.useMemo(() => extend({
@@ -124,7 +119,6 @@ function EnvironmentGround(props) {
     radius: radius
   }));
 }
-
 function Environment(props) {
   return props.ground ? /*#__PURE__*/React.createElement(EnvironmentGround, props) : props.map ? /*#__PURE__*/React.createElement(EnvironmentMap, props) : props.children ? /*#__PURE__*/React.createElement(EnvironmentPortal, props) : /*#__PURE__*/React.createElement(EnvironmentCube, props);
 }

package/core/Example.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import type { Color } from '@react-three/fiber';
-export declare type ExampleProps = {
+export type ExampleProps = {
     font: string;
     color?: Color;
     debug?: boolean;
     bevelSize?: number;
 } & JSX.IntrinsicElements['group'];
-export declare type ExampleApi = {
+export type ExampleApi = {
     incr: (x?: number) => void;
     decr: (x?: number) => void;
 };
-export declare const Example: React.ForwardRefExoticComponent<Pick<ExampleProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getObjectsByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "font" | "bevelSize" | "debug"> & React.RefAttributes<ExampleApi>>;
+export declare const Example: React.ForwardRefExoticComponent<Omit<ExampleProps, "ref"> & React.RefAttributes<ExampleApi>>;

package/core/Example.js

@@ -13,8 +13,9 @@ const Example = /*#__PURE__*/React.forwardRef(({
 }, fref) => {
   const [counter, setCounter] = React.useState(0);
   const incr = React.useCallback((x = 1) => setCounter(counter + x), [counter]);
-  const decr = React.useCallback((x = 1) => setCounter(counter - x), [counter]); // ref-API
+  const decr = React.useCallback((x = 1) => setCounter(counter - x), [counter]);
 
+  // ref-API
   const api = React.useMemo(() => ({
     incr,
     decr

package/core/FaceControls.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"),a=require("@react-three/fiber"),n=require("maath"),o=require("suspend-react"),c=require("./useVideoTexture.cjs.js"),u=require("./Facemesh.cjs.js"),s=require("./FaceLandmarker.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./Line.cjs.js"),require("three-stdlib"),require("@mediapipe/tasks-vision");var d=i(e),f=l(t),p=l(r);function m(e,t){return e.clone().add(t).multiplyScalar(.5)}function v(e,t,r){const a=e.localToWorld(t);return r.worldToLocal(a)}const b=r.createContext({}),y=r.forwardRef((({camera:e,autostart:t=!0,webcam:o=!0,webcamVideoTextureSrc:c,manualUpdate:i=!1,manualDetect:l=!1,onVideoFrame:y,smoothTime:h=.25,offset:x=!0,offsetScalar:T=80,eyes:E=!1,eyesAsOrigin:j=!0,depth:k=.15,debug:V=!1,facemesh:g,makeDefault:F},R)=>{var S,q;const O=a.useThree((e=>e.scene)),C=a.useThree((e=>e.camera)),M=a.useThree((e=>e.set)),D=a.useThree((e=>e.get)),A=e||C,L=r.useRef(null),P=r.useRef(null),[I]=r.useState((()=>new f.Object3D)),[_]=r.useState((()=>new f.Vector3)),[B]=r.useState((()=>new f.Vector3)),[H]=r.useState((()=>new f.Vector3)),[W]=r.useState((()=>new f.Vector3)),z=r.useCallback((()=>{I.parent=A.parent;const e=P.current;if(e){const{outerRef:t,eyeRightRef:r,eyeLeftRef:a}=e;if(r.current&&a.current){const{irisDirRef:e}=r.current,{irisDirRef:n}=a.current;e.current&&n.current&&t.current&&(_.copy(v(e.current,new f.Vector3(0,0,0),t.current)),B.copy(v(n.current,new f.Vector3(0,0,0),t.current)),I.position.copy(v(t.current,m(_,B),A.parent||O)),H.copy(v(e.current,new f.Vector3(0,0,1),t.current)),W.copy(v(n.current,new f.Vector3(0,0,1),t.current)),I.lookAt(t.current.localToWorld(m(H,W))))}else t.current&&(I.position.copy(v(t.current,new f.Vector3(0,0,0),A.parent||O)),I.lookAt(t.current.localToWorld(new f.Vector3(0,0,1))))}return I}),[A,B,W,_,H,O,I]),[U]=r.useState((()=>new f.Object3D)),G=r.useCallback((function(e,t){if(A){var r;if(null!==(r=t)&&void 0!==r||(t=z()),h>0){const r=1e-9;n.easing.damp3(U.position,t.position,h,e,void 0,void 0,r),n.easing.dampE(U.rotation,t.rotation,h,e,void 0,void 0,r)}else U.position.copy(t.position),U.rotation.copy(t.rotation);A.position.copy(U.position),A.rotation.copy(U.rotation)}}),[A,z,h,U.position,U.rotation]),[J,K]=r.useState(),N=s.useFaceLandmarker(),Q=r.useCallback(((e,t)=>{const r=null==N?void 0:N.detectForVideo(e,t);K(r)}),[N]);a.useFrame(((e,t)=>{i||G(t)}));const X=r.useMemo((()=>Object.assign(Object.create(f.EventDispatcher.prototype),{detect:Q,computeTarget:z,update:G,facemeshApiRef:P,webcamApiRef:L,play:()=>{var e,t;null==(e=L.current)||null==(t=e.videoTextureApiRef.current)||t.texture.source.data.play()},pause:()=>{var e,t;null==(e=L.current)||null==(t=e.videoTextureApiRef.current)||t.texture.source.data.pause()}})),[Q,z,G]);r.useImperativeHandle(R,(()=>X),[X]),r.useEffect((()=>{const e=e=>{l||Q(e.texture.source.data,e.time),y&&y(e)};return X.addEventListener("videoFrame",e),()=>{X.removeEventListener("videoFrame",e)}}),[X,Q,N,l,y]),r.useEffect((()=>{if(F){const e=D().controls;return M({controls:X}),()=>M({controls:e})}}),[F,X,D,M]);const Y=null==J?void 0:J.faceLandmarks[0],Z=null==J||null==(S=J.facialTransformationMatrixes)?void 0:S[0],$=null==J||null==(q=J.faceBlendshapes)?void 0:q[0];return p.createElement(b.Provider,{value:X},o&&p.createElement(r.Suspense,{fallback:null},p.createElement(w,{ref:L,autostart:t,videoTextureSrc:c})),p.createElement(u.Facemesh,d.default({ref:P},g,{points:Y,depth:k,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:E,eyesAsOrigin:j,offset:x,offsetScalar:T,debug:V,"rotation-z":Math.PI,visible:V}),p.createElement("meshBasicMaterial",{side:f.DoubleSide})))})),h=()=>r.useContext(b),w=r.forwardRef((({videoTextureSrc:e,autostart:t=!0},a)=>{const n=r.useRef(null),c=h(),u=o.suspend((async()=>e?Promise.resolve(null):await navigator.mediaDevices.getUserMedia({audio:!1,video:{facingMode:"user"}})),[e]);r.useEffect((()=>(c.dispatchEvent({type:"stream",stream:u}),()=>{null==u||u.getTracks().forEach((e=>e.stop())),o.clear([e])})),[u,c,e]);const s=r.useMemo((()=>({videoTextureApiRef:n})),[]);return r.useImperativeHandle(a,(()=>s),[s]),p.createElement(r.Suspense,{fallback:null},p.createElement(x,{ref:n,src:e||u,start:t}))})),x=r.forwardRef((({src:e,start:t},a)=>{const n=c.useVideoTexture(e,{start:t}),o=n.source.data,u=h(),s=r.useCallback((e=>{u.dispatchEvent({type:"videoFrame",texture:n,time:e})}),[n,u]);T(o,s);const i=r.useMemo((()=>({texture:n})),[n]);return r.useImperativeHandle(a,(()=>i),[i]),p.createElement(p.Fragment,null)})),T=(e,t)=>{r.useEffect((()=>{if(!e||!e.requestVideoFrameCallback)return;let r;return e.requestVideoFrameCallback((function a(...n){t(...n),r=e.requestVideoFrameCallback(a)})),()=>e.cancelVideoFrameCallback(r)}),[e,t])};exports.FaceControls=y,exports.useFaceControls=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),n=require("maath"),o=require("suspend-react"),c=require("./useVideoTexture.cjs.js"),u=require("./Facemesh.cjs.js"),s=require("./FaceLandmarker.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./Line.cjs.js"),require("three-stdlib"),require("@mediapipe/tasks-vision");var d=i(e),f=l(t),p=l(r);function m(e,t){return e.clone().add(t).multiplyScalar(.5)}function v(e,t,r){const a=e.localToWorld(t);return r.worldToLocal(a)}const b=r.createContext({}),y=r.forwardRef((({camera:e,autostart:t=!0,webcam:o=!0,webcamVideoTextureSrc:c,manualUpdate:i=!1,manualDetect:l=!1,onVideoFrame:y,smoothTime:h=.25,offset:x=!0,offsetScalar:T=80,eyes:E=!1,eyesAsOrigin:j=!0,depth:k=.15,debug:V=!1,facemesh:g,makeDefault:F},R)=>{var S,q;const O=a.useThree((e=>e.scene)),C=a.useThree((e=>e.camera)),M=a.useThree((e=>e.set)),D=a.useThree((e=>e.get)),A=e||C,L=r.useRef(null),P=r.useRef(null),[I]=r.useState((()=>new f.Object3D)),[_]=r.useState((()=>new f.Vector3)),[B]=r.useState((()=>new f.Vector3)),[H]=r.useState((()=>new f.Vector3)),[W]=r.useState((()=>new f.Vector3)),z=r.useCallback((()=>{I.parent=A.parent;const e=P.current;if(e){const{outerRef:t,eyeRightRef:r,eyeLeftRef:a}=e;if(r.current&&a.current){const{irisDirRef:e}=r.current,{irisDirRef:n}=a.current;e.current&&n.current&&t.current&&(_.copy(v(e.current,new f.Vector3(0,0,0),t.current)),B.copy(v(n.current,new f.Vector3(0,0,0),t.current)),I.position.copy(v(t.current,m(_,B),A.parent||O)),H.copy(v(e.current,new f.Vector3(0,0,1),t.current)),W.copy(v(n.current,new f.Vector3(0,0,1),t.current)),I.lookAt(t.current.localToWorld(m(H,W))))}else t.current&&(I.position.copy(v(t.current,new f.Vector3(0,0,0),A.parent||O)),I.lookAt(t.current.localToWorld(new f.Vector3(0,0,1))))}return I}),[A,B,W,_,H,O,I]),[U]=r.useState((()=>new f.Object3D)),G=r.useCallback((function(e,t){if(A){var r;if(null!==(r=t)&&void 0!==r||(t=z()),h>0){const r=1e-9;n.easing.damp3(U.position,t.position,h,e,void 0,void 0,r),n.easing.dampE(U.rotation,t.rotation,h,e,void 0,void 0,r)}else U.position.copy(t.position),U.rotation.copy(t.rotation);A.position.copy(U.position),A.rotation.copy(U.rotation)}}),[A,z,h,U.position,U.rotation]),[J,K]=r.useState(),N=s.useFaceLandmarker(),Q=r.useCallback(((e,t)=>{const r=null==N?void 0:N.detectForVideo(e,t);K(r)}),[N]);a.useFrame(((e,t)=>{i||G(t)}));const X=r.useMemo((()=>Object.assign(Object.create(f.EventDispatcher.prototype),{detect:Q,computeTarget:z,update:G,facemeshApiRef:P,webcamApiRef:L,play:()=>{var e;null==(e=L.current)||null==(e=e.videoTextureApiRef.current)||e.texture.source.data.play()},pause:()=>{var e;null==(e=L.current)||null==(e=e.videoTextureApiRef.current)||e.texture.source.data.pause()}})),[Q,z,G]);r.useImperativeHandle(R,(()=>X),[X]),r.useEffect((()=>{const e=e=>{l||Q(e.texture.source.data,e.time),y&&y(e)};return X.addEventListener("videoFrame",e),()=>{X.removeEventListener("videoFrame",e)}}),[X,Q,N,l,y]),r.useEffect((()=>{if(F){const e=D().controls;return M({controls:X}),()=>M({controls:e})}}),[F,X,D,M]);const Y=null==J?void 0:J.faceLandmarks[0],Z=null==J||null==(S=J.facialTransformationMatrixes)?void 0:S[0],$=null==J||null==(q=J.faceBlendshapes)?void 0:q[0];return p.createElement(b.Provider,{value:X},o&&p.createElement(r.Suspense,{fallback:null},p.createElement(w,{ref:L,autostart:t,videoTextureSrc:c})),p.createElement(u.Facemesh,d.default({ref:P},g,{points:Y,depth:k,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:E,eyesAsOrigin:j,offset:x,offsetScalar:T,debug:V,"rotation-z":Math.PI,visible:V}),p.createElement("meshBasicMaterial",{side:f.DoubleSide})))})),h=()=>r.useContext(b),w=r.forwardRef((({videoTextureSrc:e,autostart:t=!0},a)=>{const n=r.useRef(null),c=h(),u=o.suspend((async()=>e?Promise.resolve(null):await navigator.mediaDevices.getUserMedia({audio:!1,video:{facingMode:"user"}})),[e]);r.useEffect((()=>(c.dispatchEvent({type:"stream",stream:u}),()=>{null==u||u.getTracks().forEach((e=>e.stop())),o.clear([e])})),[u,c,e]);const s=r.useMemo((()=>({videoTextureApiRef:n})),[]);return r.useImperativeHandle(a,(()=>s),[s]),p.createElement(r.Suspense,{fallback:null},p.createElement(x,{ref:n,src:e||u,start:t}))})),x=r.forwardRef((({src:e,start:t},a)=>{const n=c.useVideoTexture(e,{start:t}),o=n.source.data,u=h(),s=r.useCallback((e=>{u.dispatchEvent({type:"videoFrame",texture:n,time:e})}),[n,u]);T(o,s);const i=r.useMemo((()=>({texture:n})),[n]);return r.useImperativeHandle(a,(()=>i),[i]),p.createElement(p.Fragment,null)})),T=(e,t)=>{r.useEffect((()=>{if(!e||!e.requestVideoFrameCallback)return;let r;return e.requestVideoFrameCallback((function a(...n){t(...n),r=e.requestVideoFrameCallback(a)})),()=>e.cancelVideoFrameCallback(r)}),[e,t])};exports.FaceControls=y,exports.useFaceControls=h;

package/core/FaceControls.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { RefObject } from 'react';
 import { useVideoTexture } from './useVideoTexture';
 import { FacemeshApi, FacemeshProps } from './Facemesh';
-declare type VideoTextureSrc = Parameters<typeof useVideoTexture>[0];
-export declare type FaceControlsProps = {
+type VideoTextureSrc = Parameters<typeof useVideoTexture>[0];
+export type FaceControlsProps = {
     camera?: THREE.Camera;
     autostart?: boolean;
     webcam?: boolean;
@@ -22,7 +22,7 @@ export declare type FaceControlsProps = {
     debug?: boolean;
     facemesh?: FacemeshProps;
 };
-export declare type FaceControlsApi = THREE.EventDispatcher & {
+export type FaceControlsApi = THREE.EventDispatcher & {
     detect: (video: HTMLVideoElement, time: number) => void;
     computeTarget: () => THREE.Object3D;
     update: (delta: number, target?: THREE.Object3D) => void;
@@ -33,10 +33,10 @@ export declare type FaceControlsApi = THREE.EventDispatcher & {
 };
 export declare const FaceControls: React.ForwardRefExoticComponent<FaceControlsProps & React.RefAttributes<FaceControlsApi>>;
 export declare const useFaceControls: () => FaceControlsApi;
-declare type WebcamApi = {
+type WebcamApi = {
     videoTextureApiRef: RefObject<VideoTextureApi>;
 };
-declare type VideoTextureApi = {
+type VideoTextureApi = {
     texture: THREE.VideoTexture;
 };
 export {};