@react-three/drei 9.115.0 → 9.116.1

package/materials/BlurPass.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),t=require("./ConvolutionMaterial.cjs.js");require("../helpers/constants.cjs.js");exports.BlurPass=class{constructor({gl:r,resolution:i,width:n=500,height:s=500,minDepthThreshold:o=0,maxDepthThreshold:a=1,depthScale:l=0,depthToBlurRatioBias:u=.25}){this.renderToScreen=!1,this.renderTargetA=new e.WebGLRenderTarget(i,i,{minFilter:e.LinearFilter,magFilter:e.LinearFilter,stencilBuffer:!1,depthBuffer:!1,type:e.HalfFloatType}),this.renderTargetB=this.renderTargetA.clone(),this.convolutionMaterial=new t.ConvolutionMaterial,this.convolutionMaterial.setTexelSize(1/n,1/s),this.convolutionMaterial.setResolution(new e.Vector2(n,s)),this.scene=new e.Scene,this.camera=new e.Camera,this.convolutionMaterial.uniforms.minDepthThreshold.value=o,this.convolutionMaterial.uniforms.maxDepthThreshold.value=a,this.convolutionMaterial.uniforms.depthScale.value=l,this.convolutionMaterial.uniforms.depthToBlurRatioBias.value=u,this.convolutionMaterial.defines.USE_DEPTH=l>0;const h=new Float32Array([-1,-1,0,3,-1,0,-1,3,0]),c=new Float32Array([0,0,2,0,0,2]),d=new e.BufferGeometry;d.setAttribute("position",new e.BufferAttribute(h,3)),d.setAttribute("uv",new e.BufferAttribute(c,2)),this.screen=new e.Mesh(d,this.convolutionMaterial),this.screen.frustumCulled=!1,this.scene.add(this.screen)}render(e,t,r){const i=this.scene,n=this.camera,s=this.renderTargetA,o=this.renderTargetB;let a=this.convolutionMaterial,l=a.uniforms;l.depthBuffer.value=t.depthTexture;const u=a.kernel;let h,c,d,f=t;for(c=0,d=u.length-1;c<d;++c)h=0==(1&c)?s:o,l.kernel.value=u[c],l.inputBuffer.value=f.texture,e.setRenderTarget(h),e.render(i,n),f=h;l.kernel.value=u[c],l.inputBuffer.value=f.texture,e.setRenderTarget(this.renderToScreen?null:r),e.render(i,n)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),t=require("./ConvolutionMaterial.cjs.js");require("../helpers/constants.cjs.js");exports.BlurPass=class{constructor({gl:r,resolution:i,width:n=500,height:s=500,minDepthThreshold:o=0,maxDepthThreshold:a=1,depthScale:l=0,depthToBlurRatioBias:u=.25}){this.renderToScreen=!1,this.renderTargetA=new e.WebGLRenderTarget(i,i,{minFilter:e.LinearFilter,magFilter:e.LinearFilter,stencilBuffer:!1,depthBuffer:!1,type:e.HalfFloatType}),this.renderTargetB=this.renderTargetA.clone(),this.convolutionMaterial=new t.ConvolutionMaterial,this.convolutionMaterial.setTexelSize(1/n,1/s),this.convolutionMaterial.setResolution(new e.Vector2(n,s)),this.scene=new e.Scene,this.camera=new e.Camera,this.convolutionMaterial.uniforms.minDepthThreshold.value=o,this.convolutionMaterial.uniforms.maxDepthThreshold.value=a,this.convolutionMaterial.uniforms.depthScale.value=l,this.convolutionMaterial.uniforms.depthToBlurRatioBias.value=u,this.convolutionMaterial.defines.USE_DEPTH=l>0;const h=new Float32Array([-1,-1,0,3,-1,0,-1,3,0]),c=new Float32Array([0,0,2,0,0,2]),d=new e.BufferGeometry;d.setAttribute("position",new e.BufferAttribute(h,3)),d.setAttribute("uv",new e.BufferAttribute(c,2)),this.screen=new e.Mesh(d,this.convolutionMaterial),this.screen.frustumCulled=!1,this.scene.add(this.screen)}render(e,t,r){const i=this.scene,n=this.camera,s=this.renderTargetA,o=this.renderTargetB;let a=this.convolutionMaterial,l=a.uniforms;l.depthBuffer.value=t.depthTexture;const u=a.kernel;let h,c,d,f=t;for(c=0,d=u.length-1;c<d;++c)h=1&c?o:s,l.kernel.value=u[c],l.inputBuffer.value=f.texture,e.setRenderTarget(h),e.render(i,n),f=h;l.kernel.value=u[c],l.inputBuffer.value=f.texture,e.setRenderTarget(this.renderToScreen?null:r),e.render(i,n)}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.115.0",
+  "version": "9.116.1",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [
@@ -30,27 +30,27 @@
   "react-native": "native/index.cjs.js",
   "sideEffects": false,
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "@mediapipe/tasks-vision": "0.10.8",
-    "@monogrid/gainmap-js": "^3.0.5",
-    "@react-spring/three": "~9.6.1",
-    "@use-gesture/react": "^10.2.24",
-    "camera-controls": "^2.4.2",
+    "@babel/runtime": "^7.26.0",
+    "@mediapipe/tasks-vision": "0.10.17",
+    "@monogrid/gainmap-js": "^3.0.6",
+    "@react-spring/three": "~9.7.5",
+    "@use-gesture/react": "^10.3.1",
+    "camera-controls": "^2.9.0",
     "cross-env": "^7.0.3",
-    "detect-gpu": "^5.0.28",
+    "detect-gpu": "^5.0.56",
     "glsl-noise": "^0.0.0",
     "hls.js": "^1.5.17",
-    "maath": "^0.10.7",
-    "meshline": "^3.1.6",
+    "maath": "^0.10.8",
+    "meshline": "^3.3.1",
     "react-composer": "^5.0.3",
-    "stats-gl": "^2.0.0",
+    "stats-gl": "^2.2.8",
     "stats.js": "^0.17.0",
     "suspend-react": "^0.1.3",
     "three-mesh-bvh": "^0.7.8",
-    "three-stdlib": "^2.29.9",
-    "troika-three-text": "^0.49.0",
+    "three-stdlib": "^2.34.0",
+    "troika-three-text": "^0.52.0",
     "tunnel-rat": "^0.1.2",
-    "utility-types": "^3.10.0",
+    "utility-types": "^3.11.0",
     "uuid": "^9.0.1",
     "zustand": "^3.7.1"
   },

package/web/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"),o=require("maath"),n=require("suspend-react"),c=require("../core/VideoTexture.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("hls.js"),require("../core/Line.cjs.js"),require("three-stdlib");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:n=!0,webcamVideoTextureSrc:c,manualUpdate:i=!1,manualDetect:l=!1,onVideoFrame:y,smoothTime:h=.25,offset:x=!0,offsetScalar:T=80,eyes:j=!1,eyesAsOrigin:E=!0,depth:V=.15,debug:g=!1,facemesh:k,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:o}=a.current;e.current&&o.current&&t.current&&(_.copy(v(e.current,new f.Vector3(0,0,0),t.current)),B.copy(v(o.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(o.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;o.easing.damp3(U.position,t.position,h,e,void 0,void 0,r),o.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},n&&p.createElement(r.Suspense,{fallback:null},p.createElement(w,{ref:L,autostart:t,videoTextureSrc:c})),p.createElement(u.Facemesh,d.default({ref:P},k,{points:Y,depth:V,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:j,eyesAsOrigin:E,offset:x,offsetScalar:T,debug:g,"rotation-z":Math.PI,visible:g}),p.createElement("meshBasicMaterial",{side:f.DoubleSide})))})),h=()=>r.useContext(b),w=r.forwardRef((({videoTextureSrc:e,autostart:t=!0},a)=>{const o=r.useRef(null),c=h(),u=n.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())),n.clear([e])})),[u,c,e]);const s=r.useMemo((()=>({videoTextureApiRef:o})),[]);return r.useImperativeHandle(a,(()=>s),[s]),p.createElement(r.Suspense,{fallback:null},p.createElement(x,{ref:o,src:e||u,start:t}))})),x=r.forwardRef((({src:e,start:t},a)=>{const o=c.useVideoTexture(e,{start:t}),n=o.source.data,u=h(),s=r.useCallback((e=>{u.dispatchEvent({type:"videoFrame",texture:o,time:e})}),[o,u]);T(n,s);const i=r.useMemo((()=>({texture:o})),[o]);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(...o){t(...o),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"),o=require("maath"),n=require("suspend-react"),c=require("../core/VideoTexture.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("hls.js"),require("../core/Line.cjs.js"),require("three-stdlib");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:n=!0,webcamVideoTextureSrc:c,manualUpdate:i=!1,manualDetect:l=!1,onVideoFrame:y,smoothTime:h=.25,offset:x=!0,offsetScalar:T=80,eyes:j=!1,eyesAsOrigin:E=!0,depth:V=.15,debug:g=!1,facemesh:k,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:o}=a.current;e.current&&o.current&&t.current&&(_.copy(v(e.current,new f.Vector3(0,0,0),t.current)),B.copy(v(o.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(o.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;o.easing.damp3(U.position,t.position,h,e,void 0,void 0,r),o.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);return K(r),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},n&&p.createElement(r.Suspense,{fallback:null},p.createElement(w,{ref:L,autostart:t,videoTextureSrc:c})),p.createElement(u.Facemesh,d.default({ref:P},k,{points:Y,depth:V,facialTransformationMatrix:Z,faceBlendshapes:$,eyes:j,eyesAsOrigin:E,offset:x,offsetScalar:T,debug:g,"rotation-z":Math.PI,visible:g}),p.createElement("meshBasicMaterial",{side:f.DoubleSide})))})),h=()=>r.useContext(b),w=r.forwardRef((({videoTextureSrc:e,autostart:t=!0},a)=>{const o=r.useRef(null),c=h(),u=n.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())),n.clear([e])})),[u,c,e]);const s=r.useMemo((()=>({videoTextureApiRef:o})),[]);return r.useImperativeHandle(a,(()=>s),[s]),p.createElement(r.Suspense,{fallback:null},p.createElement(x,{ref:o,src:e||u,start:t}))})),x=r.forwardRef((({src:e,start:t},a)=>{const o=c.useVideoTexture(e,{start:t}),n=o.source.data,u=h(),s=r.useCallback((e=>{u.dispatchEvent({type:"videoFrame",texture:o,time:e})}),[o,u]);T(n,s);const i=r.useMemo((()=>({texture:o})),[o]);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(...o){t(...o),r=e.requestVideoFrameCallback(a)})),()=>e.cancelVideoFrameCallback(r)}),[e,t])};exports.FaceControls=y,exports.useFaceControls=h;

package/web/FaceControls.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { RefObject } from 'react';
+import type { FaceLandmarkerResult } from '@mediapipe/tasks-vision';
 import { useVideoTexture } from '../core/VideoTexture';
 import { FacemeshApi, FacemeshProps } from './Facemesh';
 type VideoTextureSrc = Parameters<typeof useVideoTexture>[0];
@@ -23,7 +24,7 @@ export type FaceControlsProps = {
     facemesh?: FacemeshProps;
 };
 export type FaceControlsApi = THREE.EventDispatcher & {
-    detect: (video: HTMLVideoElement, time: number) => void;
+    detect: (video: HTMLVideoElement, time: number) => FaceLandmarkerResult | undefined;
     computeTarget: () => THREE.Object3D;
     update: (delta: number, target?: THREE.Object3D) => void;
     facemeshApiRef: RefObject<FacemeshApi>;

package/web/FaceControls.js

@@ -23,6 +23,7 @@ function localToLocal(objSrc, v, objDst) {
 //
 //
 //
+
 const FaceControlsContext = /* @__PURE__ */createContext({});
 
 /**
@@ -155,8 +156,9 @@ const FaceControls = /* @__PURE__ */forwardRef(({
   const [faces, setFaces] = useState();
   const faceLandmarker = useFaceLandmarker();
   const detect = useCallback((video, time) => {
-    const faces = faceLandmarker == null ? void 0 : faceLandmarker.detectForVideo(video, time);
-    setFaces(faces);
+    const result = faceLandmarker == null ? void 0 : faceLandmarker.detectForVideo(video, time);
+    setFaces(result);
+    return result;
   }, [faceLandmarker]);
   useFrame((_, delta) => {
     if (!manualUpdate) {
@@ -244,6 +246,7 @@ const useFaceControls = () => useContext(FaceControlsContext);
 //
 // Webcam
 //
+
 const Webcam = /* @__PURE__ */forwardRef(({
   videoTextureSrc,
   autostart = true
@@ -286,6 +289,7 @@ const Webcam = /* @__PURE__ */forwardRef(({
 //
 // VideoTexture
 //
+
 const VideoTexture = /* @__PURE__ */forwardRef(({
   src,
   start

package/web/FaceLandmarker.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("suspend-react");function r(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)}var a=r(e);const n=e.createContext({}),s={basePath:"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm",options:{baseOptions:{modelAssetPath:"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",delegate:"GPU"},runningMode:"VIDEO",outputFaceBlendshapes:!0,outputFacialTransformationMatrixes:!0}};exports.FaceLandmarker=function({basePath:o=s.basePath,options:i=s.options,children:c}){const u=JSON.stringify(i),l=t.suspend((async()=>{const{FilesetResolver:e,FaceLandmarker:t}=await Promise.resolve().then((function(){return r(require("@mediapipe/tasks-vision"))})),a=await e.forVisionTasks(o);return t.createFromOptions(a,i)}),[o,u]);return e.useEffect((()=>()=>{null==l||l.close(),t.clear([o,u])}),[l,o,u]),a.createElement(n.Provider,{value:l},c)},exports.FaceLandmarkerDefaults=s,exports.useFaceLandmarker=function(){return e.useContext(n)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("suspend-react");function r(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)}var a=r(e);const n=e.createContext({}),s={basePath:"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm",options:{baseOptions:{modelAssetPath:"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",delegate:"GPU"},runningMode:"VIDEO",outputFaceBlendshapes:!0,outputFacialTransformationMatrixes:!0}};exports.FaceLandmarker=function({basePath:o=s.basePath,options:i=s.options,children:c}){const u=JSON.stringify(i),l=t.suspend((async()=>{const{FilesetResolver:e,FaceLandmarker:t}=await Promise.resolve().then((function(){return r(require("@mediapipe/tasks-vision"))})),a=await e.forVisionTasks(o);return t.createFromOptions(a,i)}),[o,u]);return e.useEffect((()=>()=>{null==l||l.close(),t.clear([o,u])}),[l,o,u]),a.createElement(n.Provider,{value:l},c)},exports.FaceLandmarkerDefaults=s,exports.useFaceLandmarker=function(){return e.useContext(n)};

package/web/FaceLandmarker.js

@@ -5,7 +5,7 @@ import { suspend, clear } from 'suspend-react';
 /* eslint react-hooks/exhaustive-deps: 1 */
 const FaceLandmarkerContext = /* @__PURE__ */createContext({});
 const FaceLandmarkerDefaults = {
-  basePath: 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm',
+  basePath: 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm',
   options: {
     baseOptions: {
       modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',

package/web/Facemesh.d.ts

@@ -25,53 +25,20 @@ export type FacemeshApi = {
     eyeLeftRef: React.RefObject<FacemeshEyeApi>;
 };
 export declare const Facemesh: React.ForwardRefExoticComponent<{
-    points?: MediaPipePoints | undefined;
-    face?: {
-        keypoints: ({
-            x: number;
-            y: number;
-            z: number;
-            name: string;
-        } | {
-            x: number;
-            y: number;
-            z: number;
-            name?: undefined;
-        })[];
-        box: {
-            xMin: number;
-            yMin: number;
-            xMax: number;
-            yMax: number;
-            width: number;
-            height: number;
-        };
-    } | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-    depth?: number | undefined;
-    verticalTri?: [number, number, number] | undefined;
-    origin?: number | THREE.Vector3 | undefined;
-    facialTransformationMatrix?: {
-        rows: number;
-        columns: number;
-        data: number[];
-    } | undefined;
-    offset?: boolean | undefined;
-    offsetScalar?: number | undefined;
-    faceBlendshapes?: {
-        categories: {
-            index: number;
-            score: number;
-            categoryName: string;
-            displayName: string;
-        }[];
-        headIndex: number;
-        headName: string;
-    } | undefined;
-    eyes?: boolean | undefined;
-    eyesAsOrigin?: boolean | undefined;
-    debug?: boolean | undefined;
+    points?: MediaPipePoints;
+    face?: MediaPipeFaceMesh;
+    width?: number;
+    height?: number;
+    depth?: number;
+    verticalTri?: [number, number, number];
+    origin?: number | THREE.Vector3;
+    facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0];
+    offset?: boolean;
+    offsetScalar?: number;
+    faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0];
+    eyes?: boolean;
+    eyesAsOrigin?: boolean;
+    debug?: boolean;
 } & Omit<import("@react-three/fiber").GroupProps, "ref"> & React.RefAttributes<FacemeshApi>>;
 export type FacemeshEyeProps = {
     side: 'left' | 'right';

package/web/Facemesh.js

@@ -166,7 +166,6 @@ const Facemesh = /* @__PURE__ */React.forwardRef(({
         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();
@@ -221,6 +220,7 @@ const Facemesh = /* @__PURE__ */React.forwardRef(({
 //
 // 👁️ FacemeshEye
 //
+
 const FacemeshEyeDefaults = {
   contourLandmarks: {
     right: [33, 133, 159, 145, 153],
@@ -231,7 +231,6 @@ const FacemeshEyeDefaults = {
     // lookIn,lookOut, lookUp,lookDown
     left: [13, 15, 17, 11] // lookIn,lookOut, lookUp,lookDown
   },
-
   color: {
     right: 'red',
     left: '#00ff00'

package/web/Html.js

@@ -193,7 +193,7 @@ const Html = /* @__PURE__ */React.forwardRef(({
     isMeshSizeSet.current = false;
     if (transform) {
       var _root$current;
-      (_root$current = root.current) == null || _root$current.render( /*#__PURE__*/React.createElement("div", {
+      (_root$current = root.current) == null || _root$current.render(/*#__PURE__*/React.createElement("div", {
         ref: transformOuterRef,
         style: styles
       }, /*#__PURE__*/React.createElement("div", {
@@ -207,7 +207,7 @@ const Html = /* @__PURE__ */React.forwardRef(({
       }))));
     } else {
       var _root$current2;
-      (_root$current2 = root.current) == null || _root$current2.render( /*#__PURE__*/React.createElement("div", {
+      (_root$current2 = root.current) == null || _root$current2.render(/*#__PURE__*/React.createElement("div", {
         ref: ref,
         style: styles,
         className: className,

package/web/Loader.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../core/Progress.cjs.js");function r(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)}require("three"),require("zustand");var n=r(e);const a=e=>`Loading ${e.toFixed(2)}%`;const i={container:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"#171717",display:"flex",alignItems:"center",justifyContent:"center",transition:"opacity 300ms ease",zIndex:1e3},inner:{width:100,height:3,background:"#272727",textAlign:"center"},bar:{height:3,width:"100%",background:"white",transition:"transform 200ms",transformOrigin:"left center"},data:{display:"inline-block",position:"relative",fontVariantNumeric:"tabular-nums",marginTop:"0.8em",color:"#f0f0f0",fontSize:"0.6em",fontFamily:'-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, Roboto, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',whiteSpace:"nowrap"}};exports.Loader=function({containerStyles:e,innerStyles:r,barStyles:o,dataStyles:c,dataInterpolation:s=a,initialState:l=(e=>e)}){const{active:u,progress:f}=t.useProgress(),m=n.useRef(0),d=n.useRef(0),p=n.useRef(null),[y,b]=n.useState(l(u));n.useEffect((()=>{let e;return u!==y&&(e=setTimeout((()=>b(u)),300)),()=>clearTimeout(e)}),[y,u]);const g=n.useCallback((()=>{p.current&&(m.current+=(f-m.current)/2,(m.current>.95*f||100===f)&&(m.current=f),p.current.innerText=s(m.current),m.current<f&&(d.current=requestAnimationFrame(g)))}),[s,f]);return n.useEffect((()=>(g(),()=>cancelAnimationFrame(d.current))),[g]),y?n.createElement("div",{style:{...i.container,opacity:u?1:0,...e}},n.createElement("div",null,n.createElement("div",{style:{...i.inner,...r}},n.createElement("div",{style:{...i.bar,transform:`scaleX(${f/100})`,...o}}),n.createElement("span",{ref:p,style:{...i.data,...c}})))):null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../core/Progress.cjs.js");function r(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)}require("three"),require("zustand");var n=r(e);const a=e=>`Loading ${e.toFixed(2)}%`;const i={container:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"#171717",display:"flex",alignItems:"center",justifyContent:"center",transition:"opacity 300ms ease",zIndex:1e3},inner:{width:100,height:3,background:"#272727",textAlign:"center"},bar:{height:3,width:"100%",background:"white",transition:"transform 200ms",transformOrigin:"left center"},data:{display:"inline-block",position:"relative",fontVariantNumeric:"tabular-nums",marginTop:"0.8em",color:"#f0f0f0",fontSize:"0.6em",fontFamily:'-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, Roboto, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',whiteSpace:"nowrap"}};exports.Loader=function({containerStyles:e,innerStyles:r,barStyles:o,dataStyles:c,dataInterpolation:s=a,initialState:l=e=>e}){const{active:u,progress:f}=t.useProgress(),m=n.useRef(0),d=n.useRef(0),p=n.useRef(null),[y,b]=n.useState(l(u));n.useEffect((()=>{let e;return u!==y&&(e=setTimeout((()=>b(u)),300)),()=>clearTimeout(e)}),[y,u]);const g=n.useCallback((()=>{p.current&&(m.current+=(f-m.current)/2,(m.current>.95*f||100===f)&&(m.current=f),p.current.innerText=s(m.current),m.current<f&&(d.current=requestAnimationFrame(g)))}),[s,f]);return n.useEffect((()=>(g(),()=>cancelAnimationFrame(d.current))),[g]),y?n.createElement("div",{style:{...i.container,opacity:u?1:0,...e}},n.createElement("div",null,n.createElement("div",{style:{...i.inner,...r}},n.createElement("div",{style:{...i.bar,transform:`scaleX(${f/100})`,...o}}),n.createElement("span",{ref:p,style:{...i.data,...c}})))):null};

package/web/ScrollControls.js

@@ -208,7 +208,7 @@ const ScrollHtml = /*#__PURE__*/React.forwardRef(({
       group.current.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`;
     }
   });
-  root.render( /*#__PURE__*/React.createElement("div", _extends({
+  root.render(/*#__PURE__*/React.createElement("div", _extends({
     ref: group,
     style: {
       ...style,

package/web/Select.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(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(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=l(e),c=s(t),a=s(n),d=l(i);const f=c.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:i,onChangePointerUp:l,border:s="1px solid #55aaff",backgroundColor:p="rgba(75, 160, 255, 0.1)",filter:h=(e=>e),...v}){const[b,y]=c.useState(!1),{setEvents:m,camera:x,raycaster:E,gl:g,controls:w,size:j,get:C}=o.useThree(),[P,O]=c.useState(!1),[M,k]=c.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);c.useEffect((()=>{b?null==i||i(M):null==l||l(M)}),[M,b]);const q=c.useCallback((e=>{e.stopPropagation(),k({object:h([e.object])[0],shift:t&&e.shiftKey})}),[]),L=c.useCallback((e=>!P&&k({})),[P]),S=c.useRef(null);return c.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(x,S.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=s,o.style.backgroundColor=p,o.style.position="fixed";const i=new a.Vector2,l=new a.Vector2,u=new a.Vector2,c=C().events.enabled,f=null==w?void 0:w.enabled;let v=!1;function b(e,t){const{offsetX:n,offsetY:r}=e,{width:o,height:i}=j;t.set(n/o*2-1,-r/i*2+1)}function E(e){e.shiftKey&&(!function(e){var t;w&&(w.enabled=!1),m({enabled:!1}),y(v=!0),null==(t=g.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",i.x=e.clientX,i.y=e.clientY}(e),b(e,n.startPoint))}let P=[];function O(e){if(v){!function(e){u.x=Math.max(i.x,e.clientX),u.y=Math.max(i.y,e.clientY),l.x=Math.min(i.x,e.clientX),l.y=Math.min(i.y,e.clientY),o.style.left=`${l.x}px`,o.style.top=`${l.y}px`,o.style.width=u.x-l.x+"px",o.style.height=u.y-l.y+"px"}(e),b(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,P)||(P=t,k({object:h(t)}))}}function M(e){var t;v&&v&&(w&&(w.enabled=f),m({enabled:c}),y(v=!1),null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",E,{passive:!0}),document.addEventListener("pointermove",O,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",E),document.removeEventListener("pointermove",O,!0),document.removeEventListener("pointerup",M)}}),[j.width,j.height,E,x,w,g]),c.createElement("group",u.default({ref:S,onClick:q,onPointerOver:()=>O(!0),onPointerOut:()=>O(!1),onPointerMissed:L},v),c.createElement(f.Provider,{value:M},n))},exports.useSelect=function(){return c.useContext(f)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("three"),r=require("three-stdlib"),o=require("@react-three/fiber"),i=require("zustand/shallow");function l(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(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=l(e),c=s(t),a=s(n),d=l(i);const f=c.createContext([]);exports.Select=function({box:e,multiple:t,children:n,onChange:i,onChangePointerUp:l,border:s="1px solid #55aaff",backgroundColor:p="rgba(75, 160, 255, 0.1)",filter:h=e=>e,...v}){const[b,y]=c.useState(!1),{setEvents:m,camera:x,raycaster:E,gl:g,controls:w,size:j,get:C}=o.useThree(),[P,O]=c.useState(!1),[M,k]=c.useReducer(((e,{object:t,shift:n})=>void 0===t?[]:Array.isArray(t)?t:n?e.includes(t)?e.filter((e=>e!==t)):[t,...e]:e[0]===t?[]:[t]),[]);c.useEffect((()=>{b?null==i||i(M):null==l||l(M)}),[M,b]);const q=c.useCallback((e=>{e.stopPropagation(),k({object:h([e.object])[0],shift:t&&e.shiftKey})}),[]),L=c.useCallback((e=>!P&&k({})),[P]),S=c.useRef(null);return c.useEffect((()=>{if(!e||!t)return;const n=new r.SelectionBox(x,S.current),o=document.createElement("div");o.style.pointerEvents="none",o.style.border=s,o.style.backgroundColor=p,o.style.position="fixed";const i=new a.Vector2,l=new a.Vector2,u=new a.Vector2,c=C().events.enabled,f=null==w?void 0:w.enabled;let v=!1;function b(e,t){const{offsetX:n,offsetY:r}=e,{width:o,height:i}=j;t.set(n/o*2-1,-r/i*2+1)}function E(e){e.shiftKey&&(!function(e){var t;w&&(w.enabled=!1),m({enabled:!1}),y(v=!0),null==(t=g.domElement.parentElement)||t.appendChild(o),o.style.left=`${e.clientX}px`,o.style.top=`${e.clientY}px`,o.style.width="0px",o.style.height="0px",i.x=e.clientX,i.y=e.clientY}(e),b(e,n.startPoint))}let P=[];function O(e){if(v){!function(e){u.x=Math.max(i.x,e.clientX),u.y=Math.max(i.y,e.clientY),l.x=Math.min(i.x,e.clientX),l.y=Math.min(i.y,e.clientY),o.style.left=`${l.x}px`,o.style.top=`${l.y}px`,o.style.width=u.x-l.x+"px",o.style.height=u.y-l.y+"px"}(e),b(e,n.endPoint);const t=n.select().sort((e=>e.uuid)).filter((e=>e.isMesh));d.default(t,P)||(P=t,k({object:h(t)}))}}function M(e){var t;v&&v&&(w&&(w.enabled=f),m({enabled:c}),y(v=!1),null==(t=o.parentElement)||t.removeChild(o))}return document.addEventListener("pointerdown",E,{passive:!0}),document.addEventListener("pointermove",O,{passive:!0,capture:!0}),document.addEventListener("pointerup",M,{passive:!0}),()=>{document.removeEventListener("pointerdown",E),document.removeEventListener("pointermove",O,!0),document.removeEventListener("pointerup",M)}}),[j.width,j.height,E,x,w,g]),c.createElement("group",u.default({ref:S,onClick:q,onPointerOver:()=>O(!0),onPointerOut:()=>O(!1),onPointerMissed:L},v),c.createElement(f.Provider,{value:M},n))},exports.useSelect=function(){return c.useContext(f)};

package/web/View.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),c=require("tunnel-rat");function i(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 o=i(e),s=a(t),l=a(r),u=i(c);const f=e=>e&&e.isOrthographicCamera,d=new l.Color,m=u.default();function h(e){return"top"in e}function g(e,t){const{right:r,top:n,left:c,bottom:i,width:a,height:o}=t,s=t.bottom<0||n>e.height||r<0||t.left>e.width;if(h(e)){const t=e.top+e.height-i;return{position:{width:a,height:o,left:c-e.left,top:n,bottom:t,right:r},isOffscreen:s}}return{position:{width:a,height:o,top:n,left:c,bottom:e.height-i,right:r},isOffscreen:s}}function p(e,{left:t,bottom:r,width:n,height:c}){let i;const a=n/c;return f(e.camera)?e.camera.left===n/-2&&e.camera.right===n/2&&e.camera.top===c/2&&e.camera.bottom===c/-2||(Object.assign(e.camera,{left:n/-2,right:n/2,top:c/2,bottom:c/-2}),e.camera.updateProjectionMatrix()):e.camera.aspect!==a&&(e.camera.aspect=a,e.camera.updateProjectionMatrix()),i=e.gl.autoClear,e.gl.autoClear=!1,e.gl.setViewport(t,r,n,c),e.gl.setScissor(t,r,n,c),e.gl.setScissorTest(!0),i}function v(e,t){e.gl.setScissorTest(!1),e.gl.autoClear=t}function b(e){e.gl.getClearColor(d),e.gl.setClearColor(d,e.gl.getClearAlpha()),e.gl.clear(!0,!0)}function w({visible:e=!0,canvasSize:t,scene:r,index:c,children:i,frames:a,rect:o,track:l}){const u=n.useThree(),[f,d]=s.useState(!1);let m=0;return n.useFrame((n=>{var c;(a===1/0||m<=a)&&(l&&(o.current=null==(c=l.current)?void 0:c.getBoundingClientRect()),m++);if(o.current){const{position:c,isOffscreen:a}=g(t,o.current);if(f!==a&&d(a),e&&!f&&o.current){const e=p(n,c);n.gl.render(i?n.scene:r,n.camera),v(n,e)}}}),c),s.useLayoutEffect((()=>{const r=o.current;if(r&&(!e||!f)){const{position:e}=g(t,r),n=p(u,e);b(u),v(u,n)}}),[e,f]),s.useEffect((()=>{if(!l)return;const e=o.current,r=u.get().events.connected;return u.setEvents({connected:l.current}),()=>{if(e){const{position:r}=g(t,e),n=p(u,r);b(u),v(u,n)}u.setEvents({connected:r})}}),[l]),s.useEffect((()=>{h(t)||console.warn("Detected @react-three/fiber canvas size does not include position information. <View /> may not work as expected. Upgrade to @react-three/fiber ^8.1.0 for support.\n See https://github.com/pmndrs/drei/issues/944")}),[]),s.createElement(s.Fragment,null,i,s.createElement("group",{onPointerOver:()=>null}))}const E=s.forwardRef((({track:e,visible:t=!0,index:r=1,id:c,style:i,className:a,frames:u=1/0,children:f,...d},m)=>{var h,g,p,v;const b=s.useRef(null),{size:E,scene:C}=n.useThree(),[O]=s.useState((()=>new l.Scene)),[x,y]=s.useReducer((()=>!0),!1),j=s.useCallback(((t,r)=>{if(b.current&&e&&e.current&&t.target===e.current){const{width:e,height:n,left:c,top:i}=b.current,a=t.clientX-c,o=t.clientY-i;r.pointer.set(a/e*2-1,-o/n*2+1),r.raycaster.setFromCamera(r.pointer,r.camera)}}),[b,e]);return s.useEffect((()=>{var t;e&&(b.current=null==(t=e.current)?void 0:t.getBoundingClientRect()),y()}),[e]),s.createElement("group",o.default({ref:m},d),x&&n.createPortal(s.createElement(w,{visible:t,canvasSize:E,frames:u,scene:C,track:e,rect:b,index:r},f),O,{events:{compute:j,priority:r},size:{width:null==(h=b.current)?void 0:h.width,height:null==(g=b.current)?void 0:g.height,top:null==(p=b.current)?void 0:p.top,left:null==(v=b.current)?void 0:v.left}}))})),C=s.forwardRef((({as:e="div",id:t,visible:r,className:n,style:c,index:i=1,track:a,frames:l=1/0,children:u,...f},d)=>{const h=s.useId(),g=s.useRef(null);return s.useImperativeHandle(d,(()=>g.current)),s.createElement(s.Fragment,null,s.createElement(e,o.default({ref:g,id:t,className:n,style:c},f)),s.createElement(m.In,null,s.createElement(E,{visible:r,key:h,track:g,frames:l,index:i},u)))})),O=s.forwardRef(((e,t)=>s.useContext(n.context)?s.createElement(E,o.default({ref:t},e)):s.createElement(C,o.default({ref:t},e))));O.Port=()=>s.createElement(m.Out,null),exports.View=O;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),c=require("tunnel-rat");function i(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 o=i(e),s=a(t),l=a(r),u=i(c);const f=new l.Color,d=u.default();function m(e){return"top"in e}function h(e,t){const{right:r,top:n,left:c,bottom:i,width:a,height:o}=t,s=t.bottom<0||n>e.height||r<0||t.left>e.width;if(m(e)){const t=e.top+e.height-i;return{position:{width:a,height:o,left:c-e.left,top:n,bottom:t,right:r},isOffscreen:s}}return{position:{width:a,height:o,top:n,left:c,bottom:e.height-i,right:r},isOffscreen:s}}function g(e,{left:t,bottom:r,width:n,height:c}){let i;const a=n/c;var o;return(o=e.camera)&&o.isOrthographicCamera?e.camera.left===n/-2&&e.camera.right===n/2&&e.camera.top===c/2&&e.camera.bottom===c/-2||(Object.assign(e.camera,{left:n/-2,right:n/2,top:c/2,bottom:c/-2}),e.camera.updateProjectionMatrix()):e.camera.aspect!==a&&(e.camera.aspect=a,e.camera.updateProjectionMatrix()),i=e.gl.autoClear,e.gl.autoClear=!1,e.gl.setViewport(t,r,n,c),e.gl.setScissor(t,r,n,c),e.gl.setScissorTest(!0),i}function p(e,t){e.gl.setScissorTest(!1),e.gl.autoClear=t}function v(e){e.gl.getClearColor(f),e.gl.setClearColor(f,e.gl.getClearAlpha()),e.gl.clear(!0,!0)}function b({visible:e=!0,canvasSize:t,scene:r,index:c,children:i,frames:a,rect:o,track:l}){const u=n.useThree(),[f,d]=s.useState(!1);let b=0;return n.useFrame((n=>{var c;(a===1/0||b<=a)&&(l&&(o.current=null==(c=l.current)?void 0:c.getBoundingClientRect()),b++);if(o.current){const{position:c,isOffscreen:a}=h(t,o.current);if(f!==a&&d(a),e&&!f&&o.current){const e=g(n,c);n.gl.render(i?n.scene:r,n.camera),p(n,e)}}}),c),s.useLayoutEffect((()=>{const r=o.current;if(r&&(!e||!f)){const{position:e}=h(t,r),n=g(u,e);v(u),p(u,n)}}),[e,f]),s.useEffect((()=>{if(!l)return;const e=o.current,r=u.get().events.connected;return u.setEvents({connected:l.current}),()=>{if(e){const{position:r}=h(t,e),n=g(u,r);v(u),p(u,n)}u.setEvents({connected:r})}}),[l]),s.useEffect((()=>{m(t)||console.warn("Detected @react-three/fiber canvas size does not include position information. <View /> may not work as expected. Upgrade to @react-three/fiber ^8.1.0 for support.\n See https://github.com/pmndrs/drei/issues/944")}),[]),s.createElement(s.Fragment,null,i,s.createElement("group",{onPointerOver:()=>null}))}const w=s.forwardRef((({track:e,visible:t=!0,index:r=1,id:c,style:i,className:a,frames:u=1/0,children:f,...d},m)=>{var h,g,p,v;const w=s.useRef(null),{size:E,scene:C}=n.useThree(),[O]=s.useState((()=>new l.Scene)),[x,y]=s.useReducer((()=>!0),!1),j=s.useCallback(((t,r)=>{if(w.current&&e&&e.current&&t.target===e.current){const{width:e,height:n,left:c,top:i}=w.current,a=t.clientX-c,o=t.clientY-i;r.pointer.set(a/e*2-1,-o/n*2+1),r.raycaster.setFromCamera(r.pointer,r.camera)}}),[w,e]);return s.useEffect((()=>{var t;e&&(w.current=null==(t=e.current)?void 0:t.getBoundingClientRect()),y()}),[e]),s.createElement("group",o.default({ref:m},d),x&&n.createPortal(s.createElement(b,{visible:t,canvasSize:E,frames:u,scene:C,track:e,rect:w,index:r},f),O,{events:{compute:j,priority:r},size:{width:null==(h=w.current)?void 0:h.width,height:null==(g=w.current)?void 0:g.height,top:null==(p=w.current)?void 0:p.top,left:null==(v=w.current)?void 0:v.left}}))})),E=s.forwardRef((({as:e="div",id:t,visible:r,className:n,style:c,index:i=1,track:a,frames:l=1/0,children:u,...f},m)=>{const h=s.useId(),g=s.useRef(null);return s.useImperativeHandle(m,(()=>g.current)),s.createElement(s.Fragment,null,s.createElement(e,o.default({ref:g,id:t,className:n,style:c},f)),s.createElement(d.In,null,s.createElement(w,{visible:r,key:h,track:g,frames:l,index:i},u)))})),C=s.forwardRef(((e,t)=>s.useContext(n.context)?s.createElement(w,o.default({ref:t},e)):s.createElement(E,o.default({ref:t},e))));C.Port=()=>s.createElement(d.Out,null),exports.View=C;

package/web/View.js

@@ -214,7 +214,7 @@ const CanvasView = /*#__PURE__*/React.forwardRef(({
   }, [track]);
   return /*#__PURE__*/React.createElement("group", _extends({
     ref: fref
-  }, props), ready && createPortal( /*#__PURE__*/React.createElement(Container, {
+  }, props), ready && createPortal(/*#__PURE__*/React.createElement(Container, {
     visible: visible,
     canvasSize: size,
     frames: frames,