@react-three/drei 9.83.9 → 9.84.0

package/core/FaceControls.js

@@ -10,19 +10,19 @@ import { Facemesh } from './Facemesh.js';
 import { useFaceLandmarker } from './FaceLandmarker.js';
 
 // useVideoTexture 1st arg `src` type
+
 function mean(v1, v2) {
   return v1.clone().add(v2).multiplyScalar(0.5);
 }
-
 function localToLocal(objSrc, v, objDst) {
   // see: https://discourse.threejs.org/t/object3d-localtolocal/51564
   const v_world = objSrc.localToWorld(v);
   return objDst.worldToLocal(v_world);
-} //
+}
+
+//
 //
 //
-
-
 const FaceControlsContext = /*#__PURE__*/createContext({});
 const FaceControls = /*#__PURE__*/forwardRef(({
   camera,
@@ -43,14 +43,15 @@ const FaceControls = /*#__PURE__*/forwardRef(({
   makeDefault
 }, fref) => {
   var _faces$facialTransfor, _faces$faceBlendshape;
-
   const scene = useThree(state => state.scene);
   const defaultCamera = useThree(state => state.camera);
   const set = useThree(state => state.set);
   const get = useThree(state => state.get);
   const explCamera = camera || defaultCamera;
   const webcamApiRef = useRef(null);
-  const facemeshApiRef = useRef(null); //
+  const facemeshApiRef = useRef(null);
+
+  //
   // computeTarget()
   //
   // Compute `target` position and rotation for the camera (according to <Facemesh>)
@@ -68,48 +69,49 @@ const FaceControls = /*#__PURE__*/forwardRef(({
     // same parent as the camera
     target.parent = explCamera.parent;
     const facemeshApi = facemeshApiRef.current;
-
     if (facemeshApi) {
       const {
         outerRef,
         eyeRightRef,
         eyeLeftRef
       } = facemeshApi;
-
       if (eyeRightRef.current && eyeLeftRef.current) {
         // 1. 👀
+
         const {
           irisDirRef: irisRightDirRef
         } = eyeRightRef.current;
         const {
           irisDirRef: irisLeftDirRef
         } = eyeLeftRef.current;
-
         if (irisRightDirRef.current && irisLeftDirRef.current && outerRef.current) {
           //
           // position: mean of irisRightDirPos,irisLeftDirPos
           //
           irisRightDirPos.copy(localToLocal(irisRightDirRef.current, new THREE.Vector3(0, 0, 0), outerRef.current));
           irisLeftDirPos.copy(localToLocal(irisLeftDirRef.current, new THREE.Vector3(0, 0, 0), outerRef.current));
-          target.position.copy(localToLocal(outerRef.current, mean(irisRightDirPos, irisLeftDirPos), explCamera.parent || scene)); //
+          target.position.copy(localToLocal(outerRef.current, mean(irisRightDirPos, irisLeftDirPos), explCamera.parent || scene));
+
+          //
           // lookAt: mean of irisRightLookAt,irisLeftLookAt
           //
-
           irisRightLookAt.copy(localToLocal(irisRightDirRef.current, new THREE.Vector3(0, 0, 1), outerRef.current));
           irisLeftLookAt.copy(localToLocal(irisLeftDirRef.current, new THREE.Vector3(0, 0, 1), outerRef.current));
           target.lookAt(outerRef.current.localToWorld(mean(irisRightLookAt, irisLeftLookAt)));
         }
       } else {
         // 2. 👤
+
         if (outerRef.current) {
           target.position.copy(localToLocal(outerRef.current, new THREE.Vector3(0, 0, 0), explCamera.parent || scene));
           target.lookAt(outerRef.current.localToWorld(new THREE.Vector3(0, 0, 1)));
         }
       }
     }
-
     return target;
-  }, [explCamera, irisLeftDirPos, irisLeftLookAt, irisRightDirPos, irisRightLookAt, scene, target]); //
+  }, [explCamera, irisLeftDirPos, irisLeftLookAt, irisRightDirPos, irisRightLookAt, scene, target]);
+
+  //
   // update()
   //
   // Updating the camera `current` position and rotation, following `target`
@@ -119,9 +121,7 @@ const FaceControls = /*#__PURE__*/forwardRef(({
   const update = useCallback(function (delta, target) {
     if (explCamera) {
       var _target;
-
       (_target = target) !== null && _target !== void 0 ? _target : target = computeTarget();
-
       if (smoothTime > 0) {
         // damping current
         const eps = 1e-9;
@@ -132,11 +132,12 @@ const FaceControls = /*#__PURE__*/forwardRef(({
         current.position.copy(target.position);
         current.rotation.copy(target.rotation);
       }
-
       explCamera.position.copy(current.position);
       explCamera.rotation.copy(current.rotation);
     }
-  }, [explCamera, computeTarget, smoothTime, current.position, current.rotation]); //
+  }, [explCamera, computeTarget, smoothTime, current.position, current.rotation]);
+
+  //
   // detect()
   //
 
@@ -150,8 +151,9 @@ const FaceControls = /*#__PURE__*/forwardRef(({
     if (!manualUpdate) {
       update(delta);
     }
-  }); // Ref API
+  });
 
+  // Ref API
   const api = useMemo(() => Object.assign(Object.create(THREE.EventDispatcher.prototype), {
     detect,
     computeTarget,
@@ -160,17 +162,17 @@ const FaceControls = /*#__PURE__*/forwardRef(({
     webcamApiRef,
     // shorthands
     play: () => {
-      var _webcamApiRef$current, _webcamApiRef$current2;
-
-      (_webcamApiRef$current = webcamApiRef.current) == null ? void 0 : (_webcamApiRef$current2 = _webcamApiRef$current.videoTextureApiRef.current) == null ? void 0 : _webcamApiRef$current2.texture.source.data.play();
+      var _webcamApiRef$current;
+      (_webcamApiRef$current = webcamApiRef.current) == null || (_webcamApiRef$current = _webcamApiRef$current.videoTextureApiRef.current) == null || _webcamApiRef$current.texture.source.data.play();
     },
     pause: () => {
-      var _webcamApiRef$current3, _webcamApiRef$current4;
-
-      (_webcamApiRef$current3 = webcamApiRef.current) == null ? void 0 : (_webcamApiRef$current4 = _webcamApiRef$current3.videoTextureApiRef.current) == null ? void 0 : _webcamApiRef$current4.texture.source.data.pause();
+      var _webcamApiRef$current2;
+      (_webcamApiRef$current2 = webcamApiRef.current) == null || (_webcamApiRef$current2 = _webcamApiRef$current2.videoTextureApiRef.current) == null || _webcamApiRef$current2.texture.source.data.pause();
     }
   }), [detect, computeTarget, update]);
-  useImperativeHandle(fref, () => api, [api]); //
+  useImperativeHandle(fref, () => api, [api]);
+
+  //
   // events callbacks
   //
 
@@ -179,13 +181,13 @@ const FaceControls = /*#__PURE__*/forwardRef(({
       if (!manualDetect) detect(e.texture.source.data, e.time);
       if (onVideoFrame) onVideoFrame(e);
     };
-
     api.addEventListener('videoFrame', onVideoFrameCb);
     return () => {
       api.removeEventListener('videoFrame', onVideoFrameCb);
     };
-  }, [api, detect, faceLandmarker, manualDetect, onVideoFrame]); // `controls` global state
+  }, [api, detect, faceLandmarker, manualDetect, onVideoFrame]);
 
+  // `controls` global state
   useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
@@ -198,8 +200,8 @@ const FaceControls = /*#__PURE__*/forwardRef(({
     }
   }, [makeDefault, api, get, set]);
   const points = faces == null ? void 0 : faces.faceLandmarks[0];
-  const facialTransformationMatrix = faces == null ? void 0 : (_faces$facialTransfor = faces.facialTransformationMatrixes) == null ? void 0 : _faces$facialTransfor[0];
-  const faceBlendshapes = faces == null ? void 0 : (_faces$faceBlendshape = faces.faceBlendshapes) == null ? void 0 : _faces$faceBlendshape[0];
+  const facialTransformationMatrix = faces == null || (_faces$facialTransfor = faces.facialTransformationMatrixes) == null ? void 0 : _faces$facialTransfor[0];
+  const faceBlendshapes = faces == null || (_faces$faceBlendshape = faces.faceBlendshapes) == null ? void 0 : _faces$faceBlendshape[0];
   return /*#__PURE__*/React.createElement(FaceControlsContext.Provider, {
     value: api
   }, webcam && /*#__PURE__*/React.createElement(Suspense, {
@@ -226,10 +228,11 @@ const FaceControls = /*#__PURE__*/forwardRef(({
     side: THREE.DoubleSide
   })));
 });
-const useFaceControls = () => useContext(FaceControlsContext); //
+const useFaceControls = () => useContext(FaceControlsContext);
+
+//
 // Webcam
 //
-
 const Webcam = /*#__PURE__*/forwardRef(({
   videoTextureSrc,
   autostart = true
@@ -250,11 +253,12 @@ const Webcam = /*#__PURE__*/forwardRef(({
       stream
     });
     return () => {
-      stream == null ? void 0 : stream.getTracks().forEach(track => track.stop());
+      stream == null || stream.getTracks().forEach(track => track.stop());
       clear([videoTextureSrc]);
     };
-  }, [stream, faceControls, videoTextureSrc]); // ref-api
+  }, [stream, faceControls, videoTextureSrc]);
 
+  // ref-api
   const api = useMemo(() => ({
     videoTextureApiRef
   }), []);
@@ -266,10 +270,11 @@ const Webcam = /*#__PURE__*/forwardRef(({
     src: videoTextureSrc || stream,
     start: autostart
   }));
-}); //
+});
+
+//
 // VideoTexture
 //
-
 const VideoTexture = /*#__PURE__*/forwardRef(({
   src,
   start
@@ -286,27 +291,25 @@ const VideoTexture = /*#__PURE__*/forwardRef(({
       time
     });
   }, [texture, faceControls]);
-  useVideoFrame(video, onVideoFrame); // ref-api
+  useVideoFrame(video, onVideoFrame);
 
+  // ref-api
   const api = useMemo(() => ({
     texture
   }), [texture]);
   useImperativeHandle(fref, () => api, [api]);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 });
-
 const useVideoFrame = (video, f) => {
   // https://web.dev/requestvideoframecallback-rvfc/
   // https://www.remotion.dev/docs/video-manipulation
   useEffect(() => {
     if (!video || !video.requestVideoFrameCallback) return;
     let handle;
-
     function callback(...args) {
       f(...args);
       handle = video.requestVideoFrameCallback(callback);
     }
-
     video.requestVideoFrameCallback(callback);
     return () => video.cancelVideoFrameCallback(handle);
   }, [video, f]);

package/core/FaceLandmarker.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { ReactNode } from 'react';
 import { FaceLandmarker as FaceLandmarkerImpl, FaceLandmarkerOptions } from '@mediapipe/tasks-vision';
-declare type FaceLandmarkerProps = {
+type FaceLandmarkerProps = {
     basePath?: string;
     options?: FaceLandmarkerOptions;
     children?: ReactNode;
@@ -9,6 +10,6 @@ export declare const FaceLandmarkerDefaults: {
     basePath: string;
     options: FaceLandmarkerOptions;
 };
-export declare function FaceLandmarker({ basePath, options, children, }: FaceLandmarkerProps): JSX.Element;
+export declare function FaceLandmarker({ basePath, options, children, }: FaceLandmarkerProps): React.JSX.Element;
 export declare function useFaceLandmarker(): FaceLandmarkerImpl | undefined;
 export {};

package/core/FaceLandmarker.js

@@ -28,7 +28,7 @@ function FaceLandmarker({
   }, [basePath, opts]);
   useEffect(() => {
     return () => {
-      faceLandmarker == null ? void 0 : faceLandmarker.close();
+      faceLandmarker == null || faceLandmarker.close();
       clear([basePath, opts]);
     };
   }, [faceLandmarker, basePath, opts]);

package/core/Facemesh.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as THREE from 'three';
-export declare type MediaPipeFaceMesh = typeof FacemeshDatas.SAMPLE_FACE;
-export declare type MediaPipePoints = typeof FacemeshDatas.SAMPLE_FACE.keypoints | typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0];
-export declare type FacemeshProps = {
+export type MediaPipeFaceMesh = typeof FacemeshDatas.SAMPLE_FACE;
+export type MediaPipePoints = typeof FacemeshDatas.SAMPLE_FACE.keypoints | typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0];
+export type FacemeshProps = {
     points?: MediaPipePoints;
     face?: MediaPipeFaceMesh;
     width?: number;
@@ -18,7 +18,7 @@ export declare type FacemeshProps = {
     eyesAsOrigin?: boolean;
     debug?: boolean;
 } & Omit<JSX.IntrinsicElements['group'], 'ref'>;
-export declare type FacemeshApi = {
+export type FacemeshApi = {
     meshRef: React.RefObject<THREE.Mesh>;
     outerRef: React.RefObject<THREE.Group>;
     eyeRightRef: React.RefObject<FacemeshEyeApi>;
@@ -73,11 +73,11 @@ export declare const Facemesh: React.ForwardRefExoticComponent<{
     eyesAsOrigin?: boolean | undefined;
     debug?: boolean | undefined;
 } & Omit<import("@react-three/fiber").GroupProps, "ref"> & React.RefAttributes<FacemeshApi>>;
-export declare type FacemeshEyeProps = {
+export type FacemeshEyeProps = {
     side: 'left' | 'right';
     debug?: boolean;
 };
-export declare type FacemeshEyeApi = {
+export type FacemeshEyeApi = {
     eyeMeshRef: React.RefObject<THREE.Group>;
     irisDirRef: React.RefObject<THREE.Group>;
     _computeSphere: (faceGeometry: THREE.BufferGeometry) => THREE.Sphere;

package/core/Facemesh.js

@@ -5,7 +5,6 @@ import { Line } from './Line.js';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
 const defaultLookAt = new THREE.Vector3(0, 0, -1);
-
 const normal = function () {
   const a = new THREE.Vector3();
   const b = new THREE.Vector3();
@@ -21,11 +20,9 @@ const normal = function () {
     return v.crossVectors(ac, ab).normalize();
   };
 }();
-
 function mean(v1, v2) {
   return v1.clone().add(v2).multiplyScalar(0.5);
 }
-
 const Facemesh = /*#__PURE__*/React.forwardRef(({
   points = FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0],
   face,
@@ -45,12 +42,10 @@ const Facemesh = /*#__PURE__*/React.forwardRef(({
   ...props
 }, fref) => {
   var _meshRef$current3;
-
   if (face) {
     points = face.keypoints;
     console.warn('Facemesh `face` prop is deprecated: use `points` instead');
   }
-
   const offsetRef = React.useRef(null);
   const scaleRef = React.useRef(null);
   const originRef = React.useRef(null);
@@ -67,17 +62,17 @@ const Facemesh = /*#__PURE__*/React.forwardRef(({
   } = useThree();
   React.useEffect(() => {
     var _meshRef$current;
-
-    (_meshRef$current = meshRef.current) == null ? void 0 : _meshRef$current.geometry.setIndex(FacemeshDatas.TRIANGULATION);
+    (_meshRef$current = meshRef.current) == null || _meshRef$current.geometry.setIndex(FacemeshDatas.TRIANGULATION);
   }, []);
   const [bboxSize] = React.useState(() => new THREE.Vector3());
   React.useEffect(() => {
     var _meshRef$current2, _outerRef$current;
-
     const faceGeometry = (_meshRef$current2 = meshRef.current) == null ? void 0 : _meshRef$current2.geometry;
     if (!faceGeometry) return;
     faceGeometry.setFromPoints(points);
-    faceGeometry.setDrawRange(0, FacemeshDatas.TRIANGULATION.length); //
+    faceGeometry.setDrawRange(0, FacemeshDatas.TRIANGULATION.length);
+
+    //
     // A. compute sightDir vector
     //
     //  - either from `facialTransformationMatrix` if available
@@ -87,42 +82,44 @@ const Facemesh = /*#__PURE__*/React.forwardRef(({
     if (facialTransformationMatrix) {
       // from facialTransformationMatrix
       transform.matrix.fromArray(facialTransformationMatrix.data);
-      transform.matrix.decompose(transform.position, transform.quaternion, transform.scale); // Rotation: y and z axes are inverted
+      transform.matrix.decompose(transform.position, transform.quaternion, transform.scale);
 
+      // Rotation: y and z axes are inverted
       transform.rotation.y *= -1;
       transform.rotation.z *= -1;
-      sightDirQuaternion.setFromEuler(transform.rotation); // Offset: y and z axes are inverted
+      sightDirQuaternion.setFromEuler(transform.rotation);
 
+      // Offset: y and z axes are inverted
       if (offset) {
         var _offsetRef$current;
-
         transform.position.y *= -1;
         transform.position.z *= -1;
-        (_offsetRef$current = offsetRef.current) == null ? void 0 : _offsetRef$current.position.copy(transform.position.divideScalar(offsetScalar));
+        (_offsetRef$current = offsetRef.current) == null || _offsetRef$current.position.copy(transform.position.divideScalar(offsetScalar));
       } else {
         var _offsetRef$current2;
-
-        (_offsetRef$current2 = offsetRef.current) == null ? void 0 : _offsetRef$current2.position.set(0, 0, 0); // reset
+        (_offsetRef$current2 = offsetRef.current) == null || _offsetRef$current2.position.set(0, 0, 0); // reset
       }
     } else {
       // normal to verticalTri
       normal(points[verticalTri[0]], points[verticalTri[1]], points[verticalTri[2]], sightDir);
       sightDirQuaternion.setFromUnitVectors(defaultLookAt, sightDir);
     }
+    const sightDirQuaternionInverse = sightDirQuaternion.clone().invert();
 
-    const sightDirQuaternionInverse = sightDirQuaternion.clone().invert(); //
+    //
     // B. geometry (straightened)
     //
-    // 1. center (before rotate back)
 
+    // 1. center (before rotate back)
     faceGeometry.computeBoundingBox();
     if (debug) invalidate(); // invalidate to force re-render for box3Helper (after .computeBoundingBox())
+    faceGeometry.center();
 
-    faceGeometry.center(); // 2. rotate back + rotate outerRef (once 1.)
-
+    // 2. rotate back + rotate outerRef (once 1.)
     faceGeometry.applyQuaternion(sightDirQuaternionInverse);
-    (_outerRef$current = outerRef.current) == null ? void 0 : _outerRef$current.setRotationFromQuaternion(sightDirQuaternion); // 3. 👀 eyes
+    (_outerRef$current = outerRef.current) == null || _outerRef$current.setRotationFromQuaternion(sightDirQuaternion);
 
+    // 3. 👀 eyes
     if (eyes) {
       if (!faceBlendshapes) {
         console.warn('Facemesh `eyes` option only works if `faceBlendshapes` is provided: skipping.');
@@ -131,30 +128,25 @@ const Facemesh = /*#__PURE__*/React.forwardRef(({
           if (eyesAsOrigin) {
             // compute the middle of the 2 eyes as the `origin`
             const eyeRightSphere = eyeRightRef.current._computeSphere(faceGeometry);
-
             const eyeLeftSphere = eyeLeftRef.current._computeSphere(faceGeometry);
-
             const eyesCenter = mean(eyeRightSphere.center, eyeLeftSphere.center);
             origin = eyesCenter.negate(); // eslint-disable-line react-hooks/exhaustive-deps
 
             eyeRightRef.current._update(faceGeometry, faceBlendshapes, eyeRightSphere);
-
             eyeLeftRef.current._update(faceGeometry, faceBlendshapes, eyeLeftSphere);
           } else {
             eyeRightRef.current._update(faceGeometry, faceBlendshapes);
-
             eyeLeftRef.current._update(faceGeometry, faceBlendshapes);
           }
         }
       }
-    } // 3. origin
-
+    }
 
+    // 3. origin
     if (originRef.current) {
       if (origin !== undefined) {
         if (typeof origin === 'number') {
           const position = faceGeometry.getAttribute('position');
-
           _origin.set(-position.getX(origin), -position.getY(origin), -position.getZ(origin));
         } else if (origin.isVector3) {
           _origin.copy(origin);
@@ -162,29 +154,26 @@ const Facemesh = /*#__PURE__*/React.forwardRef(({
       } else {
         _origin.setScalar(0);
       }
-
       originRef.current.position.copy(_origin);
-    } // 4. re-scale
-
+    }
 
+    // 4. re-scale
     if (scaleRef.current) {
       let scale = 1;
-
       if (width || height || depth) {
         faceGeometry.boundingBox.getSize(bboxSize);
         if (width) scale = width / bboxSize.x; // fit in width
-
         if (height) scale = height / bboxSize.y; // fit in height
-
         if (depth) scale = depth / bboxSize.z; // fit in depth
       }
 
       scaleRef.current.scale.setScalar(scale !== 1 ? scale : 1);
     }
-
     faceGeometry.computeVertexNormals();
     faceGeometry.attributes.position.needsUpdate = true;
-  }, [points, facialTransformationMatrix, faceBlendshapes, transform, offset, offsetScalar, width, height, depth, verticalTri, origin, eyes, debug, invalidate, sightDir, sightDirQuaternion, bboxSize, _origin]); //
+  }, [points, facialTransformationMatrix, faceBlendshapes, transform, offset, offsetScalar, width, height, depth, verticalTri, origin, eyes, debug, invalidate, sightDir, sightDirQuaternion, bboxSize, _origin]);
+
+  //
   // API
   //
 
@@ -227,10 +216,11 @@ const Facemesh = /*#__PURE__*/React.forwardRef(({
   }, children, debug ? /*#__PURE__*/React.createElement(React.Fragment, null, bbox && /*#__PURE__*/React.createElement("box3Helper", {
     args: [bbox]
   })) : null))))));
-}); //
+});
+
+//
 // 👁️ FacemeshEye
 //
-
 const FacemeshEyeDefaults = {
   contourLandmarks: {
     right: [33, 133, 159, 145, 153],
@@ -240,8 +230,8 @@ const FacemeshEyeDefaults = {
     right: [14, 16, 18, 12],
     // lookIn,lookOut, lookUp,lookDown
     left: [13, 15, 17, 11] // lookIn,lookOut, lookUp,lookDown
-
   },
+
   color: {
     right: 'red',
     left: '#00ff00'
@@ -256,28 +246,33 @@ const FacemeshEye = /*#__PURE__*/React.forwardRef(({
   debug = true
 }, fref) => {
   const eyeMeshRef = React.useRef(null);
-  const irisDirRef = React.useRef(null); //
+  const irisDirRef = React.useRef(null);
+
+  //
   // _computeSphere()
   //
   // Compute eye's sphere .position and .radius
   //
 
   const [sphere] = React.useState(() => new THREE.Sphere());
-
   const _computeSphere = React.useCallback(faceGeometry => {
-    const position = faceGeometry.getAttribute('position'); // get some eye contour landmarks points (from geometry)
+    const position = faceGeometry.getAttribute('position');
 
+    // get some eye contour landmarks points (from geometry)
     const eyeContourLandmarks = FacemeshEyeDefaults.contourLandmarks[side];
     const eyeContourPoints = eyeContourLandmarks.map(i => new THREE.Vector3(position.getX(i), position.getY(i), position.getZ(i))); // prettier-ignore
-    // compute center (centroid from eyeContourPoints)
 
+    // compute center (centroid from eyeContourPoints)
     sphere.center.set(0, 0, 0);
     eyeContourPoints.forEach(v => sphere.center.add(v));
-    sphere.center.divideScalar(eyeContourPoints.length); // radius (eye half-width)
+    sphere.center.divideScalar(eyeContourPoints.length);
 
+    // radius (eye half-width)
     sphere.radius = eyeContourPoints[0].sub(eyeContourPoints[1]).length() / 2;
     return sphere;
-  }, [sphere, side]); //
+  }, [sphere, side]);
+
+  //
   // _update()
   //
   // Update:
@@ -285,21 +280,17 @@ const FacemeshEye = /*#__PURE__*/React.forwardRef(({
   //   - B. iris direction (according to "look*" blendshapes)
   //
 
-
   const [rotation] = React.useState(() => new THREE.Euler());
-
   const _update = React.useCallback((faceGeometry, faceBlendshapes, sphere) => {
     // A.
     if (eyeMeshRef.current) {
       var _sphere;
-
       (_sphere = sphere) !== null && _sphere !== void 0 ? _sphere : sphere = _computeSphere(faceGeometry); // compute sphere dims (if not passed)
-
       eyeMeshRef.current.position.copy(sphere.center);
       eyeMeshRef.current.scale.setScalar(sphere.radius);
-    } // B.
-
+    }
 
+    // B.
     if (faceBlendshapes && irisDirRef.current) {
       const blendshapes = FacemeshEyeDefaults.blendshapes[side];
       const lookIn = faceBlendshapes.categories[blendshapes[0]].score;
@@ -313,11 +304,12 @@ const FacemeshEye = /*#__PURE__*/React.forwardRef(({
       rotation.set(rx, ry, 0);
       irisDirRef.current.setRotationFromEuler(rotation);
     }
-  }, [_computeSphere, side, rotation]); //
+  }, [_computeSphere, side, rotation]);
+
+  //
   // API
   //
 
-
   const api = React.useMemo(() => ({
     eyeMeshRef: eyeMeshRef,
     irisDirRef: irisDirRef,
@@ -335,7 +327,9 @@ const FacemeshEye = /*#__PURE__*/React.forwardRef(({
     lineWidth: 1,
     color: color
   })))));
-}); //
+});
+
+//
 // Sample datas
 //
 

package/core/FirstPersonControls.d.ts

@@ -1,7 +1,7 @@
 import { Object3DNode } from '@react-three/fiber';
 import { FirstPersonControls as FirstPersonControlImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl> & {
+export type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl> & {
     domElement?: HTMLElement;
     makeDefault?: boolean;
 };

package/core/Float.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type FloatProps = JSX.IntrinsicElements['group'] & {
+export type FloatProps = JSX.IntrinsicElements['group'] & {
     enabled?: boolean;
     speed?: number;
     rotationIntensity?: number;

package/core/Float.js

@@ -16,7 +16,6 @@ const Float = /*#__PURE__*/React.forwardRef(({
   const offset = React.useRef(Math.random() * 10000);
   useFrame(state => {
     var _floatingRange$, _floatingRange$2;
-
     if (!enabled || speed === 0) return;
     const t = offset.current + state.clock.getElapsedTime();
     ref.current.rotation.x = Math.cos(t / 4 * speed) / 8 * rotationIntensity;

package/core/FlyControls.d.ts

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

package/core/FlyControls.js

@@ -29,8 +29,7 @@ const FlyControls = /*#__PURE__*/React.forwardRef(({
       invalidate();
       if (onChange) onChange(e);
     };
-
-    controls.addEventListener == null ? void 0 : controls.addEventListener('change', callback);
+    controls.addEventListener == null || controls.addEventListener('change', callback);
     return () => controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
   }, [onChange, invalidate]);
   React.useEffect(() => {

package/core/GizmoHelper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),u=require("./Hud.cjs.js");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("./useFBO.cjs.js");var i=o(e);const a=i.createContext({}),c=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:o=[80,80],renderPriority:m=1,onUpdate:y,onTarget:g,children:b})=>{const j=r.useThree((e=>e.size)),w=r.useThree((e=>e.camera)),q=r.useThree((e=>e.controls)),v=r.useThree((e=>e.invalidate)),O=i.useRef(),x=i.useRef(null),P=i.useRef(!1),T=i.useRef(0),C=i.useRef(new t.Vector3(0,0,0)),R=i.useRef(new t.Vector3(0,0,0));i.useEffect((()=>{R.current.copy(w.up)}),[w]);const E=i.useCallback((e=>{P.current=!0,(q||g)&&(C.current=(null==q?void 0:q.target)||(null==g?void 0:g())),T.current=w.position.distanceTo(f),p.copy(w.quaternion),h.copy(e).multiplyScalar(T.current).add(f),s.lookAt(h),s.up.copy(w.up),d.copy(s.quaternion),v()}),[q,w,g,v]);r.useFrame(((e,r)=>{if(x.current&&O.current){var t;if(P.current)if(p.angleTo(d)<.01)P.current=!1,"minPolarAngle"in q&&w.up.copy(R.current);else{const e=r*c;p.rotateTowards(d,e),w.position.set(0,0,1).applyQuaternion(p).multiplyScalar(T.current).add(C.current),w.up.set(0,1,0).applyQuaternion(p).normalize(),w.quaternion.copy(p),y?y():q&&q.update(),v()}l.copy(w.matrix).invert(),null==(t=O.current)||t.quaternion.setFromRotationMatrix(l)}}));const M=i.useMemo((()=>({tweenCamera:E})),[E]),[z,k]=o,Q=e.endsWith("-center")?0:e.endsWith("-left")?-j.width/2+z:j.width/2-z,V=e.startsWith("center-")?0:e.startsWith("top-")?j.height/2-k:-j.height/2+k;return i.createElement(u.Hud,{renderPriority:m},i.createElement(a.Provider,{value:M},i.createElement(n.OrthographicCamera,{makeDefault:!0,ref:x,position:[0,0,200]}),i.createElement("group",{ref:O,position:[Q,V,0]},b)))},exports.useGizmoContext=()=>i.useContext(a);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),u=require("./Hud.cjs.js");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("./useFBO.cjs.js");var i=o(e);const a=i.createContext({}),c=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:o=[80,80],renderPriority:m=1,onUpdate:y,onTarget:g,children:b})=>{const j=r.useThree((e=>e.size)),w=r.useThree((e=>e.camera)),q=r.useThree((e=>e.controls)),v=r.useThree((e=>e.invalidate)),O=i.useRef(null),x=i.useRef(null),P=i.useRef(!1),T=i.useRef(0),C=i.useRef(new t.Vector3(0,0,0)),R=i.useRef(new t.Vector3(0,0,0));i.useEffect((()=>{R.current.copy(w.up)}),[w]);const E=i.useCallback((e=>{P.current=!0,(q||g)&&(C.current=(null==q?void 0:q.target)||(null==g?void 0:g())),T.current=w.position.distanceTo(f),p.copy(w.quaternion),h.copy(e).multiplyScalar(T.current).add(f),s.lookAt(h),s.up.copy(w.up),d.copy(s.quaternion),v()}),[q,w,g,v]);r.useFrame(((e,r)=>{if(x.current&&O.current){var t;if(P.current)if(p.angleTo(d)<.01)P.current=!1,"minPolarAngle"in q&&w.up.copy(R.current);else{const e=r*c;p.rotateTowards(d,e),w.position.set(0,0,1).applyQuaternion(p).multiplyScalar(T.current).add(C.current),w.up.set(0,1,0).applyQuaternion(p).normalize(),w.quaternion.copy(p),y?y():q&&q.update(),v()}l.copy(w.matrix).invert(),null==(t=O.current)||t.quaternion.setFromRotationMatrix(l)}}));const M=i.useMemo((()=>({tweenCamera:E})),[E]),[z,k]=o,Q=e.endsWith("-center")?0:e.endsWith("-left")?-j.width/2+z:j.width/2-z,V=e.startsWith("center-")?0:e.startsWith("top-")?j.height/2-k:-j.height/2+k;return i.createElement(u.Hud,{renderPriority:m},i.createElement(a.Provider,{value:M},i.createElement(n.OrthographicCamera,{makeDefault:!0,ref:x,position:[0,0,200]}),i.createElement("group",{ref:O,position:[Q,V,0]},b)))},exports.useGizmoContext=()=>i.useContext(a);