@react-three/drei 9.120.4 → 9.120.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.120.4",
+  "version": "9.120.6",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [
@@ -47,7 +47,7 @@
     "stats.js": "^0.17.0",
     "suspend-react": "^0.1.3",
     "three-mesh-bvh": "^0.7.8",
-    "three-stdlib": "^2.34.0",
+    "three-stdlib": "^2.35.6",
     "troika-three-text": "^0.52.0",
     "tunnel-rat": "^0.1.2",
     "utility-types": "^3.11.0",

package/web/DragControls.js

@@ -4,12 +4,12 @@ import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 import { useGesture } from '@use-gesture/react';
 
-const initialModelPosition = new THREE.Vector3();
-const mousePosition2D = new THREE.Vector2();
-const mousePosition3D = new THREE.Vector3();
-const dragOffset = new THREE.Vector3();
-const dragPlaneNormal = new THREE.Vector3();
-const dragPlane = new THREE.Plane();
+const initialModelPosition = /* @__PURE__ */new THREE.Vector3();
+const mousePosition2D = /* @__PURE__ */new THREE.Vector2();
+const mousePosition3D = /* @__PURE__ */new THREE.Vector3();
+const dragOffset = /* @__PURE__ */new THREE.Vector3();
+const dragPlaneNormal = /* @__PURE__ */new THREE.Vector3();
+const dragPlane = /* @__PURE__ */new THREE.Plane();
 const DragControls = /*#__PURE__*/React.forwardRef(({
   autoTransform = true,
   matrix,

package/web/FaceControls.cjs.js

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

package/web/FaceControls.d.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { RefObject } from 'react';
 import type { FaceLandmarkerResult } from '@mediapipe/tasks-vision';
-import { VideoTextureProps } from '..';
+import { VideoTextureProps } from '../core/VideoTexture';
 import { FacemeshApi, FacemeshProps } from './Facemesh';
 export type FaceControlsProps = {
     camera?: THREE.Camera;

package/web/FaceControls.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import { forwardRef, useRef, useState, useCallback, useMemo, useImperativeHandle, useEffect, Suspense, useContext, createContext } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import { easing } from 'maath';
+import { VideoTexture } from '../core/VideoTexture.js';
+import { WebcamVideoTexture } from './WebcamVideoTexture.js';
 import { Facemesh } from './Facemesh.js';
 import { useFaceLandmarker } from './FaceLandmarker.js';
-import { WebcamVideoTexture } from './WebcamVideoTexture.js';
-import { VideoTexture } from '../core/VideoTexture.js';
 
 function mean(v1, v2) {
   return v1.clone().add(v2).multiplyScalar(0.5);

package/web/ScreenVideoTexture.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { VideoTextureProps } from '..';
+import * as THREE from 'three';
+import { VideoTextureProps } from '../core/VideoTexture';
 export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
     options?: DisplayMediaStreamOptions;
 };
 export declare const ScreenVideoTexture: React.ForwardRefExoticComponent<Omit<{
-    children?: (texture: import("three").VideoTexture) => React.ReactNode;
+    children?: (texture: THREE.VideoTexture) => React.ReactNode;
     src: string | MediaProvider | null;
 } & {
     unsuspend?: keyof HTMLVideoElementEventMap;
@@ -13,4 +14,4 @@ export declare const ScreenVideoTexture: React.ForwardRefExoticComponent<Omit<{
     onVideoFrame?: VideoFrameRequestCallback;
 } & Partial<Omit<HTMLVideoElement, "children" | "src" | "srcObject">>, "src"> & {
     options?: DisplayMediaStreamOptions;
-} & React.RefAttributes<import("three").VideoTexture>>;
+} & React.RefAttributes<THREE.VideoTexture>>;

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=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;
+"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=(()=>{const e=s.forwardRef(((e,t)=>s.useContext(n.context)?s.createElement(w,o.default({ref:t},e)):s.createElement(E,o.default({ref:t},e))));return e.Port=()=>s.createElement(d.Out,null),e})();exports.View=C;

package/web/View.js

@@ -5,8 +5,8 @@ import { context, useThree, createPortal, useFrame } from '@react-three/fiber';
 import tunnel from 'tunnel-rat';
 
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
-const col = new THREE.Color();
-const tracked = tunnel();
+const col = /* @__PURE__ */new THREE.Color();
+const tracked = /* @__PURE__ */tunnel();
 
 /**
  * In `@react-three/fiber` after `v8.0.0` but prior to `v8.1.0`, `state.size` contained only dimension
@@ -172,7 +172,7 @@ function Container({
     onPointerOver: () => null
   }));
 }
-const CanvasView = /*#__PURE__*/React.forwardRef(({
+const CanvasView = /* @__PURE__ */React.forwardRef(({
   track,
   visible = true,
   index = 1,
@@ -237,7 +237,7 @@ const CanvasView = /*#__PURE__*/React.forwardRef(({
     }
   }));
 });
-const HtmlView = /*#__PURE__*/React.forwardRef(({
+const HtmlView = /* @__PURE__ */React.forwardRef(({
   as: El = 'div',
   id,
   visible,
@@ -265,18 +265,21 @@ const HtmlView = /*#__PURE__*/React.forwardRef(({
     index: index
   }, children)));
 });
-const View = /*#__PURE__*/React.forwardRef((props, fref) => {
-  // If we're inside a canvas we should be able to access the context store
-  const store = React.useContext(context);
-  // If that's not the case we render a tunnel
-  if (!store) return /*#__PURE__*/React.createElement(HtmlView, _extends({
-    ref: fref
-  }, props));
-  // Otherwise a plain canvas-view
-  else return /*#__PURE__*/React.createElement(CanvasView, _extends({
-    ref: fref
-  }, props));
-});
-View.Port = () => /*#__PURE__*/React.createElement(tracked.Out, null);
+const View = /* @__PURE__ */(() => {
+  const _View = /*#__PURE__*/React.forwardRef((props, fref) => {
+    // If we're inside a canvas we should be able to access the context store
+    const store = React.useContext(context);
+    // If that's not the case we render a tunnel
+    if (!store) return /*#__PURE__*/React.createElement(HtmlView, _extends({
+      ref: fref
+    }, props));
+    // Otherwise a plain canvas-view
+    else return /*#__PURE__*/React.createElement(CanvasView, _extends({
+      ref: fref
+    }, props));
+  });
+  _View.Port = () => /*#__PURE__*/React.createElement(tracked.Out, null);
+  return _View;
+})();
 
 export { View };

package/web/WebcamVideoTexture.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { VideoTextureProps } from '..';
+import * as THREE from 'three';
+import { VideoTextureProps } from '../core/VideoTexture';
 export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
     constraints?: MediaStreamConstraints;
 };
 export declare const WebcamVideoTexture: React.ForwardRefExoticComponent<Omit<{
-    children?: (texture: import("three").VideoTexture) => React.ReactNode;
+    children?: (texture: THREE.VideoTexture) => React.ReactNode;
     src: string | MediaProvider | null;
 } & {
     unsuspend?: keyof HTMLVideoElementEventMap;
@@ -13,4 +14,4 @@ export declare const WebcamVideoTexture: React.ForwardRefExoticComponent<Omit<{
     onVideoFrame?: VideoFrameRequestCallback;
 } & Partial<Omit<HTMLVideoElement, "children" | "src" | "srcObject">>, "src"> & {
     constraints?: MediaStreamConstraints;
-} & React.RefAttributes<import("three").VideoTexture>>;
+} & React.RefAttributes<THREE.VideoTexture>>;