@react-three/drei 9.36.0 → 9.37.0

package/README.md

@@ -209,6 +209,21 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-perspectivecamera--perspective-camera-scene-st)
 
+```tsx
+type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
+  /** Registers the camera as the system default, fiber will start rendering with it */
+  makeDefault?: boolean
+  /** Making it manual will stop responsiveness and you have to calculate aspect ratio yourself. */
+  manual?: boolean
+  /** The contents will either follow the camera, or be hidden when filming if you pass a function */
+  children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode)
+  /** Number of frames to render, 0 */
+  frames?: number
+  /** Resolution of the FBO, 256 */
+  resolution?: number
+}
+```
+
 A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) that can set itself as the default.
 
 ```jsx
@@ -230,6 +245,18 @@ You can also drive it manually, it won't be responsive and you have to calculate
 <PerspectiveCamera manual aspect={...} onUpdate={(c) => c.updateProjectionMatrix()}>
 ```
 
+You can use the PerspectiveCamera to film contents into a RenderTarget, similar to CubeCamera. As a child you must provide a render-function which receives the texture as its first argument. The result of that function will _not follow the camera_, instead it will be set invisible while the the FBO renders so as to avoid issues where the meshes that receive the texture are interrering.
+
+```jsx
+<PerspectiveCamera position={[0, 0, 10]}>
+  {(texture) => (
+    <mesh geometry={plane}>
+      <meshBasicMaterial map={texture} />
+    </mesh>
+  )}
+</PerspectiveCamera>
+```
+
 #### OrthographicCamera
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-orthographiccamera--orthographic-camera-scene-st)
@@ -242,6 +269,18 @@ A responsive [THREE.OrthographicCamera](https://threejs.org/docs/#api/en/cameras
 </OrthographicCamera>
 ```
 
+You can use the OrthographicCamera to film contents into a RenderTarget, it has the same API as OrthographicCamera.
+
+```jsx
+<OrthographicCamera position={[0, 0, 10]}>
+  {(texture) => (
+    <mesh geometry={plane}>
+      <meshBasicMaterial map={texture} />
+    </mesh>
+  )}
+</OrthographicCamera>
+```
+
 #### CubeCamera
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/camera-cubecamera--default-story)
@@ -2339,7 +2378,7 @@ Masks use the stencil buffer to cut out areas of the screen. This is usually che
   /** If depth  of the masks own material will leak through, default: false */
   depthWrite?: boolean
   /** children must define a geometry, a render-prop function is allowed which may override the default material */
-  children: (spread: MaskSpread) => React.ReactNode | React.ReactNode
+  children: ((spread: MaskSpread) => React.ReactNode) | React.ReactNode
 />
 ```
 

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("./useCamera.cjs.js");function a(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");var o=a(e);const c=o.createContext({}),i=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:a=[80,80],renderPriority:m=0,autoClear:g=!0,onUpdate:b,onTarget:y,children:w})=>{const v=r.useThree((({size:e})=>e)),j=r.useThree((({camera:e})=>e)),q=r.useThree((({controls:e})=>e)),C=r.useThree((({gl:e})=>e)),x=r.useThree((({scene:e})=>e)),O=r.useThree((({invalidate:e})=>e)),T=o.useRef(),k=o.useRef(),P=o.useRef(null),[R]=o.useState((()=>new t.Scene)),E=o.useRef(!1),M=o.useRef(0),z=o.useRef(new t.Vector3(0,0,0)),Q=o.useRef(new t.Vector3(0,0,0));o.useEffect((()=>{Q.current.copy(j.up)}),[j]);const S=o.useCallback((e=>{E.current=!0,(q||y)&&(z.current=(null==q?void 0:q.target)||(null==y?void 0:y())),M.current=j.position.distanceTo(f),p.copy(j.quaternion),h.copy(e).multiplyScalar(M.current).add(f),s.lookAt(h),d.copy(s.quaternion),O()}),[q,j,y,O]);o.useEffect((()=>(x.background&&(T.current=x.background,x.background=null,R.background=T.current),()=>{T.current&&(x.background=T.current)})),[]),r.useFrame(((e,r)=>{if(P.current&&k.current){var t;if(E.current)if(p.angleTo(d)<.01)E.current=!1,"minPolarAngle"in q&&j.up.copy(Q.current);else{const e=r*i;p.rotateTowards(d,e),j.position.set(0,0,1).applyQuaternion(p).multiplyScalar(M.current).add(z.current),j.up.set(0,1,0).applyQuaternion(p).normalize(),j.quaternion.copy(p),b?b():q&&q.update(),O()}l.copy(j.matrix).invert(),null==(t=k.current)||t.quaternion.setFromRotationMatrix(l),g&&(C.autoClear=!1),C.clearDepth(),C.render(R,P.current)}}),m);const V=u.useCamera(P),W=o.useMemo((()=>({tweenCamera:S,raycast:V})),[S]),[_,D]=a,A=e.endsWith("-center")?0:e.endsWith("-left")?-v.width/2+_:v.width/2-_,F=e.startsWith("center-")?0:e.startsWith("top-")?v.height/2-D:-v.height/2+D;return r.createPortal(o.createElement(c.Provider,{value:W},o.createElement(n.OrthographicCamera,{ref:P,position:[0,0,200]}),o.createElement("group",{ref:k,position:[A,F,0]},w)),R)},exports.useGizmoContext=()=>o.useContext(c);
+"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("./useCamera.cjs.js");function a(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 o=a(e);const c=o.createContext({}),i=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:a=[80,80],renderPriority:m=0,autoClear:g=!0,onUpdate:b,onTarget:y,children:w})=>{const j=r.useThree((({size:e})=>e)),q=r.useThree((({camera:e})=>e)),v=r.useThree((({controls:e})=>e)),C=r.useThree((({gl:e})=>e)),O=r.useThree((({scene:e})=>e)),x=r.useThree((({invalidate:e})=>e)),T=o.useRef(),k=o.useRef(),P=o.useRef(null),[R]=o.useState((()=>new t.Scene)),E=o.useRef(!1),M=o.useRef(0),z=o.useRef(new t.Vector3(0,0,0)),Q=o.useRef(new t.Vector3(0,0,0));o.useEffect((()=>{Q.current.copy(q.up)}),[q]);const S=o.useCallback((e=>{E.current=!0,(v||y)&&(z.current=(null==v?void 0:v.target)||(null==y?void 0:y())),M.current=q.position.distanceTo(f),p.copy(q.quaternion),h.copy(e).multiplyScalar(M.current).add(f),s.lookAt(h),d.copy(s.quaternion),x()}),[v,q,y,x]);o.useEffect((()=>(O.background&&(T.current=O.background,O.background=null,R.background=T.current),()=>{T.current&&(O.background=T.current)})),[]),r.useFrame(((e,r)=>{if(P.current&&k.current){var t;if(E.current)if(p.angleTo(d)<.01)E.current=!1,"minPolarAngle"in v&&q.up.copy(Q.current);else{const e=r*i;p.rotateTowards(d,e),q.position.set(0,0,1).applyQuaternion(p).multiplyScalar(M.current).add(z.current),q.up.set(0,1,0).applyQuaternion(p).normalize(),q.quaternion.copy(p),b?b():v&&v.update(),x()}l.copy(q.matrix).invert(),null==(t=k.current)||t.quaternion.setFromRotationMatrix(l),g&&(C.autoClear=!1),C.clearDepth(),C.render(R,P.current)}}),m);const V=u.useCamera(P),W=o.useMemo((()=>({tweenCamera:S,raycast:V})),[S]),[_,D]=a,F=e.endsWith("-center")?0:e.endsWith("-left")?-j.width/2+_:j.width/2-_,A=e.startsWith("center-")?0:e.startsWith("top-")?j.height/2-D:-j.height/2+D;return r.createPortal(o.createElement(c.Provider,{value:W},o.createElement(n.OrthographicCamera,{ref:P,position:[0,0,200]}),o.createElement("group",{ref:k,position:[F,A,0]},w)),R)},exports.useGizmoContext=()=>o.useContext(c);

package/core/GizmoViewcube.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var c=n(e),s=i(t);const l="#f0f0f0",p="#999",u="black",m="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:c=p,textColor:h=u,strokeColor:y=m,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=s.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,y]);return s.createElement("meshLambertMaterial",{map:b,"map-encoding":g.outputEncoding,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?c:"white",transparent:!0,opacity:d})},C=e=>{const{tweenCamera:t,raycast:r}=o.useGizmoContext(),[a,n]=s.useState(null);return s.createElement("mesh",{raycast:r,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>s.createElement(x,c.default({key:r,index:r,hover:a===r},e)))),s.createElement("boxGeometry",null))},E=({onClick:e,dimensions:t,position:r,hoverColor:a=p})=>{const{tweenCamera:n,raycast:i}=o.useGizmoContext(),[c,l]=s.useState(!1);return s.createElement("mesh",{scale:1.01,position:r,raycast:i,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},s.createElement("meshBasicMaterial",{color:c?a:"white",transparent:!0,opacity:.6,visible:c}),s.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>s.createElement("group",{scale:[60,60,60]},s.createElement(C,e),g.map(((t,r)=>s.createElement(E,c.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>s.createElement(E,c.default({key:r,position:t,dimensions:d},e)))),s.createElement("ambientLight",{intensity:.5}),s.createElement("pointLight",{position:[10,10,10],intensity:.5}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",u="#999",p="black",m="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:s=u,textColor:h=p,strokeColor:y=m,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-encoding":g.outputEncoding,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?s:"white",transparent:!0,opacity:d})},C=e=>{const{tweenCamera:t,raycast:r}=o.useGizmoContext(),[a,n]=c.useState(null);return c.createElement("mesh",{raycast:r,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>c.createElement(x,s.default({key:r,index:r,hover:a===r},e)))),c.createElement("boxGeometry",null))},E=({onClick:e,dimensions:t,position:r,hoverColor:a=u})=>{const{tweenCamera:n,raycast:i}=o.useGizmoContext(),[s,l]=c.useState(!1);return c.createElement("mesh",{scale:1.01,position:r,raycast:i,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},c.createElement("meshBasicMaterial",{color:s?a:"white",transparent:!0,opacity:.6,visible:s}),c.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>c.createElement("group",{scale:[60,60,60]},c.createElement(C,e),g.map(((t,r)=>c.createElement(E,s.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>c.createElement(E,s.default({key:r,position:t,dimensions:d},e)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}));

package/core/GizmoViewport.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),a=require("@react-three/fiber"),r=require("three"),o=require("./GizmoHelper.cjs.js");function n(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(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var i=n(e),c=l(t);function s({scale:e=[.8,.05,.05],color:t,rotation:a}){return c.createElement("group",{rotation:a},c.createElement("mesh",{position:[.4,0,0]},c.createElement("boxGeometry",{args:e}),c.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function u({onClick:e,font:t,disabled:o,arcStyle:n,label:l,labelColor:s,axisHeadScale:u=1,...p}){const f=a.useThree((e=>e.gl)),m=c.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const a=e.getContext("2d");return a.beginPath(),a.arc(32,32,16,0,2*Math.PI),a.closePath(),a.fillStyle=n,a.fill(),l&&(a.font=t,a.textAlign="center",a.fillStyle=s,a.fillText(l,32,41)),new r.CanvasTexture(e)}),[n,l,s,t]),[d,b]=c.useState(!1),g=(l?1:.75)*(d?1.2:1)*u;return c.createElement("sprite",i.default({scale:g,onPointerOver:o?void 0:e=>{e.stopPropagation(),b(!0)},onPointerOut:o?void 0:e||(e=>{e.stopPropagation(),b(!1)})},p),c.createElement("spriteMaterial",{map:m,"map-encoding":f.outputEncoding,"map-anisotropy":f.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:a,font:r="18px Inter var, Arial, sans-serif",axisColors:n=["#ff2060","#20df80","#2080ff"],axisHeadScale:l=1,axisScale:p,labels:f=["X","Y","Z"],labelColor:m="#000",onClick:d,...b})=>{const[g,E,h]=n,{tweenCamera:y,raycast:x}=o.useGizmoContext(),j={font:r,disabled:a,labelColor:m,raycast:x,onClick:d,axisHeadScale:l,onPointerDown:a?void 0:e=>{y(e.object.position),e.stopPropagation()}};return c.createElement("group",i.default({scale:40},b),c.createElement(s,{color:g,rotation:[0,0,0],scale:p}),c.createElement(s,{color:E,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:h,rotation:[0,-Math.PI/2,0],scale:p}),!t&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[1,0,0],label:f[0]},j)),c.createElement(u,i.default({arcStyle:E,position:[0,1,0],label:f[1]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,0,1],label:f[2]},j)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[-1,0,0]},j)),c.createElement(u,i.default({arcStyle:E,position:[0,-1,0]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,0,-1]},j)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),a=require("three"),o=require("./GizmoHelper.cjs.js");function n(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("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./useCamera.cjs.js");var i=n(e),c=l(t);function s({scale:e=[.8,.05,.05],color:t,rotation:r}){return c.createElement("group",{rotation:r},c.createElement("mesh",{position:[.4,0,0]},c.createElement("boxGeometry",{args:e}),c.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function u({onClick:e,font:t,disabled:o,arcStyle:n,label:l,labelColor:s,axisHeadScale:u=1,...p}){const f=r.useThree((e=>e.gl)),m=c.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const r=e.getContext("2d");return r.beginPath(),r.arc(32,32,16,0,2*Math.PI),r.closePath(),r.fillStyle=n,r.fill(),l&&(r.font=t,r.textAlign="center",r.fillStyle=s,r.fillText(l,32,41)),new a.CanvasTexture(e)}),[n,l,s,t]),[d,b]=c.useState(!1),g=(l?1:.75)*(d?1.2:1)*u;return c.createElement("sprite",i.default({scale:g,onPointerOver:o?void 0:e=>{e.stopPropagation(),b(!0)},onPointerOut:o?void 0:e||(e=>{e.stopPropagation(),b(!1)})},p),c.createElement("spriteMaterial",{map:m,"map-encoding":f.outputEncoding,"map-anisotropy":f.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:a="18px Inter var, Arial, sans-serif",axisColors:n=["#ff2060","#20df80","#2080ff"],axisHeadScale:l=1,axisScale:p,labels:f=["X","Y","Z"],labelColor:m="#000",onClick:d,...b})=>{const[g,E,h]=n,{tweenCamera:y,raycast:x}=o.useGizmoContext(),j={font:a,disabled:r,labelColor:m,raycast:x,onClick:d,axisHeadScale:l,onPointerDown:r?void 0:e=>{y(e.object.position),e.stopPropagation()}};return c.createElement("group",i.default({scale:40},b),c.createElement(s,{color:g,rotation:[0,0,0],scale:p}),c.createElement(s,{color:E,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:h,rotation:[0,-Math.PI/2,0],scale:p}),!t&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[1,0,0],label:f[0]},j)),c.createElement(u,i.default({arcStyle:E,position:[0,1,0],label:f[1]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,0,1],label:f[2]},j)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[-1,0,0]},j)),c.createElement(u,i.default({arcStyle:E,position:[0,-1,0]},j)),c.createElement(u,i.default({arcStyle:h,position:[0,0,-1]},j)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}))};

package/core/OrthographicCamera.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=a(e),f=c(r),o=a(u);const i=f.forwardRef((({makeDefault:e,...r},u)=>{const a=t.useThree((({set:e})=>e)),c=t.useThree((({camera:e})=>e)),i=t.useThree((({size:e})=>e)),s=f.useRef(null);return f.useLayoutEffect((()=>{r.manual||s.current.updateProjectionMatrix()}),[i,r]),f.useLayoutEffect((()=>{s.current.updateProjectionMatrix()})),f.useLayoutEffect((()=>{if(e){const e=c;return a((()=>({camera:s.current}))),()=>a((()=>({camera:e})))}}),[s,e,a]),f.createElement("orthographicCamera",n.default({left:i.width/-2,right:i.width/2,top:i.height/2,bottom:i.height/-2,ref:o.default([s,u])},r))}));exports.OrthographicCamera=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs"),n=require("./useFBO.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var i=a(e),o=c(r),f=a(u);const s=o.forwardRef((({resolution:e=256,frames:r=1/0,children:u,makeDefault:a,...c},s)=>{const l=t.useThree((({set:e})=>e)),d=t.useThree((({camera:e})=>e)),h=t.useThree((({size:e})=>e)),m=o.useRef(null),g=o.useRef(null),p=n.useFBO(e);o.useLayoutEffect((()=>{c.manual||m.current.updateProjectionMatrix()}),[h,c]),o.useLayoutEffect((()=>{m.current.updateProjectionMatrix()})),o.useLayoutEffect((()=>{if(a){const e=d;return l((()=>({camera:m.current}))),()=>l((()=>({camera:e})))}}),[m,a,l]);const b="function"==typeof u;return t.useFrame((e=>{b&&(r===1/0||0<r)&&(g.current.visible=!1,e.gl.setRenderTarget(p),e.gl.render(e.scene,m.current),e.gl.setRenderTarget(null),g.current.visible=!0)})),o.createElement(o.Fragment,null,o.createElement("orthographicCamera",i.default({left:h.width/-2,right:h.width/2,top:h.height/2,bottom:h.height/-2,ref:f.default([m,s])},c),!b&&u),o.createElement("group",{ref:g},b&&u(p.texture)))}));exports.OrthographicCamera=s;

package/core/OrthographicCamera.d.ts

@@ -1,25 +1,9 @@
+import * as THREE from 'three';
 import * as React from 'react';
-import { OrthographicCamera as OrthographicCameraImpl } from 'three';
-export declare const OrthographicCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<OrthographicCameraImpl>, import("@react-three/fiber").NodeProps<OrthographicCameraImpl, typeof OrthographicCameraImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+export declare const OrthographicCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").OrthographicCameraProps, "children"> & {
     makeDefault?: boolean | undefined;
     manual?: boolean | undefined;
-    children?: React.ReactNode;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "left" | "right" | "bottom" | "top" | "manual" | "zoom" | "view" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "near" | "far" | "setViewOffset" | "clearViewOffset" | "updateProjectionMatrix" | "isOrthographicCamera" | "makeDefault"> & React.RefAttributes<unknown>>;
+    children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);
+    frames?: number | undefined;
+    resolution?: number | undefined;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "left" | "right" | "bottom" | "top" | "manual" | "zoom" | "view" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "near" | "far" | "setViewOffset" | "clearViewOffset" | "updateProjectionMatrix" | "isOrthographicCamera" | "resolution" | "frames" | "makeDefault"> & React.RefAttributes<unknown>>;

package/core/OrthographicCamera.js

@@ -1,9 +1,15 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useThree } from '@react-three/fiber';
+import { useThree, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
+import { useFBO } from './useFBO.js';
+
+const isFunction = node => typeof node === 'function';
 
 const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
+  resolution = 256,
+  frames = Infinity,
+  children,
   makeDefault,
   ...props
 }, ref) => {
@@ -17,6 +23,8 @@ const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
     size
   }) => size);
   const cameraRef = React.useRef(null);
+  const groupRef = React.useRef(null);
+  const fbo = useFBO(resolution);
   React.useLayoutEffect(() => {
     if (!props.manual) {
       cameraRef.current.updateProjectionMatrix();
@@ -38,13 +46,26 @@ const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
     // that must exchange the default, and clean up after itself on unmount.
 
   }, [cameraRef, makeDefault, set]);
-  return /*#__PURE__*/React.createElement("orthographicCamera", _extends({
+  let count = 0;
+  const functional = isFunction(children);
+  useFrame(state => {
+    if (functional && (frames === Infinity || count < frames)) {
+      groupRef.current.visible = false;
+      state.gl.setRenderTarget(fbo);
+      state.gl.render(state.scene, cameraRef.current);
+      state.gl.setRenderTarget(null);
+      groupRef.current.visible = true;
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("orthographicCamera", _extends({
     left: size.width / -2,
     right: size.width / 2,
     top: size.height / 2,
     bottom: size.height / -2,
     ref: mergeRefs([cameraRef, ref])
-  }, props));
+  }, props), !functional && children), /*#__PURE__*/React.createElement("group", {
+    ref: groupRef
+  }, functional && children(fbo.texture)));
 });
 
 export { OrthographicCamera };

package/core/PerspectiveCamera.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=a(e),f=c(r),s=a(u);const i=f.forwardRef((({makeDefault:e,...r},u)=>{const a=t.useThree((({set:e})=>e)),c=t.useThree((({camera:e})=>e)),i=t.useThree((({size:e})=>e)),o=f.useRef(null);return f.useLayoutEffect((()=>{r.manual||(o.current.aspect=i.width/i.height)}),[i,r]),f.useLayoutEffect((()=>{o.current.updateProjectionMatrix()})),f.useLayoutEffect((()=>{if(e){const e=c;return a((()=>({camera:o.current}))),()=>a((()=>({camera:e})))}}),[o,e,a]),f.createElement("perspectiveCamera",n.default({ref:s.default([o,u])},r))}));exports.PerspectiveCamera=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("react-merge-refs"),n=require("./useFBO.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var s=a(e),f=c(r),i=a(u);const l=f.forwardRef((({resolution:e=256,frames:r=1/0,makeDefault:u,children:a,...c},l)=>{const o=t.useThree((({set:e})=>e)),d=t.useThree((({camera:e})=>e)),m=t.useThree((({size:e})=>e)),p=f.useRef(null),b=f.useRef(null),g=n.useFBO(e);f.useLayoutEffect((()=>{c.manual||(p.current.aspect=m.width/m.height)}),[m,c]),f.useLayoutEffect((()=>{p.current.updateProjectionMatrix()}));const h="function"==typeof a;return t.useFrame((e=>{h&&(r===1/0||0<r)&&(b.current.visible=!1,e.gl.setRenderTarget(g),e.gl.render(e.scene,p.current),e.gl.setRenderTarget(null),b.current.visible=!0)})),f.useLayoutEffect((()=>{if(u){const e=d;return o((()=>({camera:p.current}))),()=>o((()=>({camera:e})))}}),[p,u,o]),f.createElement(f.Fragment,null,f.createElement("perspectiveCamera",s.default({ref:i.default([p,l])},c),!h&&a),f.createElement("group",{ref:b},h&&a(g.texture)))}));exports.PerspectiveCamera=l;

package/core/PerspectiveCamera.d.ts

@@ -1,25 +1,9 @@
+import * as THREE from 'three';
 import * as React from 'react';
-import { PerspectiveCamera as PerspectiveCameraImpl } from 'three';
-export declare const PerspectiveCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<PerspectiveCameraImpl>, import("@react-three/fiber").NodeProps<PerspectiveCameraImpl, typeof PerspectiveCameraImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+export declare const PerspectiveCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").PerspectiveCameraProps, "children"> & {
     makeDefault?: boolean | undefined;
     manual?: boolean | undefined;
-    children?: React.ReactNode;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "manual" | "zoom" | "view" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "near" | "far" | "isPerspectiveCamera" | "fov" | "aspect" | "focus" | "filmGauge" | "filmOffset" | "setFocalLength" | "getFocalLength" | "getEffectiveFOV" | "getFilmWidth" | "getFilmHeight" | "setViewOffset" | "clearViewOffset" | "updateProjectionMatrix" | "setLens" | "makeDefault"> & React.RefAttributes<unknown>>;
+    children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);
+    frames?: number | undefined;
+    resolution?: number | undefined;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "manual" | "zoom" | "view" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "near" | "far" | "isPerspectiveCamera" | "fov" | "aspect" | "focus" | "filmGauge" | "filmOffset" | "setFocalLength" | "getFocalLength" | "getEffectiveFOV" | "getFilmWidth" | "getFilmHeight" | "setViewOffset" | "clearViewOffset" | "updateProjectionMatrix" | "setLens" | "resolution" | "frames" | "makeDefault"> & React.RefAttributes<unknown>>;

package/core/PerspectiveCamera.js

@@ -1,10 +1,16 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useThree } from '@react-three/fiber';
+import { useThree, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
+import { useFBO } from './useFBO.js';
+
+const isFunction = node => typeof node === 'function';
 
 const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
+  resolution = 256,
+  frames = Infinity,
   makeDefault,
+  children,
   ...props
 }, ref) => {
   const set = useThree(({
@@ -17,6 +23,8 @@ const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
     size
   }) => size);
   const cameraRef = React.useRef(null);
+  const groupRef = React.useRef(null);
+  const fbo = useFBO(resolution);
   React.useLayoutEffect(() => {
     if (!props.manual) {
       cameraRef.current.aspect = size.width / size.height;
@@ -25,6 +33,17 @@ const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
   React.useLayoutEffect(() => {
     cameraRef.current.updateProjectionMatrix();
   });
+  let count = 0;
+  const functional = isFunction(children);
+  useFrame(state => {
+    if (functional && (frames === Infinity || count < frames)) {
+      groupRef.current.visible = false;
+      state.gl.setRenderTarget(fbo);
+      state.gl.render(state.scene, cameraRef.current);
+      state.gl.setRenderTarget(null);
+      groupRef.current.visible = true;
+    }
+  });
   React.useLayoutEffect(() => {
     if (makeDefault) {
       const oldCam = camera;
@@ -38,9 +57,11 @@ const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
     // that must exchange the default, and clean up after itself on unmount.
 
   }, [cameraRef, makeDefault, set]);
-  return /*#__PURE__*/React.createElement("perspectiveCamera", _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("perspectiveCamera", _extends({
     ref: mergeRefs([cameraRef, ref])
-  }, props));
+  }, props), !functional && children), /*#__PURE__*/React.createElement("group", {
+    ref: groupRef
+  }, functional && children(fbo.texture)));
 });
 
 export { PerspectiveCamera };

package/core/RenderTexture.d.ts

@@ -8,4 +8,4 @@ export declare const RenderTexture: React.ForwardRefExoticComponent<Pick<import(
     eventPriority?: number | undefined;
     frames?: number | undefined;
     children: React.ReactNode;
-}, "attach" | "args" | "children" | "key" | "onUpdate" | "rotation" | "matrix" | "dispose" | "type" | "id" | "uuid" | "name" | "matrixAutoUpdate" | "userData" | "updateMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "center" | "source" | "repeat" | "image" | "offset" | "needsUpdate" | "version" | "width" | "height" | "sourceFile" | "mipmaps" | "mapping" | "wrapS" | "wrapT" | "magFilter" | "minFilter" | "anisotropy" | "format" | "internalFormat" | "generateMipmaps" | "premultiplyAlpha" | "flipY" | "unpackAlignment" | "encoding" | "isRenderTargetTexture" | "needsPMREMUpdate" | "isTexture" | "transformUv" | "frames" | "renderPriority" | "samples" | "eventPriority"> & React.RefAttributes<unknown>>;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | "rotation" | "matrix" | "dispose" | "type" | "id" | "uuid" | "name" | "matrixAutoUpdate" | "userData" | "updateMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "center" | "source" | "repeat" | "image" | "offset" | "needsUpdate" | "version" | "width" | "height" | "sourceFile" | "mipmaps" | "mapping" | "wrapS" | "wrapT" | "magFilter" | "minFilter" | "anisotropy" | "format" | "internalFormat" | "generateMipmaps" | "premultiplyAlpha" | "flipY" | "unpackAlignment" | "encoding" | "isRenderTargetTexture" | "needsPMREMUpdate" | "isTexture" | "transformUv" | "samples" | "frames" | "renderPriority" | "eventPriority"> & React.RefAttributes<unknown>>;