@ohos-ports/react-three-drei 10.7.7-beta.0

package/core/PositionalAudio.d.ts

@@ -0,0 +1,9 @@
+import { PositionalAudio as PositionalAudioImpl } from 'three';
+import { ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type PositionalAudioProps = Omit<ThreeElements['positionalAudio'], 'ref' | 'args'> & {
+    url: string;
+    distance?: number;
+    loop?: boolean;
+};
+export declare const PositionalAudio: ForwardRefComponent<PositionalAudioProps, PositionalAudioImpl>;

package/core/PositionalAudio.js

@@ -0,0 +1,46 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { AudioListener, AudioLoader } from 'three';
+import { useThree, useLoader } from '@react-three/fiber';
+
+const PositionalAudio = /* @__PURE__ */React.forwardRef(({
+  url,
+  distance = 1,
+  loop = true,
+  autoplay,
+  ...props
+}, ref) => {
+  const sound = React.useRef(null);
+  React.useImperativeHandle(ref, () => sound.current, []);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const [listener] = React.useState(() => new AudioListener());
+  const buffer = useLoader(AudioLoader, url);
+  React.useEffect(() => {
+    const _sound = sound.current;
+    if (_sound) {
+      _sound.setBuffer(buffer);
+      _sound.setRefDistance(distance);
+      _sound.setLoop(loop);
+      if (autoplay && !_sound.isPlaying) _sound.play();
+    }
+  }, [buffer, camera, distance, loop]);
+  React.useEffect(() => {
+    const _sound = sound.current;
+    camera.add(listener);
+    return () => {
+      camera.remove(listener);
+      if (_sound) {
+        if (_sound.isPlaying) _sound.stop();
+        if (_sound.source && _sound.source._connected) _sound.disconnect();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("positionalAudio", _extends({
+    ref: sound,
+    args: [listener]
+  }, props));
+});
+
+export { PositionalAudio };

package/core/Preload.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=u(r);exports.Preload=function({all:r,scene:u,camera:n}){const a=t.useThree((({gl:e})=>e)),s=t.useThree((({camera:e})=>e)),i=t.useThree((({scene:e})=>e));return c.useLayoutEffect((()=>{const t=[];r&&(u||i).traverse((e=>{!1===e.visible&&(t.push(e),e.visible=!0)})),a.compile(u||i,n||s);const c=new e.WebGLCubeRenderTarget(128);new e.CubeCamera(.01,1e5,c).update(a,u||i),c.dispose(),t.forEach((e=>e.visible=!1))}),[]),null};

package/core/Preload.d.ts

@@ -0,0 +1,7 @@
+import { Object3D, Camera } from 'three';
+export type PreloadProps = {
+    all?: boolean;
+    scene?: Object3D;
+    camera?: Camera;
+};
+export declare function Preload({ all, scene, camera }: PreloadProps): null;

package/core/Preload.js

@@ -0,0 +1,44 @@
+import { WebGLCubeRenderTarget, CubeCamera } from 'three';
+import * as React from 'react';
+import { useThree } from '@react-three/fiber';
+
+function Preload({
+  all,
+  scene,
+  camera
+}) {
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const dCamera = useThree(({
+    camera
+  }) => camera);
+  const dScene = useThree(({
+    scene
+  }) => scene);
+
+  // Layout effect because it must run before React commits
+  React.useLayoutEffect(() => {
+    const invisible = [];
+    if (all) {
+      (scene || dScene).traverse(object => {
+        if (object.visible === false) {
+          invisible.push(object);
+          object.visible = true;
+        }
+      });
+    }
+    // Now compile the scene
+    gl.compile(scene || dScene, camera || dCamera);
+    // And for good measure, hit it with a cube camera
+    const cubeRenderTarget = new WebGLCubeRenderTarget(128);
+    const cubeCamera = new CubeCamera(0.01, 100000, cubeRenderTarget);
+    cubeCamera.update(gl, scene || dScene);
+    cubeRenderTarget.dispose();
+    // Flips these objects back
+    invisible.forEach(object => object.visible = false);
+  }, []);
+  return null;
+}
+
+export { Preload };

package/core/Progress.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("zustand");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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=a(e);let n=0;const s=t.create((e=>(r.DefaultLoadingManager.onStart=(r,t,a)=>{e({active:!0,item:r,loaded:t,total:a,progress:(t-n)/(a-n)*100})},r.DefaultLoadingManager.onLoad=()=>{e({active:!1})},r.DefaultLoadingManager.onError=r=>e((e=>({errors:[...e.errors,r]}))),r.DefaultLoadingManager.onProgress=(r,t,a)=>{t===a&&(n=a),e({active:!0,item:r,loaded:t,total:a,progress:(t-n)/(a-n)*100||100})},{errors:[],active:!1,progress:0,item:"",loaded:0,total:0})));exports.Progress=function({children:e}){const r=s();return o.createElement(o.Fragment,null,null==e?void 0:e(r))},exports.useProgress=s;

package/core/Progress.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+type Data = {
+    errors: string[];
+    active: boolean;
+    progress: number;
+    item: string;
+    loaded: number;
+    total: number;
+};
+declare const useProgress: import("zustand").UseBoundStore<import("zustand").StoreApi<Data>>;
+export { useProgress };
+export declare function Progress({ children }: {
+    children?: (result: Data) => React.ReactNode;
+}): React.JSX.Element;

package/core/Progress.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { DefaultLoadingManager } from 'three';
+import { create } from 'zustand';
+
+let saveLastTotalLoaded = 0;
+const useProgress = /* @__PURE__ */create(set => {
+  DefaultLoadingManager.onStart = (item, loaded, total) => {
+    set({
+      active: true,
+      item,
+      loaded,
+      total,
+      progress: (loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded) * 100
+    });
+  };
+  DefaultLoadingManager.onLoad = () => {
+    set({
+      active: false
+    });
+  };
+  DefaultLoadingManager.onError = item => set(state => ({
+    errors: [...state.errors, item]
+  }));
+  DefaultLoadingManager.onProgress = (item, loaded, total) => {
+    if (loaded === total) {
+      saveLastTotalLoaded = total;
+    }
+    set({
+      active: true,
+      item,
+      loaded,
+      total,
+      progress: (loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded) * 100 || 100
+    });
+  };
+  return {
+    errors: [],
+    active: false,
+    progress: 0,
+    item: '',
+    loaded: 0,
+    total: 0
+  };
+});
+
+//
+
+function Progress({
+  children
+}) {
+  const result = useProgress();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(result));
+}
+
+export { Progress, useProgress };

package/core/QuadraticBezierLine.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("./Line.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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("@react-three/fiber"),require("three-stdlib");var u=o(e),s=c(t);const i=new r.Vector3,a=s.forwardRef((function({start:e=[0,0,0],end:t=[0,0,0],mid:o,segments:c=20,...a},f){const d=s.useRef(null);s.useImperativeHandle(f,(()=>d.current));const[l]=s.useState((()=>new r.QuadraticBezierCurve3(void 0,void 0,void 0))),v=s.useCallback(((e,t,n,o=20)=>(e instanceof r.Vector3?l.v0.copy(e):l.v0.set(...e),t instanceof r.Vector3?l.v2.copy(t):l.v2.set(...t),n instanceof r.Vector3?l.v1.copy(n):Array.isArray(n)?l.v1.set(...n):l.v1.copy(l.v0.clone().add(l.v2.clone().sub(l.v0)).add(i.set(0,l.v0.y-l.v2.y,0))),l.getPoints(o))),[]);s.useLayoutEffect((()=>{d.current.setPoints=(e,t,r)=>{const n=v(e,t,r);d.current.geometry&&d.current.geometry.setPositions(n.map((e=>e.toArray())).flat())}}),[]);const y=s.useMemo((()=>v(e,t,o,c)),[e,t,o,c]);return s.createElement(n.Line,u.default({ref:d,points:y},a))}));exports.QuadraticBezierLine=a;

package/core/QuadraticBezierLine.d.ts

@@ -0,0 +1,14 @@
+import { Vector3 } from 'three';
+import { Line2 } from 'three-stdlib';
+import { LineProps } from './Line';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type QuadraticBezierLineRef = Line2 & {
+    setPoints(start: Vector3 | [number, number, number], end: Vector3 | [number, number, number], mid: Vector3 | [number, number, number]): void;
+};
+export type QuadraticBezierLineProps = Omit<LineProps, 'points' | 'ref'> & {
+    start: Vector3 | [number, number, number];
+    end: Vector3 | [number, number, number];
+    mid?: Vector3 | [number, number, number];
+    segments?: number;
+};
+export declare const QuadraticBezierLine: ForwardRefComponent<QuadraticBezierLineProps, QuadraticBezierLineRef>;

package/core/QuadraticBezierLine.js

@@ -0,0 +1,42 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { QuadraticBezierCurve3, Vector3 } from 'three';
+import { Line } from './Line.js';
+
+const v = /* @__PURE__ */new Vector3();
+const QuadraticBezierLine = /* @__PURE__ */React.forwardRef(function QuadraticBezierLine({
+  start = [0, 0, 0],
+  end = [0, 0, 0],
+  mid,
+  segments = 20,
+  ...rest
+}, forwardref) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardref, () => ref.current);
+  const [curve] = React.useState(() => new QuadraticBezierCurve3(undefined, undefined, undefined));
+  const getPoints = React.useCallback((start, end, mid, segments = 20) => {
+    if (start instanceof Vector3) curve.v0.copy(start);else curve.v0.set(...start);
+    if (end instanceof Vector3) curve.v2.copy(end);else curve.v2.set(...end);
+    if (mid instanceof Vector3) {
+      curve.v1.copy(mid);
+    } else if (Array.isArray(mid)) {
+      curve.v1.set(...mid);
+    } else {
+      curve.v1.copy(curve.v0.clone().add(curve.v2.clone().sub(curve.v0)).add(v.set(0, curve.v0.y - curve.v2.y, 0)));
+    }
+    return curve.getPoints(segments);
+  }, []);
+  React.useLayoutEffect(() => {
+    ref.current.setPoints = (start, end, mid) => {
+      const points = getPoints(start, end, mid);
+      if (ref.current.geometry) ref.current.geometry.setPositions(points.map(p => p.toArray()).flat());
+    };
+  }, []);
+  const points = React.useMemo(() => getPoints(start, end, mid, segments), [start, end, mid, segments]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    points: points
+  }, rest));
+});
+
+export { QuadraticBezierLine };

package/core/RenderCubeTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var 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)}var i=a(e),o=u(r),c=u(t);const l=c.forwardRef((({children:e,compute:r,renderPriority:t=-1,eventPriority:a=0,frames:u=1/0,stencilBuffer:l=!1,depthBuffer:f=!0,generateMipmaps:p=!1,resolution:m=896,near:d=.1,far:b=1e3,flip:x=!1,position:g,rotation:h,scale:y,quaternion:v,matrix:P,matrixAutoUpdate:j,...E},O)=>{const{size:q,viewport:w}=n.useThree(),M=c.useRef(null),T=c.useMemo((()=>{const e=new o.WebGLCubeRenderTarget(Math.max((m||q.width)*w.dpr,(m||q.height)*w.dpr),{stencilBuffer:l,depthBuffer:f,generateMipmaps:p});return e.texture.isRenderTargetTexture=!x,e.texture.flipY=!0,e.texture.type=o.HalfFloatType,e}),[m,x]);c.useEffect((()=>()=>T.dispose()),[T]);const[R]=c.useState((()=>new o.Scene));return c.useImperativeHandle(O,(()=>({scene:R,fbo:T,camera:M.current})),[T]),c.createElement(c.Fragment,null,n.createPortal(c.createElement(s,{renderPriority:t,frames:u,camera:M},e,c.createElement("group",{onPointerOver:()=>null})),R,{events:{compute:r,priority:a}}),c.createElement("primitive",i.default({object:T.texture},E)),c.createElement("cubeCamera",{ref:M,args:[d,b,T],position:g,rotation:h,scale:y,quaternion:v,matrix:P,matrixAutoUpdate:j}))}));function s({frames:e,renderPriority:r,children:t,camera:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(a.current.update(r.gl,r.scene),u++)}),r),c.createElement(c.Fragment,null,t)}exports.RenderCubeTexture=l;

package/core/RenderCubeTexture.d.ts

@@ -0,0 +1,30 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ComputeFunction, ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type RenderCubeTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args' | 'rotation'> & {
+    stencilBuffer?: boolean;
+    depthBuffer?: boolean;
+    generateMipmaps?: boolean;
+    renderPriority?: number;
+    eventPriority?: number;
+    frames?: number;
+    compute?: ComputeFunction;
+    flip?: boolean;
+    resolution?: number;
+    children: React.ReactNode;
+    near?: number;
+    far?: number;
+    position?: ReactThreeFiber.Vector3;
+    rotation?: ReactThreeFiber.Euler;
+    scale?: ReactThreeFiber.Vector3;
+    quaternion?: ReactThreeFiber.Quaternion;
+    matrix?: ReactThreeFiber.Matrix4;
+    matrixAutoUpdate?: boolean;
+};
+export type RenderCubeTextureApi = {
+    scene: THREE.Scene;
+    fbo: THREE.WebGLCubeRenderTarget;
+    camera: THREE.CubeCamera;
+};
+export declare const RenderCubeTexture: ForwardRefComponent<RenderCubeTextureProps, RenderCubeTextureApi>;

package/core/RenderCubeTexture.js

@@ -0,0 +1,96 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { useThree, createPortal, useFrame } from '@react-three/fiber';
+
+const RenderCubeTexture = /* @__PURE__ */React.forwardRef(({
+  children,
+  compute,
+  renderPriority = -1,
+  eventPriority = 0,
+  frames = Infinity,
+  stencilBuffer = false,
+  depthBuffer = true,
+  generateMipmaps = false,
+  resolution = 896,
+  near = 0.1,
+  far = 1000,
+  flip = false,
+  position,
+  rotation,
+  scale,
+  quaternion,
+  matrix,
+  matrixAutoUpdate,
+  ...props
+}, forwardRef) => {
+  const {
+    size,
+    viewport
+  } = useThree();
+  const camera = React.useRef(null);
+  const fbo = React.useMemo(() => {
+    const fbo = new THREE.WebGLCubeRenderTarget(Math.max((resolution || size.width) * viewport.dpr, (resolution || size.height) * viewport.dpr), {
+      stencilBuffer,
+      depthBuffer,
+      generateMipmaps
+    });
+    fbo.texture.isRenderTargetTexture = !flip;
+    fbo.texture.flipY = true;
+    fbo.texture.type = THREE.HalfFloatType;
+    return fbo;
+  }, [resolution, flip]);
+  React.useEffect(() => {
+    return () => fbo.dispose();
+  }, [fbo]);
+  const [vScene] = React.useState(() => new THREE.Scene());
+  React.useImperativeHandle(forwardRef, () => ({
+    scene: vScene,
+    fbo,
+    camera: camera.current
+  }), [fbo]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal(/*#__PURE__*/React.createElement(Container, {
+    renderPriority: renderPriority,
+    frames: frames,
+    camera: camera
+  }, children, /*#__PURE__*/React.createElement("group", {
+    onPointerOver: () => null
+  })), vScene, {
+    events: {
+      compute,
+      priority: eventPriority
+    }
+  }), /*#__PURE__*/React.createElement("primitive", _extends({
+    object: fbo.texture
+  }, props)), /*#__PURE__*/React.createElement("cubeCamera", {
+    ref: camera,
+    args: [near, far, fbo],
+    position: position,
+    rotation: rotation,
+    scale: scale,
+    quaternion: quaternion,
+    matrix: matrix,
+    matrixAutoUpdate: matrixAutoUpdate
+  }));
+});
+
+// The container component has to be separate, it can not be inlined because "useFrame(state" when run inside createPortal will return
+// the portals own state which includes user-land overrides (custom cameras etc), but if it is executed in <RenderTexture>'s render function
+// it would return the default state.
+function Container({
+  frames,
+  renderPriority,
+  children,
+  camera
+}) {
+  let count = 0;
+  useFrame(state => {
+    if (frames === Infinity || count < frames) {
+      camera.current.update(state.gl, state.scene);
+      count++;
+    }
+  }, renderPriority);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+export { RenderCubeTexture };

package/core/RenderTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./Fbo.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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)}var u=l(e),o=i(r),s=i(t);const c=s.forwardRef((({children:e,compute:r,width:t,height:l,samples:i=8,renderPriority:c=0,eventPriority:d=0,frames:g=1/0,stencilBuffer:p=!1,depthBuffer:m=!0,generateMipmaps:b=!1,...v},h)=>{const{size:j,viewport:x}=n.useThree(),y=a.useFBO((t||j.width)*x.dpr,(l||j.height)*x.dpr,{samples:i,stencilBuffer:p,depthBuffer:m,generateMipmaps:b}),[P]=s.useState((()=>new o.Scene)),O=s.useCallback(((e,r,t)=>{var n,a;let l=null==(n=y.texture)||null==(n=n.__r3f.parent)?void 0:n.object;for(;l&&!(l instanceof o.Object3D);){var i;l=null==(i=l.__r3f.parent)?void 0:i.object}if(!l)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[u]=t.raycaster.intersectObject(l);if(!u)return!1;const s=u.uv;if(!s)return!1;r.raycaster.setFromCamera(r.pointer.set(2*s.x-1,2*s.y-1),r.camera)}),[]);return s.useImperativeHandle(h,(()=>y.texture),[y]),s.createElement(s.Fragment,null,n.createPortal(s.createElement(f,{renderPriority:c,frames:g,fbo:y},e,s.createElement("group",{onPointerOver:()=>null})),P,{events:{compute:r||O,priority:d}}),s.createElement("primitive",u.default({object:y.texture},v)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let l,i,u,o,c=0;return n.useFrame((r=>{(e===1/0||c<e)&&(l=r.gl.autoClear,i=r.gl.xr.enabled,u=r.gl.getRenderTarget(),o=r.gl.xr.isPresenting,r.gl.autoClear=!0,r.gl.xr.enabled=!1,r.gl.xr.isPresenting=!1,r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(u),r.gl.autoClear=l,r.gl.xr.enabled=i,r.gl.xr.isPresenting=o,c++)}),r),s.createElement(s.Fragment,null,t)}exports.RenderTexture=c;

package/core/RenderTexture.d.ts

@@ -0,0 +1,18 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type RenderTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args'> & {
+    width?: number;
+    height?: number;
+    samples?: number;
+    stencilBuffer?: boolean;
+    depthBuffer?: boolean;
+    generateMipmaps?: boolean;
+    renderPriority?: number;
+    eventPriority?: number;
+    frames?: number;
+    compute?: (event: any, state: any, previous: any) => false | undefined;
+    children: React.ReactNode;
+};
+export declare const RenderTexture: ForwardRefComponent<RenderTextureProps, THREE.Texture>;

package/core/RenderTexture.js

@@ -0,0 +1,105 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { useThree, createPortal, useFrame } from '@react-three/fiber';
+import { useFBO } from './Fbo.js';
+
+const RenderTexture = /* @__PURE__ */React.forwardRef(({
+  children,
+  compute,
+  width,
+  height,
+  samples = 8,
+  renderPriority = 0,
+  eventPriority = 0,
+  frames = Infinity,
+  stencilBuffer = false,
+  depthBuffer = true,
+  generateMipmaps = false,
+  ...props
+}, forwardRef) => {
+  const {
+    size,
+    viewport
+  } = useThree();
+  const fbo = useFBO((width || size.width) * viewport.dpr, (height || size.height) * viewport.dpr, {
+    samples,
+    stencilBuffer,
+    depthBuffer,
+    generateMipmaps
+  });
+  const [vScene] = React.useState(() => new THREE.Scene());
+  const uvCompute = React.useCallback((event, state, previous) => {
+    var _fbo$texture, _previous$previousRoo;
+    // Since this is only a texture it does not have an easy way to obtain the parent, which we
+    // need to transform event coordinates to local coordinates. We use r3f internals to find the
+    // next Object3D.
+    let parent = (_fbo$texture = fbo.texture) == null || (_fbo$texture = _fbo$texture.__r3f.parent) == null ? void 0 : _fbo$texture.object;
+    while (parent && !(parent instanceof THREE.Object3D)) {
+      var _parent$__r3f$parent;
+      parent = (_parent$__r3f$parent = parent.__r3f.parent) == null ? void 0 : _parent$__r3f$parent.object;
+    }
+    if (!parent) return false;
+    // First we call the previous state-onion-layers compute, this is what makes it possible to nest portals
+    if (!previous.raycaster.camera) previous.events.compute(event, previous, (_previous$previousRoo = previous.previousRoot) == null ? void 0 : _previous$previousRoo.getState());
+    // We run a quick check against the parent, if it isn't hit there's no need to raycast at all
+    const [intersection] = previous.raycaster.intersectObject(parent);
+    if (!intersection) return false;
+    // We take that hits uv coords, set up this layers raycaster, et voilà, we have raycasting on arbitrary surfaces
+    const uv = intersection.uv;
+    if (!uv) return false;
+    state.raycaster.setFromCamera(state.pointer.set(uv.x * 2 - 1, uv.y * 2 - 1), state.camera);
+  }, []);
+  React.useImperativeHandle(forwardRef, () => fbo.texture, [fbo]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal(/*#__PURE__*/React.createElement(Container, {
+    renderPriority: renderPriority,
+    frames: frames,
+    fbo: fbo
+  }, children, /*#__PURE__*/React.createElement("group", {
+    onPointerOver: () => null
+  })), vScene, {
+    events: {
+      compute: compute || uvCompute,
+      priority: eventPriority
+    }
+  }), /*#__PURE__*/React.createElement("primitive", _extends({
+    object: fbo.texture
+  }, props)));
+});
+
+// The container component has to be separate, it can not be inlined because "useFrame(state" when run inside createPortal will return
+// the portals own state which includes user-land overrides (custom cameras etc), but if it is executed in <RenderTexture>'s render function
+// it would return the default state.
+function Container({
+  frames,
+  renderPriority,
+  children,
+  fbo
+}) {
+  let count = 0;
+  let oldAutoClear;
+  let oldXrEnabled;
+  let oldRenderTarget;
+  let oldIsPresenting;
+  useFrame(state => {
+    if (frames === Infinity || count < frames) {
+      oldAutoClear = state.gl.autoClear;
+      oldXrEnabled = state.gl.xr.enabled;
+      oldRenderTarget = state.gl.getRenderTarget();
+      oldIsPresenting = state.gl.xr.isPresenting;
+      state.gl.autoClear = true;
+      state.gl.xr.enabled = false;
+      state.gl.xr.isPresenting = false;
+      state.gl.setRenderTarget(fbo);
+      state.gl.render(state.scene, state.camera);
+      state.gl.setRenderTarget(oldRenderTarget);
+      state.gl.autoClear = oldAutoClear;
+      state.gl.xr.enabled = oldXrEnabled;
+      state.gl.xr.isPresenting = oldIsPresenting;
+      count++;
+    }
+  }, renderPriority);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+export { RenderTexture };

package/core/Resize.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 c=n(e),a=u(t),l=u(r);const i=l.forwardRef((({children:e,width:t,height:r,depth:n,box3:u,precise:i=!0,...o},f)=>{const s=l.useRef(null),d=l.useRef(null),m=l.useRef(null);return l.useLayoutEffect((()=>{d.current.matrixWorld.identity();let e=u||(new a.Box3).setFromObject(m.current,i);const c=e.max.x-e.min.x,l=e.max.y-e.min.y,o=e.max.z-e.min.z;let f=Math.max(c,l,o);t&&(f=c),r&&(f=l),n&&(f=o),d.current.scale.setScalar(1/f)}),[t,r,n,u,i]),l.useImperativeHandle(f,(()=>s.current),[]),l.createElement("group",c.default({ref:s},o),l.createElement("group",{ref:d},l.createElement("group",{ref:m},e)))}));exports.Resize=i;

package/core/Resize.d.ts

@@ -0,0 +1,17 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
+export type ResizeProps = Omit<ThreeElements['group'], 'ref'> & {
+    width?: boolean;
+    height?: boolean;
+    depth?: boolean;
+    box3?: THREE.Box3;
+    precise?: boolean;
+};
+export declare const Resize: React.ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<THREE.Group<THREE.Object3DEventMap>, import("@react-three/fiber").MathProps<THREE.Group<THREE.Object3DEventMap>> & import("@react-three/fiber").ReactProps<THREE.Group<THREE.Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.Group<THREE.Object3DEventMap>, typeof THREE.Group>, "object">>>, "ref"> & {
+    width?: boolean;
+    height?: boolean;
+    depth?: boolean;
+    box3?: THREE.Box3;
+    precise?: boolean;
+} & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;

package/core/Resize.js

@@ -0,0 +1,39 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+
+const Resize = /* @__PURE__ */React.forwardRef(({
+  children,
+  width,
+  height,
+  depth,
+  box3,
+  precise = true,
+  ...props
+}, fRef) => {
+  const ref = React.useRef(null);
+  const outer = React.useRef(null);
+  const inner = React.useRef(null);
+  React.useLayoutEffect(() => {
+    outer.current.matrixWorld.identity();
+    let box = box3 || new THREE.Box3().setFromObject(inner.current, precise);
+    const w = box.max.x - box.min.x;
+    const h = box.max.y - box.min.y;
+    const d = box.max.z - box.min.z;
+    let dimension = Math.max(w, h, d);
+    if (width) dimension = w;
+    if (height) dimension = h;
+    if (depth) dimension = d;
+    outer.current.scale.setScalar(1 / dimension);
+  }, [width, height, depth, box3, precise]);
+  React.useImperativeHandle(fRef, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("group", {
+    ref: outer
+  }, /*#__PURE__*/React.createElement("group", {
+    ref: inner
+  }, children)));
+});
+
+export { Resize };

package/core/RoundedBox.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),s=require("three-stdlib");function n(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 s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=n(e),c=a(t);const o=1e-5;const l=c.forwardRef((function({args:[e=1,t=1,r=1]=[],radius:s=.05,steps:n=1,smoothness:a=4,bevelSegments:o=4,creaseAngle:l=.4,children:d,...i},b){return c.createElement("mesh",u.default({ref:b},i),c.createElement(f,{args:[e,t,r],radius:s,steps:n,smoothness:a,bevelSegments:o,creaseAngle:l}),d)})),f=c.forwardRef((function({args:[e=1,t=1,n=1]=[],radius:a=.05,steps:l=1,smoothness:f=4,bevelSegments:d=4,creaseAngle:i=.4,...b},m){const h=c.useMemo((()=>function(e,t,s){const n=new r.Shape,a=s-o;return n.absarc(o,o,o,-Math.PI/2,-Math.PI,!0),n.absarc(o,t-2*a,o,Math.PI,Math.PI/2,!0),n.absarc(e-2*a,t-2*a,o,Math.PI/2,0,!0),n.absarc(e-2*a,o,o,0,-Math.PI/2,!0),n}(e,t,a)),[e,t,a]),p=c.useMemo((()=>({depth:n-2*a,bevelEnabled:!0,bevelSegments:2*d,steps:l,bevelSize:a-o,bevelThickness:a,curveSegments:f})),[n,a,f,d,l]),g=c.useRef(null);return c.useLayoutEffect((()=>{g.current&&(g.current.center(),s.toCreasedNormals(g.current,i))}),[h,p,i]),c.useImperativeHandle(m,(()=>g.current)),c.createElement("extrudeGeometry",u.default({ref:g,args:[h,p]},b))}));exports.RoundedBox=l,exports.RoundedBoxGeometry=f;

package/core/RoundedBox.d.ts

@@ -0,0 +1,14 @@
+import { Mesh, ExtrudeGeometry } from 'three';
+import { ForwardRefComponent, NamedArrayTuple } from '../helpers/ts-utils';
+import { ThreeElements } from '@react-three/fiber';
+export type RoundedBoxProps = {
+    args?: NamedArrayTuple<(width?: number, height?: number, depth?: number) => void>;
+    radius?: number;
+    smoothness?: number;
+    bevelSegments?: number;
+    steps?: number;
+    creaseAngle?: number;
+} & Omit<ThreeElements['mesh'], 'ref' | 'args'>;
+export type RoundedBoxGeometryProps = Omit<RoundedBoxProps, 'children'> & Omit<ThreeElements['extrudeGeometry'], 'args' | 'ref'>;
+export declare const RoundedBox: ForwardRefComponent<RoundedBoxProps, Mesh>;
+export declare const RoundedBoxGeometry: ForwardRefComponent<RoundedBoxGeometryProps, ExtrudeGeometry>;