@react-three/drei 9.106.0 → 9.106.2

package/README.md

@@ -11,7 +11,8 @@ A growing collection of useful helpers and fully functional, ready-made abstract
 npm install @react-three/drei
 ```
 
-:point_right: this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm). :point_left:
+> [!IMPORTANT]  
+> this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm).
 
 ### Basic usage:
 
@@ -1106,9 +1107,9 @@ export type GridProps = GridMaterialType & {
 <Grid />
 ```
 
-#### useHelper
+#### Helper / useHelper
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usehelper--default-story)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/gizmos-helper)
 
 A hook for a quick way to add helpers to existing nodes in the scene. It handles removal of the helper on unmount and auto-updates it by default.
 
@@ -1120,11 +1121,7 @@ useHelper(condition && mesh, BoxHelper, 'red') // you can pass false instead of
 <mesh ref={mesh} ... />
 ```
 
-#### Helper
-
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/gizmos-helper--default-story)
-
-A component for declaratively adding helpers to existing nodes in the scene. It handles removal of the helper on unmount and auto-updates it by default.
+or with `Helper`:
 
 ```jsx
 <mesh>
@@ -1942,14 +1939,6 @@ Accepts an SVG url or svg raw data.
 <Svg src={urlOrRawSvgString} />
 ```
 
-#### Gltf
-
-This is a convenience component that will load a gltf file and clone the scene using [drei/Clone](#clone). That means you can re-use and mount the same gltf file multiple times. It accepts all props that Clone does, including shortcuts (castShadow, receiveShadow) and material overrides.
-
-```js
-<Gltf src="/model.glb" receiveShadow castShadow />
-```
-
 #### AsciiRenderer
 
 <p>
@@ -2825,9 +2814,9 @@ const depthBuffer = useDepthBuffer({
 return <SomethingThatNeedsADepthBuffer depthBuffer={depthBuffer} />
 ```
 
-#### useFBO
+#### Fbo / useFBO
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usefbo--use-fbo-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-fbo)
 
 Creates a `THREE.WebGLRenderTarget`.
 
@@ -2869,9 +2858,9 @@ A hook for the rare case when you are using non-default cameras for heads-up-dis
 <mesh raycast={useCamera(customCamera)} />
 ```
 
-#### useCubeCamera
+#### CubeCamera / useCubeCamera
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usecubecamera)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/camera-cubecamera)
 
 Creates a [`THREE.CubeCamera`](https://threejs.org/docs/#api/en/cameras/CubeCamera) that renders into a `fbo` renderTarget and that you can `update()`.
 
@@ -2894,9 +2883,9 @@ export function useCubeCamera({
 const { fbo, camera, update } = useCubeCamera()
 ```
 
-#### useDetectGPU
+#### DetectGPU / useDetectGPU
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-usedetectgpu)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-detectgpu)
 
 This hook uses [DetectGPU by @TimvanScherpenzeel](https://github.com/TimvanScherpenzeel/detect-gpu), wrapped into suspense, to determine what tier should be assigned to the user's GPU.
 
@@ -2981,9 +2970,9 @@ const projection = useBoxProjectedEnv(
 </CubeCamera>
 ```
 
-#### useTrail
+#### Trail / useTrail
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail--use-trail-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail)
 
 A hook to obtain an array of points that make up a [Trail](#trail). You can use this array to drive your own `MeshLine` or make a trail out of anything you please.
 
@@ -3103,9 +3092,9 @@ You can override styles, too.
 >
 ```
 
-#### useProgress
+#### Progress / useProgress
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-useprogress--use-progress-scene-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-progress)
 
 A convenience hook that wraps `THREE.DefaultLoadingManager`'s progress status.
 
@@ -3130,7 +3119,7 @@ const errors = useProgress((state) => state.errors)
 
 👉 Note that your loading component does not have to be a suspense fallback. You can use it anywhere, even in your dom tree, for instance for overlays.
 
-#### useGLTF
+#### Gltf / useGLTF
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-gltf)
 
@@ -3165,7 +3154,7 @@ If you want to use your own draco decoder globally, you can pass it through `use
 >
 > It is recommended that you check your browser's network tab to confirm that the correct URLs are being used, and that the files do get loaded from the prefetch cache on subsequent requests.
 
-#### useFBX
+#### Fbx / useFBX
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-fbx)
 
@@ -3180,7 +3169,7 @@ function SuzanneFBX() {
 }
 ```
 
-#### useTexture
+#### Texture / useTexture
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-texture)
 
@@ -3201,9 +3190,9 @@ const props = useTexture({
 return <meshStandardMaterial {...props} />
 ```
 
-#### useKTX2
+#### Ktx2 / useKTX2
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-ktx2--use-ktx-2-scene-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-ktx2)
 
 A convenience hook that uses `useLoader` and `KTX2Loader`
 
@@ -3214,9 +3203,9 @@ const [texture1, texture2] = useKTX2([texture1, texture2])
 return <meshStandardMaterial map={texture} />
 ```
 
-#### useCubeTexture
+#### CubeTexture / useCubeTexture
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-cubetexture)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-cubetexture)
 
 A convenience hook that uses `useLoader` and `CubeTextureLoader`
 
@@ -3224,9 +3213,9 @@ A convenience hook that uses `useLoader` and `CubeTextureLoader`
 const envMap = useCubeTexture(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'], { path: 'cube/' })
 ```
 
-#### useVideoTexture
+#### VideoTexture / useVideoTexture
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-videotexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-videotexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
 <p>
   <a href="https://codesandbox.io/s/39hg8"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/39hg8/screenshot.png" alt="Demo"/></a>
@@ -3296,7 +3285,9 @@ You can fine-tune via the hls configuration:
 
 > Available options: https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
 
-#### useTrailTexture
+#### TrailTexture / useTrailTexture
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-trailtexture)
 
 <p>
   <a href="https://codesandbox.io/s/fj1qlg"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/fj1qlg/screenshot.png" alt="Demo"/></a>
@@ -3353,6 +3344,12 @@ useFont.preload('/fonts/helvetiker_regular.typeface.json')
 
 Loads texture and JSON files with multiple or single animations and parses them into appropriate format. These assets can be used by multiple SpriteAnimator components to save memory and loading times.
 
+Returns: `{spriteTexture:Texture, spriteData:{any[], object}, aspect:Vector3}`
+
+- spriteTexture: The ThreeJS Texture
+- spriteData: A collection of the sprite frames, and some meta information (width, height)
+- aspect: Information about the aspect ratio of the sprite sheet
+
 ```jsx
 /** The texture url to load the sprite frames from */
 input?: Url | null,
@@ -3625,7 +3622,7 @@ Drop this component into your scene and it will switch off the raycaster while t
 
 #### Bvh
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/performance-usebvh--default-story)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/performance-bvh)
 
 An abstraction around [gkjohnson/three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh) to speed up raycasting exponentially. Use this component to wrap your scene, a sub-graph, a model or single mesh, and it will automatically compute boundsTree and assign acceleratedRaycast. This component is side-effect free, once unmounted or disabled it will revert to the original raycast.
 
@@ -5005,9 +5002,9 @@ const rgbeTexture = useEnvironment({ files: 'model.hdr' })
 const cubeTexture = useEnvironment({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) => `${n}.png`) })
 ```
 
-#### useMatcapTexture
+#### MatcapTexture / useMatcapTexture
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-usematcaptexture--use-matcap-texture-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-matcaptexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
 Loads matcap textures from this repository: https://github.com/emmelleppi/matcaps
 
@@ -5036,9 +5033,9 @@ const [matcap] = useMatcapTexture('3E2335_D36A1B_8E4A2E_2842A5')
 
 👉 Use the `url` to download the texture when you are ready for production!
 
-#### useNormalTexture
+#### NormalTexture / useNormalTexture
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-usenormaltexture--use-normal-texture-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-normaltexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
 Loads normal textures from this repository: https://github.com/emmelleppi/normal-maps
 

package/core/Caustics.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"),n=require("@react-three/fiber"),o=require("./useFBO.cjs.js"),i=require("./useHelper.cjs.js"),a=require("./shaderMaterial.cjs.js"),l=require("./Edges.cjs.js"),c=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(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("./Line.cjs.js");var m=u(e),p=d(r),v=d(t);function f(e=p.FrontSide){const r={value:new p.Matrix4};return Object.assign(new p.MeshNormalMaterial({side:e}),{viewMatrix:r,onBeforeCompile:e=>{e.uniforms.viewMatrix=r,e.fragmentShader="vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n         }\n"+e.fragmentShader.replace("#include <normal_fragment_maps>","#include <normal_fragment_maps>\n           normal = inverseTransformDirection( normal, viewMatrix );\n")}})}const x=a.shaderMaterial({causticsTexture:null,causticsTextureB:null,color:new p.Color,lightProjMatrix:new p.Matrix4,lightViewMatrix:new p.Matrix4},"varying vec3 vWorldPosition;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vec4 worldPosition = modelMatrix * vec4(position, 1.);\n     vWorldPosition = worldPosition.xyz;\n   }",`varying vec3 vWorldPosition;\n  uniform vec3 color;\n  uniform sampler2D causticsTexture;\n  uniform sampler2D causticsTextureB;\n  uniform mat4 lightProjMatrix;\n  uniform mat4 lightViewMatrix;\n   void main() {\n    // Apply caustics\n    vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);\n    lightSpacePos.xyz /= lightSpacePos.w;\n    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5;\n    vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;\n    vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;\n    gl_FragColor = vec4((front + back) * color, 1.0);\n    #include <tonemapping_fragment>\n    #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),h=a.shaderMaterial({cameraMatrixWorld:new p.Matrix4,cameraProjectionMatrixInv:new p.Matrix4,normalTexture:null,depthTexture:null,lightDir:new p.Vector3(0,1,0),lightPlaneNormal:new p.Vector3(0,1,0),lightPlaneConstant:0,near:.1,far:100,modelMatrix:new p.Matrix4,worldRadius:1/40,ior:1.1,bounces:0,resolution:1024,size:10,intensity:.5},"\n  varying vec2 vUv;\n  void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }","\n  uniform mat4 cameraMatrixWorld;\n  uniform mat4 cameraProjectionMatrixInv;\n  uniform vec3 lightDir;\n  uniform vec3 lightPlaneNormal;\n  uniform float lightPlaneConstant;\n  uniform float near;\n  uniform float far;\n  uniform float time;\n  uniform float worldRadius;\n  uniform float resolution;\n  uniform float size;\n  uniform float intensity;\n  uniform float ior;\n  precision highp isampler2D;\n  precision highp usampler2D;\n  uniform sampler2D normalTexture;\n  uniform sampler2D depthTexture;\n  uniform float bounces;\n  varying vec2 vUv;\n  vec3 WorldPosFromDepth(float depth, vec2 coord) {\n    float z = depth * 2.0 - 1.0;\n    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);\n    vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;\n    // Perspective division\n    viewSpacePosition /= viewSpacePosition.w;\n    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;\n    return worldSpacePosition.xyz;\n  }\n  float sdPlane( vec3 p, vec3 n, float h ) {\n    // n must be normalized\n    return dot(p,n) + h;\n  }\n  float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {\n    return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);\n  }\n  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {\n    rayOrigin = ro;\n    rayDirection = rd;\n    rayDirection = refract(rayDirection, normal, 1.0 / ior);\n    rayOrigin = pos + rayDirection * 0.1;\n    return rayDirection;\n  }\n  void main() {\n    // Each sample consists of random offset in the x and y direction\n    float caustic = 0.0;\n    float causticTexelSize = (1.0 / resolution) * size * 2.0;\n    float texelsNeeded = worldRadius / causticTexelSize;\n    float sampleRadius = texelsNeeded / resolution;\n    float sum = 0.0;\n    if (texture2D(depthTexture, vUv).x == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 uv1 = vUv + offset1 * sampleRadius;\n    vec2 uv2 = vUv + offset2 * sampleRadius;\n    vec2 uv3 = vUv + offset3 * sampleRadius;\n    vec2 uv4 = vUv + offset4 * sampleRadius;\n    vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;\n    float depth1 = texture2D(depthTexture, uv1, -10.0).x;\n    float depth2 = texture2D(depthTexture, uv2, -10.0).x;\n    float depth3 = texture2D(depthTexture, uv3, -10.0).x;\n    float depth4 = texture2D(depthTexture, uv4, -10.0).x;\n    // Sanity check the depths\n    if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec3 pos1 = WorldPosFromDepth(depth1, uv1);\n    vec3 pos2 = WorldPosFromDepth(depth2, uv2);\n    vec3 pos3 = WorldPosFromDepth(depth3, uv3);\n    vec3 pos4 = WorldPosFromDepth(depth4, uv4);\n    vec3 originPos1 = WorldPosFromDepth(0.0, uv1);\n    vec3 originPos2 = WorldPosFromDepth(0.0, uv2);\n    vec3 originPos3 = WorldPosFromDepth(0.0, uv3);\n    vec3 originPos4 = WorldPosFromDepth(0.0, uv4);\n    vec3 endPos1, endPos2, endPos3, endPos4;\n    vec3 endDir1, endDir2, endDir3, endDir4;\n    totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);\n    totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);\n    totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);\n    totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);\n    float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));\n    float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));\n    vec3 finalPos1 = endPos1 + endDir1 * t1;\n    vec3 finalPos2 = endPos2 + endDir2 * t2;\n    vec3 finalPos3 = endPos3 + endDir3 * t3;\n    vec3 finalPos4 = endPos4 + endDir4 * t4;\n    float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));\n    caustic += intensity * (lightPosArea / finalArea);\n    // Calculate the area of the triangle in light spaces\n    gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);\n  }"),g={depth:!0,minFilter:p.LinearFilter,magFilter:p.LinearFilter,type:p.UnsignedByteType},P={minFilter:p.LinearMipmapLinearFilter,magFilter:p.LinearFilter,type:p.FloatType,generateMipmaps:!0},y=v.forwardRef((({debug:e,children:r,frames:t=1,ior:a=1.1,color:s="white",causticsOnly:u=!1,backside:d=!1,backsideIOR:y=1.1,worldRadius:M=.3125,intensity:D=.05,resolution:w=2024,lightSource:T=[5,5,5],...j},S)=>{n.extend({CausticsProjectionMaterial:x});const b=v.useRef(null),F=v.useRef(null),z=v.useRef(null),W=v.useRef(null),R=n.useThree((e=>e.gl)),I=i.useHelper(e&&F,p.CameraHelper),O=o.useFBO(w,w,g),C=o.useFBO(w,w,g),_=o.useFBO(w,w,P),V=o.useFBO(w,w,P),[B]=v.useState((()=>f())),[E]=v.useState((()=>f(p.BackSide))),[q]=v.useState((()=>new h)),[A]=v.useState((()=>new c.FullScreenQuad(q)));v.useLayoutEffect((()=>{b.current.updateWorldMatrix(!1,!0)}));let N=0;const k=new p.Vector3,U=new p.Frustum,L=new p.Matrix4,H=new p.Plane,G=new p.Vector3,Q=new p.Vector3,$=new p.Box3,J=new p.Vector3,K=[],X=[],Y=[],Z=[],ee=new p.Vector3;for(let e=0;e<8;e++)K.push(new p.Vector3),X.push(new p.Vector3),Y.push(new p.Vector3),Z.push(new p.Vector3);return n.useFrame((()=>{if(t===1/0||N++<t){var r,n;Array.isArray(T)?G.fromArray(T).normalize():G.copy(b.current.worldToLocal(T.current.getWorldPosition(k)).normalize()),Q.copy(G).multiplyScalar(-1),null==(r=z.current.parent)||r.matrixWorld.identity(),$.setFromObject(z.current,!0),K[0].set($.min.x,$.min.y,$.min.z),K[1].set($.min.x,$.min.y,$.max.z),K[2].set($.min.x,$.max.y,$.min.z),K[3].set($.min.x,$.max.y,$.max.z),K[4].set($.max.x,$.min.y,$.min.z),K[5].set($.max.x,$.min.y,$.max.z),K[6].set($.max.x,$.max.y,$.min.z),K[7].set($.max.x,$.max.y,$.max.z);for(let e=0;e<8;e++)X[e].copy(K[e]);$.getCenter(J),K.map((e=>e.sub(J)));const t=H.set(Q,0);K.map(((e,r)=>t.projectPoint(e,Y[r])));const o=Y.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(Y.length),i=Y.map((e=>e.distanceTo(o))).reduce(((e,r)=>Math.max(e,r))),l=K.map((e=>e.dot(G))).reduce(((e,r)=>Math.max(e,r)));F.current.position.copy(ee.copy(G).multiplyScalar(l).add(J)),F.current.lookAt(z.current.localToWorld(J));const c=L.lookAt(F.current.position,J,k.set(0,1,0));F.current.left=-i,F.current.right=i,F.current.top=i,F.current.bottom=-i;const s=k.set(0,i,0).applyMatrix4(c),m=(F.current.position.y+s.y)/G.y;F.current.near=.1,F.current.far=m,F.current.updateProjectionMatrix(),F.current.updateMatrixWorld();const p=X.map(((e,r)=>e.add(Z[r].copy(G).multiplyScalar(-e.y/G.y)))),v=p.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(p.length),f=2*p.map((e=>Math.hypot(e.x-v.x,e.z-v.z))).reduce(((e,r)=>Math.max(e,r)));W.current.scale.setScalar(f),W.current.position.copy(v),e&&(null==(n=I.current)||n.update()),E.viewMatrix.value=B.viewMatrix.value=F.current.matrixWorldInverse;const x=U.setFromProjectionMatrix(L.multiplyMatrices(F.current.projectionMatrix,F.current.matrixWorldInverse)).planes[4];q.cameraMatrixWorld=F.current.matrixWorld,q.cameraProjectionMatrixInv=F.current.projectionMatrixInverse,q.lightDir=Q,q.lightPlaneNormal=x.normal,q.lightPlaneConstant=x.constant,q.near=F.current.near,q.far=F.current.far,q.resolution=w,q.size=i,q.intensity=D,q.worldRadius=M,z.current.visible=!0,R.setRenderTarget(O),R.clear(),z.current.overrideMaterial=B,R.render(z.current,F.current),R.setRenderTarget(C),R.clear(),d&&(z.current.overrideMaterial=E,R.render(z.current,F.current)),z.current.overrideMaterial=null,q.ior=a,W.current.material.lightProjMatrix=F.current.projectionMatrix,W.current.material.lightViewMatrix=F.current.matrixWorldInverse,q.normalTexture=O.texture,q.depthTexture=O.depthTexture,R.setRenderTarget(_),R.clear(),A.render(R),q.ior=y,q.normalTexture=C.texture,q.depthTexture=C.depthTexture,R.setRenderTarget(V),R.clear(),d&&A.render(R),R.setRenderTarget(null),u&&(z.current.visible=!1)}})),v.useImperativeHandle(S,(()=>b.current),[]),v.createElement("group",m.default({ref:b},j),v.createElement("scene",{ref:z},v.createElement("orthographicCamera",{ref:F,up:[0,1,0]}),r),v.createElement("mesh",{renderOrder:2,ref:W,"rotation-x":-Math.PI/2},v.createElement("planeGeometry",null),v.createElement("causticsProjectionMaterial",{transparent:!0,color:s,causticsTexture:_.texture,causticsTextureB:V.texture,blending:p.CustomBlending,blendSrc:p.OneFactor,blendDst:p.SrcAlphaFactor,depthWrite:!1}),e&&v.createElement(l.Edges,null,v.createElement("lineBasicMaterial",{color:"#ffff00",toneMapped:!1}))))}));exports.Caustics=y;
+"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"),o=require("./Fbo.cjs.js"),i=require("./Helper.cjs.js"),a=require("./shaderMaterial.cjs.js"),l=require("./Edges.cjs.js"),c=require("three-stdlib"),s=require("../helpers/constants.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(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("./Line.cjs.js");var m=u(e),p=d(r),v=d(t);function f(e=p.FrontSide){const r={value:new p.Matrix4};return Object.assign(new p.MeshNormalMaterial({side:e}),{viewMatrix:r,onBeforeCompile:e=>{e.uniforms.viewMatrix=r,e.fragmentShader="vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n         }\n"+e.fragmentShader.replace("#include <normal_fragment_maps>","#include <normal_fragment_maps>\n           normal = inverseTransformDirection( normal, viewMatrix );\n")}})}const x=a.shaderMaterial({causticsTexture:null,causticsTextureB:null,color:new p.Color,lightProjMatrix:new p.Matrix4,lightViewMatrix:new p.Matrix4},"varying vec3 vWorldPosition;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vec4 worldPosition = modelMatrix * vec4(position, 1.);\n     vWorldPosition = worldPosition.xyz;\n   }",`varying vec3 vWorldPosition;\n  uniform vec3 color;\n  uniform sampler2D causticsTexture;\n  uniform sampler2D causticsTextureB;\n  uniform mat4 lightProjMatrix;\n  uniform mat4 lightViewMatrix;\n   void main() {\n    // Apply caustics\n    vec4 lightSpacePos = lightProjMatrix * lightViewMatrix * vec4(vWorldPosition, 1.0);\n    lightSpacePos.xyz /= lightSpacePos.w;\n    lightSpacePos.xyz = lightSpacePos.xyz * 0.5 + 0.5;\n    vec3 front = texture2D(causticsTexture, lightSpacePos.xy).rgb;\n    vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;\n    gl_FragColor = vec4((front + back) * color, 1.0);\n    #include <tonemapping_fragment>\n    #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),h=a.shaderMaterial({cameraMatrixWorld:new p.Matrix4,cameraProjectionMatrixInv:new p.Matrix4,normalTexture:null,depthTexture:null,lightDir:new p.Vector3(0,1,0),lightPlaneNormal:new p.Vector3(0,1,0),lightPlaneConstant:0,near:.1,far:100,modelMatrix:new p.Matrix4,worldRadius:1/40,ior:1.1,bounces:0,resolution:1024,size:10,intensity:.5},"\n  varying vec2 vUv;\n  void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }","\n  uniform mat4 cameraMatrixWorld;\n  uniform mat4 cameraProjectionMatrixInv;\n  uniform vec3 lightDir;\n  uniform vec3 lightPlaneNormal;\n  uniform float lightPlaneConstant;\n  uniform float near;\n  uniform float far;\n  uniform float time;\n  uniform float worldRadius;\n  uniform float resolution;\n  uniform float size;\n  uniform float intensity;\n  uniform float ior;\n  precision highp isampler2D;\n  precision highp usampler2D;\n  uniform sampler2D normalTexture;\n  uniform sampler2D depthTexture;\n  uniform float bounces;\n  varying vec2 vUv;\n  vec3 WorldPosFromDepth(float depth, vec2 coord) {\n    float z = depth * 2.0 - 1.0;\n    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);\n    vec4 viewSpacePosition = cameraProjectionMatrixInv * clipSpacePosition;\n    // Perspective division\n    viewSpacePosition /= viewSpacePosition.w;\n    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;\n    return worldSpacePosition.xyz;\n  }\n  float sdPlane( vec3 p, vec3 n, float h ) {\n    // n must be normalized\n    return dot(p,n) + h;\n  }\n  float planeIntersect( vec3 ro, vec3 rd, vec4 p ) {\n    return -(dot(ro,p.xyz)+p.w)/dot(rd,p.xyz);\n  }\n  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 pos, vec3 normal, float ior, out vec3 rayOrigin, out vec3 rayDirection) {\n    rayOrigin = ro;\n    rayDirection = rd;\n    rayDirection = refract(rayDirection, normal, 1.0 / ior);\n    rayOrigin = pos + rayDirection * 0.1;\n    return rayDirection;\n  }\n  void main() {\n    // Each sample consists of random offset in the x and y direction\n    float caustic = 0.0;\n    float causticTexelSize = (1.0 / resolution) * size * 2.0;\n    float texelsNeeded = worldRadius / causticTexelSize;\n    float sampleRadius = texelsNeeded / resolution;\n    float sum = 0.0;\n    if (texture2D(depthTexture, vUv).x == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec2 offset1 = vec2(-0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset2 = vec2(-0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset3 = vec2(0.5, 0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 offset4 = vec2(0.5, -0.5);//vec2(rand() - 0.5, rand() - 0.5);\n    vec2 uv1 = vUv + offset1 * sampleRadius;\n    vec2 uv2 = vUv + offset2 * sampleRadius;\n    vec2 uv3 = vUv + offset3 * sampleRadius;\n    vec2 uv4 = vUv + offset4 * sampleRadius;\n    vec3 normal1 = texture2D(normalTexture, uv1, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal2 = texture2D(normalTexture, uv2, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal3 = texture2D(normalTexture, uv3, -10.0).rgb * 2.0 - 1.0;\n    vec3 normal4 = texture2D(normalTexture, uv4, -10.0).rgb * 2.0 - 1.0;\n    float depth1 = texture2D(depthTexture, uv1, -10.0).x;\n    float depth2 = texture2D(depthTexture, uv2, -10.0).x;\n    float depth3 = texture2D(depthTexture, uv3, -10.0).x;\n    float depth4 = texture2D(depthTexture, uv4, -10.0).x;\n    // Sanity check the depths\n    if (depth1 == 1.0 || depth2 == 1.0 || depth3 == 1.0 || depth4 == 1.0) {\n      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n      return;\n    }\n    vec3 pos1 = WorldPosFromDepth(depth1, uv1);\n    vec3 pos2 = WorldPosFromDepth(depth2, uv2);\n    vec3 pos3 = WorldPosFromDepth(depth3, uv3);\n    vec3 pos4 = WorldPosFromDepth(depth4, uv4);\n    vec3 originPos1 = WorldPosFromDepth(0.0, uv1);\n    vec3 originPos2 = WorldPosFromDepth(0.0, uv2);\n    vec3 originPos3 = WorldPosFromDepth(0.0, uv3);\n    vec3 originPos4 = WorldPosFromDepth(0.0, uv4);\n    vec3 endPos1, endPos2, endPos3, endPos4;\n    vec3 endDir1, endDir2, endDir3, endDir4;\n    totalInternalReflection(originPos1, lightDir, pos1, normal1, ior, endPos1, endDir1);\n    totalInternalReflection(originPos2, lightDir, pos2, normal2, ior, endPos2, endDir2);\n    totalInternalReflection(originPos3, lightDir, pos3, normal3, ior, endPos3, endDir3);\n    totalInternalReflection(originPos4, lightDir, pos4, normal4, ior, endPos4, endDir4);\n    float lightPosArea = length(cross(originPos2 - originPos1, originPos3 - originPos1)) + length(cross(originPos3 - originPos1, originPos4 - originPos1));\n    float t1 = planeIntersect(endPos1, endDir1, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t2 = planeIntersect(endPos2, endDir2, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t3 = planeIntersect(endPos3, endDir3, vec4(lightPlaneNormal, lightPlaneConstant));\n    float t4 = planeIntersect(endPos4, endDir4, vec4(lightPlaneNormal, lightPlaneConstant));\n    vec3 finalPos1 = endPos1 + endDir1 * t1;\n    vec3 finalPos2 = endPos2 + endDir2 * t2;\n    vec3 finalPos3 = endPos3 + endDir3 * t3;\n    vec3 finalPos4 = endPos4 + endDir4 * t4;\n    float finalArea = length(cross(finalPos2 - finalPos1, finalPos3 - finalPos1)) + length(cross(finalPos3 - finalPos1, finalPos4 - finalPos1));\n    caustic += intensity * (lightPosArea / finalArea);\n    // Calculate the area of the triangle in light spaces\n    gl_FragColor = vec4(vec3(max(caustic, 0.0)), 1.0);\n  }"),g={depth:!0,minFilter:p.LinearFilter,magFilter:p.LinearFilter,type:p.UnsignedByteType},P={minFilter:p.LinearMipmapLinearFilter,magFilter:p.LinearFilter,type:p.FloatType,generateMipmaps:!0},y=v.forwardRef((({debug:e,children:r,frames:t=1,ior:a=1.1,color:s="white",causticsOnly:u=!1,backside:d=!1,backsideIOR:y=1.1,worldRadius:M=.3125,intensity:D=.05,resolution:w=2024,lightSource:T=[5,5,5],...j},b)=>{n.extend({CausticsProjectionMaterial:x});const S=v.useRef(null),F=v.useRef(null),z=v.useRef(null),W=v.useRef(null),R=n.useThree((e=>e.gl)),I=i.useHelper(e&&F,p.CameraHelper),C=o.useFBO(w,w,g),O=o.useFBO(w,w,g),_=o.useFBO(w,w,P),V=o.useFBO(w,w,P),[B]=v.useState((()=>f())),[E]=v.useState((()=>f(p.BackSide))),[q]=v.useState((()=>new h)),[A]=v.useState((()=>new c.FullScreenQuad(q)));v.useLayoutEffect((()=>{S.current.updateWorldMatrix(!1,!0)}));let N=0;const k=new p.Vector3,U=new p.Frustum,L=new p.Matrix4,H=new p.Plane,G=new p.Vector3,Q=new p.Vector3,$=new p.Box3,J=new p.Vector3,K=[],X=[],Y=[],Z=[],ee=new p.Vector3;for(let e=0;e<8;e++)K.push(new p.Vector3),X.push(new p.Vector3),Y.push(new p.Vector3),Z.push(new p.Vector3);return n.useFrame((()=>{if(t===1/0||N++<t){var r,n;Array.isArray(T)?G.fromArray(T).normalize():G.copy(S.current.worldToLocal(T.current.getWorldPosition(k)).normalize()),Q.copy(G).multiplyScalar(-1),null==(r=z.current.parent)||r.matrixWorld.identity(),$.setFromObject(z.current,!0),K[0].set($.min.x,$.min.y,$.min.z),K[1].set($.min.x,$.min.y,$.max.z),K[2].set($.min.x,$.max.y,$.min.z),K[3].set($.min.x,$.max.y,$.max.z),K[4].set($.max.x,$.min.y,$.min.z),K[5].set($.max.x,$.min.y,$.max.z),K[6].set($.max.x,$.max.y,$.min.z),K[7].set($.max.x,$.max.y,$.max.z);for(let e=0;e<8;e++)X[e].copy(K[e]);$.getCenter(J),K.map((e=>e.sub(J)));const t=H.set(Q,0);K.map(((e,r)=>t.projectPoint(e,Y[r])));const o=Y.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(Y.length),i=Y.map((e=>e.distanceTo(o))).reduce(((e,r)=>Math.max(e,r))),l=K.map((e=>e.dot(G))).reduce(((e,r)=>Math.max(e,r)));F.current.position.copy(ee.copy(G).multiplyScalar(l).add(J)),F.current.lookAt(z.current.localToWorld(J));const c=L.lookAt(F.current.position,J,k.set(0,1,0));F.current.left=-i,F.current.right=i,F.current.top=i,F.current.bottom=-i;const s=k.set(0,i,0).applyMatrix4(c),m=(F.current.position.y+s.y)/G.y;F.current.near=.1,F.current.far=m,F.current.updateProjectionMatrix(),F.current.updateMatrixWorld();const p=X.map(((e,r)=>e.add(Z[r].copy(G).multiplyScalar(-e.y/G.y)))),v=p.reduce(((e,r)=>e.add(r)),k.set(0,0,0)).divideScalar(p.length),f=2*p.map((e=>Math.hypot(e.x-v.x,e.z-v.z))).reduce(((e,r)=>Math.max(e,r)));W.current.scale.setScalar(f),W.current.position.copy(v),e&&(null==(n=I.current)||n.update()),E.viewMatrix.value=B.viewMatrix.value=F.current.matrixWorldInverse;const x=U.setFromProjectionMatrix(L.multiplyMatrices(F.current.projectionMatrix,F.current.matrixWorldInverse)).planes[4];q.cameraMatrixWorld=F.current.matrixWorld,q.cameraProjectionMatrixInv=F.current.projectionMatrixInverse,q.lightDir=Q,q.lightPlaneNormal=x.normal,q.lightPlaneConstant=x.constant,q.near=F.current.near,q.far=F.current.far,q.resolution=w,q.size=i,q.intensity=D,q.worldRadius=M,z.current.visible=!0,R.setRenderTarget(C),R.clear(),z.current.overrideMaterial=B,R.render(z.current,F.current),R.setRenderTarget(O),R.clear(),d&&(z.current.overrideMaterial=E,R.render(z.current,F.current)),z.current.overrideMaterial=null,q.ior=a,W.current.material.lightProjMatrix=F.current.projectionMatrix,W.current.material.lightViewMatrix=F.current.matrixWorldInverse,q.normalTexture=C.texture,q.depthTexture=C.depthTexture,R.setRenderTarget(_),R.clear(),A.render(R),q.ior=y,q.normalTexture=O.texture,q.depthTexture=O.depthTexture,R.setRenderTarget(V),R.clear(),d&&A.render(R),R.setRenderTarget(null),u&&(z.current.visible=!1)}})),v.useImperativeHandle(b,(()=>S.current),[]),v.createElement("group",m.default({ref:S},j),v.createElement("scene",{ref:z},v.createElement("orthographicCamera",{ref:F,up:[0,1,0]}),r),v.createElement("mesh",{renderOrder:2,ref:W,"rotation-x":-Math.PI/2},v.createElement("planeGeometry",null),v.createElement("causticsProjectionMaterial",{transparent:!0,color:s,causticsTexture:_.texture,causticsTextureB:V.texture,blending:p.CustomBlending,blendSrc:p.OneFactor,blendDst:p.SrcAlphaFactor,depthWrite:!1}),e&&v.createElement(l.Edges,null,v.createElement("lineBasicMaterial",{color:"#ffff00",toneMapped:!1}))))}));exports.Caustics=y;

package/core/Caustics.js

@@ -2,8 +2,8 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
 import { extend, useThree, useFrame } from '@react-three/fiber';
-import { useFBO } from './useFBO.js';
-import { useHelper } from './useHelper.js';
+import { useFBO } from './Fbo.js';
+import { useHelper } from './Helper.js';
 import { shaderMaterial } from './shaderMaterial.js';
 import { Edges } from './Edges.js';
 import { FullScreenQuad } from 'three-stdlib';

package/core/Cloud.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"),a=require("./useTexture.cjs.js"),o=require("uuid"),u=require("../helpers/deprecated.cjs.js");function i(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)}var l=i(e),s=c(t);const d=new r.Matrix4,f=new r.Vector3,m=new r.Quaternion,p=new r.Vector3,g=new r.Quaternion,h=new r.Vector3,y=s.createContext(null),x=s.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:i,limit:c=200,frustumCulled:x,...v},b)=>{var M,w;const C=s.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float opacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = opacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=s.useRef(null),A=s.useRef([]),O=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>1)))),[c]),j=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>[1,1,1])).flat())),[c]),R=a.useTexture(o);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),S=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),d.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(p,g,h),_=0;_<A.current.length;_++)U=A.current[_],U.ref.current.matrixWorld.decompose(f,m,h),f.add(S.copy(U.position).applyQuaternion(m).multiply(h)),m.copy(g).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),h.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(f,m,h).premultiply(d),U.dist=f.distanceTo(p);for(A.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<A.current.length;_++)U=A.current[_],O[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.opacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),s.useLayoutEffect((()=>{const e=Math.min(c,void 0!==i?i:c,A.current.length);E.current.count=e,u.setUpdateRange(E.current.instanceMatrix,{offset:0,count:16*e}),E.current.instanceColor&&u.setUpdateRange(E.current.instanceColor,{offset:0,count:3*e}),u.setUpdateRange(E.current.geometry.attributes.opacity,{offset:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1],I=Math.max(D[0],D[1]);return D=[D[0]/I,D[1]/I],s.createElement("group",l.default({ref:b},v),s.createElement(y.Provider,{value:A},e,s.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,c],frustumCulled:x},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),s.createElement("planeGeometry",{args:[...D]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-opacity",args:[O,1]})),s.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),v=s.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:i="#ffffff",fade:c=10,volume:d=6,smallestVolume:f=.25,distribute:m=null,growth:p=4,concentrate:g="inside",seed:h=Math.random(),...x},v)=>{function b(){const e=1e4*Math.sin(h++);return e-Math.floor(e)}const M=s.useContext(y),w=s.useRef(null),[C]=s.useState((()=>o.v4())),E=s.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:C,index:t,ref:w,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,C]);return s.useLayoutEffect((()=>{E.forEach(((r,o)=>{var l;n.applyProps(r,{volume:d,color:i,speed:t,growth:p,opacity:e,fade:c,bounds:a,density:Math.max(.5,b()),rotationFactor:Math.max(.2,.5*b())*t});const s=null==m?void 0:m(r,o);(s||u>1)&&r.position.copy(r.bounds).multiply(null!==(l=null==s?void 0:s.point)&&void 0!==l?l:{x:2*b()-1,y:2*b()-1,z:2*b()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),v=Math.max(h,y,x);r.length=1,h===v&&(r.length-=h/r.bounds.x),y===v&&(r.length-=y/r.bounds.y),x===v&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==s?void 0:s.volume)?s.volume:Math.max(Math.max(0,f),"random"===g?b():"inside"===g?r.length:1-r.length))*d}))}),[g,a,c,i,e,p,d,h,u,t]),s.useLayoutEffect((()=>{const e=E;return M.current=[...M.current,...e],()=>{M.current=M.current.filter((e=>e.uuid!==C))}}),[E]),s.useImperativeHandle(v,(()=>w.current),[]),s.createElement("group",l.default({ref:w},x))})),b=s.forwardRef(((e,t)=>s.useContext(y)?s.createElement(v,l.default({ref:t},e)):s.createElement(x,null,s.createElement(v,l.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=v,exports.Clouds=x;
+"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"),a=require("./Texture.cjs.js"),o=require("uuid"),u=require("../helpers/deprecated.cjs.js");function i(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)}var l=i(e),s=c(t);const d=new r.Matrix4,f=new r.Vector3,m=new r.Quaternion,p=new r.Vector3,g=new r.Quaternion,h=new r.Vector3,y=s.createContext(null),x=s.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:i,limit:c=200,frustumCulled:x,...v},b)=>{var M,w;const C=s.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float opacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = opacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=s.useRef(null),A=s.useRef([]),O=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>1)))),[c]),j=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>[1,1,1])).flat())),[c]),R=a.useTexture(o);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),S=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),d.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(p,g,h),_=0;_<A.current.length;_++)U=A.current[_],U.ref.current.matrixWorld.decompose(f,m,h),f.add(S.copy(U.position).applyQuaternion(m).multiply(h)),m.copy(g).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),h.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(f,m,h).premultiply(d),U.dist=f.distanceTo(p);for(A.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<A.current.length;_++)U=A.current[_],O[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.opacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),s.useLayoutEffect((()=>{const e=Math.min(c,void 0!==i?i:c,A.current.length);E.current.count=e,u.setUpdateRange(E.current.instanceMatrix,{offset:0,count:16*e}),E.current.instanceColor&&u.setUpdateRange(E.current.instanceColor,{offset:0,count:3*e}),u.setUpdateRange(E.current.geometry.attributes.opacity,{offset:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1],I=Math.max(D[0],D[1]);return D=[D[0]/I,D[1]/I],s.createElement("group",l.default({ref:b},v),s.createElement(y.Provider,{value:A},e,s.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,c],frustumCulled:x},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),s.createElement("planeGeometry",{args:[...D]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-opacity",args:[O,1]})),s.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),v=s.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:i="#ffffff",fade:c=10,volume:d=6,smallestVolume:f=.25,distribute:m=null,growth:p=4,concentrate:g="inside",seed:h=Math.random(),...x},v)=>{function b(){const e=1e4*Math.sin(h++);return e-Math.floor(e)}const M=s.useContext(y),w=s.useRef(null),[C]=s.useState((()=>o.v4())),E=s.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:C,index:t,ref:w,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,C]);return s.useLayoutEffect((()=>{E.forEach(((r,o)=>{var l;n.applyProps(r,{volume:d,color:i,speed:t,growth:p,opacity:e,fade:c,bounds:a,density:Math.max(.5,b()),rotationFactor:Math.max(.2,.5*b())*t});const s=null==m?void 0:m(r,o);(s||u>1)&&r.position.copy(r.bounds).multiply(null!==(l=null==s?void 0:s.point)&&void 0!==l?l:{x:2*b()-1,y:2*b()-1,z:2*b()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),v=Math.max(h,y,x);r.length=1,h===v&&(r.length-=h/r.bounds.x),y===v&&(r.length-=y/r.bounds.y),x===v&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==s?void 0:s.volume)?s.volume:Math.max(Math.max(0,f),"random"===g?b():"inside"===g?r.length:1-r.length))*d}))}),[g,a,c,i,e,p,d,h,u,t]),s.useLayoutEffect((()=>{const e=E;return M.current=[...M.current,...e],()=>{M.current=M.current.filter((e=>e.uuid!==C))}}),[E]),s.useImperativeHandle(v,(()=>w.current),[]),s.createElement("group",l.default({ref:w},x))})),b=s.forwardRef(((e,t)=>s.useContext(y)?s.createElement(v,l.default({ref:t},e)):s.createElement(x,null,s.createElement(v,l.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=v,exports.Clouds=x;

package/core/Cloud.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { REVISION, Quaternion, Vector3, DynamicDrawUsage, MeshLambertMaterial, Matrix4, Color } from 'three';
 import { extend, useFrame, applyProps } from '@react-three/fiber';
-import { useTexture } from './useTexture.js';
+import { useTexture } from './Texture.js';
 import { v4 } from 'uuid';
 import { setUpdateRange } from '../helpers/deprecated.js';
 

package/core/CubeCamera.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./useCubeCamera.cjs.js");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)}require("three");var a=u(e);exports.CubeCamera=function({children:e,frames:u=1/0,resolution:n,near:c,far:i,envMap:o,fog:f,...s}){const l=a.useRef(null),{fbo:b,camera:p,update:m}=t.useCubeCamera({resolution:n,near:c,far:i,envMap:o,fog:f});let v=0;return r.useFrame((()=>{l.current&&(u===1/0||v<u)&&(l.current.visible=!1,m(),l.current.visible=!0,v++)})),a.createElement("group",s,a.createElement("primitive",{object:p}),a.createElement("group",{ref:l},e(b.texture)))};
+"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 n=u(e),a=u(r);function o({resolution:u=256,near:o=.1,far:c=1e3,envMap:s,fog:f}={}){const i=t.useThree((({gl:e})=>e)),l=t.useThree((({scene:e})=>e)),b=r.useMemo((()=>{const r=new e.WebGLCubeRenderTarget(u);return r.texture.type=e.HalfFloatType,r}),[u]);r.useEffect((()=>()=>{b.dispose()}),[b]);const p=r.useMemo((()=>new n.CubeCamera(o,c,b)),[o,c,b]);let d,g;const m=a.useCallback((()=>{d=l.fog,g=l.background,l.background=s||g,l.fog=f||d,p.update(i,l),l.fog=d,l.background=g}),[i,l,p]);return{fbo:b,camera:p,update:m}}exports.CubeCamera=function({children:e,frames:r=1/0,resolution:u,near:n,far:c,envMap:s,fog:f,...i}){const l=a.useRef(null),{fbo:b,camera:p,update:d}=o({resolution:u,near:n,far:c,envMap:s,fog:f});let g=0;return t.useFrame((()=>{l.current&&(r===1/0||g<r)&&(l.current.visible=!1,d(),l.current.visible=!0,g++)})),a.createElement("group",i,a.createElement("primitive",{object:p}),a.createElement("group",{ref:l},null==e?void 0:e(b.texture)))},exports.useCubeCamera=o;

package/core/CubeCamera.d.ts

@@ -1,8 +1,20 @@
-import { Texture } from 'three';
+import * as THREE from 'three';
+import { Fog, FogExp2, Texture } from 'three';
 import * as React from 'react';
-import { CubeCameraOptions } from './useCubeCamera';
+export type CubeCameraOptions = {
+    resolution?: number;
+    near?: number;
+    far?: number;
+    envMap?: THREE.Texture;
+    fog?: Fog | FogExp2;
+};
+export declare function useCubeCamera({ resolution, near, far, envMap, fog }?: CubeCameraOptions): {
+    fbo: THREE.WebGLCubeRenderTarget;
+    camera: THREE.CubeCamera;
+    update: () => void;
+};
 type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
-    children: (tex: Texture) => React.ReactNode;
+    children?: (tex: Texture) => React.ReactNode;
     frames?: number;
 } & CubeCameraOptions;
 export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: Props): React.JSX.Element;

package/core/CubeCamera.js

@@ -1,7 +1,50 @@
+import * as THREE from 'three';
+import { WebGLCubeRenderTarget, HalfFloatType } from 'three';
 import * as React from 'react';
-import { useFrame } from '@react-three/fiber';
-import { useCubeCamera } from './useCubeCamera.js';
+import { useMemo, useEffect } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
 
+function useCubeCamera({
+  resolution = 256,
+  near = 0.1,
+  far = 1000,
+  envMap,
+  fog
+} = {}) {
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  const fbo = useMemo(() => {
+    const fbo = new WebGLCubeRenderTarget(resolution);
+    fbo.texture.type = HalfFloatType;
+    return fbo;
+  }, [resolution]);
+  useEffect(() => {
+    return () => {
+      fbo.dispose();
+    };
+  }, [fbo]);
+  const camera = useMemo(() => new THREE.CubeCamera(near, far, fbo), [near, far, fbo]);
+  let originalFog;
+  let originalBackground;
+  const update = React.useCallback(() => {
+    originalFog = scene.fog;
+    originalBackground = scene.background;
+    scene.background = envMap || originalBackground;
+    scene.fog = fog || originalFog;
+    camera.update(gl, scene);
+    scene.fog = originalFog;
+    scene.background = originalBackground;
+  }, [gl, scene, camera]);
+  return {
+    fbo,
+    camera,
+    update
+  };
+}
 function CubeCamera({
   children,
   frames = Infinity,
@@ -37,7 +80,7 @@ function CubeCamera({
     object: camera
   }), /*#__PURE__*/React.createElement("group", {
     ref: ref
-  }, children(fbo.texture)));
+  }, children == null ? void 0 : children(fbo.texture)));
 }
 
-export { CubeCamera };
+export { CubeCamera, useCubeCamera };

package/core/CubeTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),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 n=u(e);function a(e,{path:u}){const[n]=t.useLoader(r.CubeTextureLoader,[e],(e=>e.setPath(u)));return n}a.preload=(e,{path:u})=>t.useLoader.preload(r.CubeTextureLoader,[e],(e=>e.setPath(u))),exports.CubeTexture=function({children:e,files:r,...t}){const u=a(r,{...t});return n.createElement(n.Fragment,null,null==e?void 0:e(u))},exports.useCubeTexture=a;

package/core/CubeTexture.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CubeTexture as _CubeTexture, Texture } from 'three';
+type Options = {
+    path: string;
+};
+export declare function useCubeTexture(files: string[], { path }: Options): _CubeTexture;
+export declare namespace useCubeTexture {
+    var preload: (files: string[], { path }: Options) => undefined;
+}
+type CubeTextureProps = {
+    children?: (tex: Texture) => React.ReactNode;
+    files: Parameters<typeof useCubeTexture>[0];
+} & Options;
+export declare function CubeTexture({ children, files, ...options }: CubeTextureProps): React.JSX.Element;
+export {};

package/core/{useCubeTexture.js → CubeTexture.js}

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { CubeTextureLoader } from 'three';
 import { useLoader } from '@react-three/fiber';
 
@@ -15,5 +16,15 @@ useCubeTexture.preload = (files, {
 }) => useLoader.preload(
 // @ts-ignore
 CubeTextureLoader, [files], loader => loader.setPath(path));
+function CubeTexture({
+  children,
+  files,
+  ...options
+}) {
+  const texture = useCubeTexture(files, {
+    ...options
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(texture));
+}
 
-export { useCubeTexture };
+export { CubeTexture, useCubeTexture };

package/core/DetectGPU.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("detect-gpu"),r=require("suspend-react");function n(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 u=n(e);const c=e=>r.suspend((()=>t.getGPUTier(e)),["useDetectGPU"]);exports.DetectGPU=function({children:e,...t}){const r=c(t);return u.createElement(u.Fragment,null,null==e?void 0:e(r))},exports.useDetectGPU=c;

package/core/DetectGPU.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GetGPUTier } from 'detect-gpu';
+export declare const useDetectGPU: (props?: GetGPUTier) => import("detect-gpu").TierResult;
+type DetectGPUProps = {
+    children?: (result: ReturnType<typeof useDetectGPU>) => React.ReactNode;
+} & Parameters<typeof useDetectGPU>[0];
+export declare function DetectGPU({ children, ...options }: DetectGPUProps): React.JSX.Element;
+export {};

package/core/DetectGPU.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { getGPUTier } from 'detect-gpu';
+import { suspend } from 'suspend-react';
+
+const useDetectGPU = props => suspend(() => getGPUTier(props), ['useDetectGPU']);
+function DetectGPU({
+  children,
+  ...options
+}) {
+  const result = useDetectGPU(options);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(result));
+}
+
+export { DetectGPU, useDetectGPU };

package/core/Example.d.ts

@@ -5,7 +5,7 @@ export type ExampleProps = {
     color?: Color;
     debug?: boolean;
     bevelSize?: number;
-} & JSX.IntrinsicElements['group'];
+} & React.ComponentProps<'group'>;
 export type ExampleApi = {
     incr: (x?: number) => void;
     decr: (x?: number) => void;

package/core/Example.js

@@ -3,6 +3,9 @@ import { Text3D } from './Text3D.js';
 import { Center } from './Center.js';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
+/**
+ * A simple counter example component. Click to increment, meta-click to decrement.
+ */
 const Example = /* @__PURE__ */React.forwardRef(({
   font,
   color = '#cbcbcb',

package/core/Fbo.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function n(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 u=n(e),i=n(t);function o(e,t,n){const o=r.useThree((e=>e.size)),s=r.useThree((e=>e.viewport)),a="number"==typeof e?e:o.width*s.dpr,l="number"==typeof t?t:o.height*s.dpr,c=("number"==typeof e?n:e)||{},{samples:p=0,depth:f,...d}=c,h=u.useMemo((()=>{const e=new i.WebGLRenderTarget(a,l,{minFilter:i.LinearFilter,magFilter:i.LinearFilter,type:i.HalfFloatType,...d});return f&&(e.depthTexture=new i.DepthTexture(a,l,i.FloatType)),e.samples=p,e}),[]);return u.useLayoutEffect((()=>{h.setSize(a,l),p&&(h.samples=p)}),[p,h,a,l]),u.useEffect((()=>()=>h.dispose()),[]),h}exports.Fbo=({children:e,width:t,height:r,...n})=>{const i=o(t,r,n);return u.createElement(u.Fragment,null,null==e?void 0:e(i))},exports.useFBO=o;

package/core/{useFBO.d.ts → Fbo.d.ts}

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import * as THREE from 'three';
 import { TextureEncoding } from '../helpers/deprecated';
 type ColorSpace = 'srgb' | 'srgb-linear' | '' | string;
@@ -19,4 +20,9 @@ type FBOSettings = {
     colorSpace?: ColorSpace | undefined;
 };
 export declare function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings): THREE.WebGLRenderTarget;
+export declare const Fbo: ({ children, width, height, ...settings }: {
+    children?: ((target: ReturnType<typeof useFBO>) => React.ReactNode) | undefined;
+    width: Parameters<typeof useFBO>[0];
+    height: Parameters<typeof useFBO>[1];
+} & FBOSettings) => React.JSX.Element;
 export {};

package/core/{useFBO.js → Fbo.js}

@@ -42,5 +42,14 @@ settings) {
   }, []);
   return target;
 }
+const Fbo = ({
+  children,
+  width,
+  height,
+  ...settings
+}) => {
+  const target = useFBO(width, height, settings);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(target));
+};
 
-export { useFBO };
+export { Fbo, useFBO };

package/core/Fbx.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three-stdlib"),u=require("@react-three/fiber"),n=require("./Clone.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 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 c=o(e),i=a(r);function l(e){return u.useLoader(t.FBXLoader,e)}l.preload=e=>u.useLoader.preload(t.FBXLoader,e),l.clear=e=>u.useLoader.clear(t.FBXLoader,e),exports.Fbx=function({path:e,...r}){const t=l(e).children[0];return i.createElement(n.Clone,c.default({},r,{object:t}))},exports.useFBX=l;

package/core/Fbx.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Group } from 'three';
+import { Clone } from './Clone';
+export declare function useFBX(path: string): Group;
+export declare namespace useFBX {
+    var preload: (path: string) => undefined;
+    var clear: (input: string | string[]) => void;
+}
+export declare function Fbx({ path, ...props }: {
+    path: Parameters<typeof useFBX>[0];
+} & Omit<React.ComponentProps<typeof Clone>, 'object'>): React.JSX.Element;

package/core/Fbx.js

@@ -0,0 +1,23 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { FBXLoader } from 'three-stdlib';
+import { useLoader } from '@react-three/fiber';
+import { Clone } from './Clone.js';
+
+function useFBX(path) {
+  return useLoader(FBXLoader, path);
+}
+useFBX.preload = path => useLoader.preload(FBXLoader, path);
+useFBX.clear = input => useLoader.clear(FBXLoader, input);
+function Fbx({
+  path,
+  ...props
+}) {
+  const fbx = useFBX(path);
+  const object = fbx.children[0];
+  return /*#__PURE__*/React.createElement(Clone, _extends({}, props, {
+    object: object
+  }));
+}
+
+export { Fbx, useFBX };

package/core/GizmoHelper.cjs.js

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