@react-three/drei 9.92.3 → 9.92.5

package/README.md

@@ -858,7 +858,7 @@ function Loop() {
     // Set the current position along the curve, you can increment indiscriminately for a loop
     motion.current += delta
     // Look ahead on the curve
-    motion.object.lookAt(motion.next)
+    motion.object.current.lookAt(motion.next)
   })
 }
 
@@ -1328,6 +1328,20 @@ To make the material transparent:
 <Image url="/file.jpg" transparent opacity={0.5} />
 ```
 
+You can have custom planes, for instance a rounded-corner plane.
+
+```jsx
+import { extend } from '@react-three/fiber'
+import { Image } from '@react-three/drei'
+import { easing, geometry } from 'maath'
+
+extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })
+
+<Image url="/file.jpg">
+  <roundedPlaneGeometry args={[1, 2, 0.15]} />
+</Image>
+```
+
 #### Text
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
@@ -3998,15 +4012,19 @@ For instance, one could want the Html component to be pinned to `positive x`, `p
   <a href="https://codesandbox.io/s/42glz0"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/42glz0/screenshot.png" alt="Demo"/></a>
 </p>
 
-Calculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes. `observe` will trigger on window resize.
+Calculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes. `observe` will trigger on window resize. To control the damping animation, use `maxDuration` to set the animation length in seconds, and `interpolateFunc` to define how the animation changes over time (should be an increasing function in [0, 1] interval, `interpolateFunc(0) === 0`, `interpolateFunc(1) === 1`).
 
 ```jsx
-<Bounds fit clip observe damping={6} margin={1.2}>
+const interpolateFunc = (t: number) => 1 - Math.exp(-5 * t) + 0.007 * t // Matches the default Bounds behavior
+const interpolateFunc1 = (t: number) => -t * t * t + 2 * t * t          // Start smoothly, finish linearly
+const interpolateFunc2 = (t: number) => -t * t * t + t * t + t          // Start linearly, finish smoothly
+
+<Bounds fit clip observe margin={1.2} maxDuration={1} interpolateFunc={interpolateFunc}>
   <mesh />
 </Bounds>
 ```
 
-The Bounds component also acts as a context provider, use the `useBounds` hook to refresh the bounds, fit the camera, clip near/far planes, go to camera orientations or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `clip` sets the cameras near/far planes. `to` sets a position and target for the camera. `fit` zooms and centers the view.
+The Bounds component also acts as a context provider, use the `useBounds` hook to refresh the bounds, fit the camera, clip near/far planes, go to camera orientations or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `reset` centers the view. `moveTo` changes the camera position. `lookAt` changes the camera orientation, with the respect to up-vector, if specified. `clip` sets the cameras near/far planes. `fit` centers the view for non-orthographic cameras (same as reset) or zooms the view for orthographic cameras.
 
 ```jsx
 function Foo() {
@@ -4019,10 +4037,17 @@ function Foo() {
     // bounds.refresh(ref.current).clip().fit()
     // bounds.refresh(new THREE.Box3()).clip().fit()
 
-    // Or, send the camera to a specific orientatin
-    // bounds.to({position: [0, 10, 10], target: {[5, 5, 0]}})
+    // Or, move the camera to a specific position, and change its orientation
+    // bounds.moveTo([0, 10, 10]).lookAt({ target: [5, 5, 0], up: [0, -1, 0] })
+
+    // For orthographic cameras, reset has to be used to center the view (fit would only change its zoom to match the bounding box)
+    // bounds.refresh().reset().clip().fit()
+  }, [...])
+}
+
 <Bounds>
   <Foo />
+</Bounds>
 ```
 
 #### CameraShake

package/core/AccumulativeShadows.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),s=require("../materials/DiscardMaterial.cjs.js"),n=require("../helpers/constants.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var h=o(e),c=l(t),u=l(r);const d=u.createContext(null),p=i.shaderMaterial({color:new c.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }",`varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),f=u.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:s=20,scale:n=10,opacity:o=1,alphaTest:l=.75,color:h="black",colorBlend:c=2,resolution:f=1024,toneMapped:g=!0,...v},M)=>{a.extend({SoftShadowMaterial:p});const b=a.useThree((e=>e.gl)),w=a.useThree((e=>e.scene)),y=a.useThree((e=>e.camera)),x=a.useThree((e=>e.invalidate)),C=u.useRef(null),S=u.useRef(null),[j]=u.useState((()=>new m(b,w,f)));u.useLayoutEffect((()=>{j.configure(C.current)}),[]);const T=u.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?s:r),count:0,getMesh:()=>C.current,reset:()=>{j.clear();const e=C.current.material;e.opacity=0,e.alphaTest=0,T.count=0},update:(e=1)=>{const t=C.current.material;T.temporal?(t.opacity=Math.min(o,t.opacity+o/T.blend),t.alphaTest=Math.min(l,t.alphaTest+l/T.blend)):(t.opacity=o,t.alphaTest=l),S.current.visible=!0,j.prepare();for(let t=0;t<e;t++)T.lights.forEach((e=>e.update())),j.update(y,T.blend);S.current.visible=!1,j.finish()}})),[j,y,w,t,r,s,o,l]);return u.useLayoutEffect((()=>{T.reset(),T.temporal||T.frames===1/0||T.update(T.blend)})),u.useImperativeHandle(M,(()=>T),[T]),a.useFrame((()=>{(T.temporal||T.frames===1/0)&&T.count<T.frames&&T.count<i&&(x(),T.update(),T.count++)})),u.createElement("group",v,u.createElement("group",{traverse:()=>null,ref:S},u.createElement(d.Provider,{value:T},e)),u.createElement("mesh",{receiveShadow:!0,ref:C,scale:n,rotation:[-Math.PI/2,0,0]},u.createElement("planeGeometry",null),u.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:g,color:h,blend:c,map:j.progressiveLightMap2.texture})))})),g=u.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:s=500,frames:o=1,position:l=[0,0,0],radius:p=1,amount:f=8,intensity:g=(n.version>=155?Math.PI:1),ambient:m=.5,...v},M)=>{const b=u.useRef(null),w=new c.Vector3(...l).length(),y=u.useContext(d),x=u.useCallback((()=>{let e;if(b.current)for(let t=0;t<b.current.children.length;t++)if(e=b.current.children[t],Math.random()>m)e.position.set(l[0]+c.MathUtils.randFloatSpread(p),l[1]+c.MathUtils.randFloatSpread(p),l[2]+c.MathUtils.randFloatSpread(p));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*w,Math.abs(Math.cos(t)*Math.sin(r)*w),Math.sin(t)*w)}}),[p,m,w,...l]),C=u.useMemo((()=>({update:x})),[x]);return u.useImperativeHandle(M,(()=>C),[C]),u.useLayoutEffect((()=>{const e=b.current;return y&&y.lights.set(e.uuid,C),()=>{y.lights.delete(e.uuid)}}),[y,C]),u.createElement("group",h.default({ref:b},v),Array.from({length:f},((n,o)=>u.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/f},u.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,s]})))))}));class m{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null,this.clearColor=new c.Color,this.clearAlpha=0;const a={type:c.HalfFloatType,magFilter:c.NearestFilter,minFilter:c.NearestFilter};this.progressiveLightMap1=new c.WebGLRenderTarget(this.res,this.res,a),this.progressiveLightMap2=new c.WebGLRenderTarget(this.res,this.res,a),this.discardMat=new s.DiscardMaterial,this.targetMat=new c.MeshLambertMaterial({fog:!1}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=e.fragmentShader.indexOf("void main() {");e.fragmentShader="varying vec2 vUv;\n"+e.fragmentShader.slice(0,t)+"uniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.getClearColor(this.clearColor),this.clearAlpha=this.renderer.getClearAlpha(),this.renderer.setClearColor("black",1),this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.renderer.setRenderTarget(null),this.renderer.setClearColor(this.clearColor,this.clearAlpha),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1,i=this.scene.background;this.scene.background=null,this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null),this.scene.background=i}}exports.AccumulativeShadows=f,exports.RandomizedLight=g,exports.accumulativeContext=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),s=require("../materials/DiscardMaterial.cjs.js"),n=require("../helpers/constants.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var h=o(e),c=l(t),u=l(r);const d=u.createContext(null),p=i.shaderMaterial({color:new c.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }",`varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`),f=u.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:s=20,scale:n=10,opacity:o=1,alphaTest:l=.75,color:h="black",colorBlend:c=2,resolution:f=1024,toneMapped:g=!0,...v},M)=>{a.extend({SoftShadowMaterial:p});const b=a.useThree((e=>e.gl)),w=a.useThree((e=>e.scene)),y=a.useThree((e=>e.camera)),x=a.useThree((e=>e.invalidate)),C=u.useRef(null),S=u.useRef(null),[j]=u.useState((()=>new m(b,w,f)));u.useLayoutEffect((()=>{j.configure(C.current)}),[]);const T=u.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?s:r),count:0,getMesh:()=>C.current,reset:()=>{j.clear();const e=C.current.material;e.opacity=0,e.alphaTest=0,T.count=0},update:(e=1)=>{const t=C.current.material;T.temporal?(t.opacity=Math.min(o,t.opacity+o/T.blend),t.alphaTest=Math.min(l,t.alphaTest+l/T.blend)):(t.opacity=o,t.alphaTest=l),S.current.visible=!0,j.prepare();for(let t=0;t<e;t++)T.lights.forEach((e=>e.update())),j.update(y,T.blend);S.current.visible=!1,j.finish()}})),[j,y,w,t,r,s,o,l]);return u.useLayoutEffect((()=>{T.reset(),T.temporal||T.frames===1/0||T.update(T.blend)})),u.useImperativeHandle(M,(()=>T),[T]),a.useFrame((()=>{(T.temporal||T.frames===1/0)&&T.count<T.frames&&T.count<i&&(x(),T.update(),T.count++)})),u.createElement("group",v,u.createElement("group",{traverse:()=>null,ref:S},u.createElement(d.Provider,{value:T},e)),u.createElement("mesh",{receiveShadow:!0,ref:C,scale:n,rotation:[-Math.PI/2,0,0]},u.createElement("planeGeometry",null),u.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:g,color:h,blend:c,map:j.progressiveLightMap2.texture})))})),g=u.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:s=500,frames:o=1,position:l=[0,0,0],radius:p=1,amount:f=8,intensity:g=(n.version>=155?Math.PI:1),ambient:m=.5,...v},M)=>{const b=u.useRef(null),w=new c.Vector3(...l).length(),y=u.useContext(d),x=u.useCallback((()=>{let e;if(b.current)for(let t=0;t<b.current.children.length;t++)if(e=b.current.children[t],Math.random()>m)e.position.set(l[0]+c.MathUtils.randFloatSpread(p),l[1]+c.MathUtils.randFloatSpread(p),l[2]+c.MathUtils.randFloatSpread(p));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*w,Math.abs(Math.cos(t)*Math.sin(r)*w),Math.sin(t)*w)}}),[p,m,w,...l]),C=u.useMemo((()=>({update:x})),[x]);return u.useImperativeHandle(M,(()=>C),[C]),u.useLayoutEffect((()=>{var e;const t=b.current;return y&&(null==(e=y.lights)||e.set(t.uuid,C)),()=>{var e;null==y||null==(e=y.lights)||e.delete(t.uuid)}}),[y,C]),u.createElement("group",h.default({ref:b},v),Array.from({length:f},((n,o)=>u.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/f},u.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,s]})))))}));class m{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null,this.clearColor=new c.Color,this.clearAlpha=0;const a={type:c.HalfFloatType,magFilter:c.NearestFilter,minFilter:c.NearestFilter};this.progressiveLightMap1=new c.WebGLRenderTarget(this.res,this.res,a),this.progressiveLightMap2=new c.WebGLRenderTarget(this.res,this.res,a),this.discardMat=new s.DiscardMaterial,this.targetMat=new c.MeshLambertMaterial({fog:!1}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=e.fragmentShader.indexOf("void main() {");e.fragmentShader="varying vec2 vUv;\n"+e.fragmentShader.slice(0,t)+"uniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.getClearColor(this.clearColor),this.clearAlpha=this.renderer.getClearAlpha(),this.renderer.setClearColor("black",1),this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.renderer.setRenderTarget(null),this.renderer.setClearColor(this.clearColor,this.clearAlpha),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1,i=this.scene.background;this.scene.background=null,this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null),this.scene.background=i}}exports.AccumulativeShadows=f,exports.RandomizedLight=g,exports.accumulativeContext=d;

package/core/AccumulativeShadows.js

@@ -178,9 +178,13 @@ const RandomizedLight = /* @__PURE__ */React.forwardRef(({
   }), [update]);
   React.useImperativeHandle(forwardRef, () => api, [api]);
   React.useLayoutEffect(() => {
+    var _parent$lights;
     const group = gLights.current;
-    if (parent) parent.lights.set(group.uuid, api);
-    return () => void parent.lights.delete(group.uuid);
+    if (parent) (_parent$lights = parent.lights) == null || _parent$lights.set(group.uuid, api);
+    return () => {
+      var _parent$lights2;
+      return void (parent == null || (_parent$lights2 = parent.lights) == null ? void 0 : _parent$lights2.delete(group.uuid));
+    };
   }, [parent, api]);
   return /*#__PURE__*/React.createElement("group", _extends({
     ref: gLights

package/core/Bounds.cjs.js

@@ -1 +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 o=n(e),c=n(t),a=function(e){return e[e.NONE=0]="NONE",e[e.START=1]="START",e[e.ACTIVE=2]="ACTIVE",e}(a||{});const u=e=>e&&e.isOrthographicCamera,i=e=>1-Math.exp(-5*e)+.007*e,s=o.createContext(null);exports.Bounds=function({children:e,maxDuration:t=1,margin:n=1.2,observe:m,fit:p,clip:l,interpolateFunc:x=i,onFit:d}){const f=o.useRef(null),{camera:y,size:h,invalidate:g}=r.useThree(),v=r.useThree((e=>e.controls)),R=o.useRef(d);R.current=d;const M=o.useRef({camPos:new c.Vector3,camRot:new c.Quaternion,camZoom:1}),P=o.useRef({camPos:void 0,camRot:void 0,camZoom:void 0,camUp:void 0,target:void 0}),w=o.useRef(a.NONE),T=o.useRef(0),[V]=o.useState((()=>new c.Box3)),A=o.useMemo((()=>{function e(){const e=V.getSize(new c.Vector3),t=V.getCenter(new c.Vector3),r=Math.max(e.x,e.y,e.z),o=u(y)?4*r:r/(2*Math.atan(Math.PI*y.fov/360)),a=u(y)?4*r:o/y.aspect,i=n*Math.max(o,a);return{box:V,size:e,center:t,distance:i}}return{getSize:e,refresh(e){if((t=e)&&t.isBox3)V.copy(e);else{const t=e||f.current;if(!t)return this;t.updateWorldMatrix(!0,!0),V.setFromObject(t)}var t;if(V.isEmpty()){const e=y.position.length()||10;V.setFromCenterAndSize(new c.Vector3,new c.Vector3(e,e,e))}return M.current.camPos.copy(y.position),M.current.camRot.copy(y.quaternion),u(y)&&(M.current.camZoom=y.zoom),P.current.camPos=void 0,P.current.camRot=void 0,P.current.camZoom=void 0,P.current.camUp=void 0,P.current.target=void 0,this},reset(){const{center:t,distance:r}=e(),n=y.position.clone().sub(t).normalize();P.current.camPos=t.clone().addScaledVector(n,r),P.current.target=t.clone();const o=(new c.Matrix4).lookAt(P.current.camPos,P.current.target,y.up);return P.current.camRot=(new c.Quaternion).setFromRotationMatrix(o),w.current=a.START,T.current=0,this},moveTo(e){return P.current.camPos=Array.isArray(e)?new c.Vector3(...e):e.clone(),w.current=a.START,T.current=0,this},lookAt({target:e,up:t}){P.current.target=Array.isArray(e)?new c.Vector3(...e):e.clone(),P.current.camUp=t?Array.isArray(t)?new c.Vector3(...t):t.clone():y.up.clone();const r=(new c.Matrix4).lookAt(P.current.camPos||y.position,P.current.target,P.current.camUp);return P.current.camRot=(new c.Quaternion).setFromRotationMatrix(r),w.current=a.START,T.current=0,this},to({position:e,target:t}){return this.moveTo(e).lookAt({target:t})},fit(){if(!u(y))return this.reset();let e=0,t=0;const r=[new c.Vector3(V.min.x,V.min.y,V.min.z),new c.Vector3(V.min.x,V.max.y,V.min.z),new c.Vector3(V.min.x,V.min.y,V.max.z),new c.Vector3(V.min.x,V.max.y,V.max.z),new c.Vector3(V.max.x,V.max.y,V.max.z),new c.Vector3(V.max.x,V.max.y,V.min.z),new c.Vector3(V.max.x,V.min.y,V.max.z),new c.Vector3(V.max.x,V.min.y,V.min.z)],o=P.current.camPos||y.position,i=P.current.target||(null==v?void 0:v.target),s=P.current.camUp||y.up,m=i?(new c.Matrix4).lookAt(o,i,s).setPosition(o).invert():y.matrixWorldInverse;for(const n of r)n.applyMatrix4(m),e=Math.max(e,Math.abs(n.y)),t=Math.max(t,Math.abs(n.x));e*=2,t*=2;const p=(y.top-y.bottom)/e,l=(y.right-y.left)/t;return P.current.camZoom=Math.min(p,l)/n,w.current=a.START,T.current=0,R.current&&R.current(this.getSize()),this},clip(){const{distance:t}=e();return y.near=t/100,y.far=100*t,y.updateProjectionMatrix(),v&&(v.maxDistance=10*t,v.update()),g(),this}}}),[V,y,v,n,g]);o.useLayoutEffect((()=>{if(v){const e=()=>{if(v&&P.current.target&&w.current!==a.NONE){const e=(new c.Vector3).setFromMatrixColumn(y.matrix,2),t=M.current.camPos.distanceTo(v.target),r=(P.current.camPos||M.current.camPos).distanceTo(P.current.target),n=(1-T.current)*t+T.current*r;v.target.copy(y.position).addScaledVector(e,-n),v.update()}w.current=a.NONE};return v.addEventListener("start",e),()=>v.removeEventListener("start",e)}}),[v]);const z=o.useRef(0);return o.useLayoutEffect((()=>{(m||0==z.current++)&&(A.refresh(),p&&A.fit(),l&&A.clip())}),[h,l,p,m,y,v]),r.useFrame(((e,r)=>{if(w.current===a.START)w.current=a.ACTIVE,g();else if(w.current===a.ACTIVE){if(T.current+=r/t,T.current>=1)P.current.camPos&&y.position.copy(P.current.camPos),P.current.camRot&&y.quaternion.copy(P.current.camRot),P.current.camUp&&y.up.copy(P.current.camUp),P.current.camZoom&&u(y)&&(y.zoom=P.current.camZoom),y.updateMatrixWorld(),y.updateProjectionMatrix(),v&&P.current.target&&(v.target.copy(P.current.target),v.update()),w.current=a.NONE;else{const e=x(T.current);P.current.camPos&&y.position.lerpVectors(M.current.camPos,P.current.camPos,e),P.current.camRot&&y.quaternion.slerpQuaternions(M.current.camRot,P.current.camRot,e),P.current.camUp&&y.up.set(0,1,0).applyQuaternion(y.quaternion),P.current.camZoom&&u(y)&&(y.zoom=(1-e)*M.current.camZoom+e*P.current.camZoom),y.updateMatrixWorld(),y.updateProjectionMatrix()}g()}})),o.createElement("group",{ref:f},o.createElement(s.Provider,{value:A},e))},exports.useBounds=function(){return o.useContext(s)};
+"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 o=n(e),c=n(t),a=function(e){return e[e.NONE=0]="NONE",e[e.START=1]="START",e[e.ACTIVE=2]="ACTIVE",e}(a||{});const u=e=>e&&e.isOrthographicCamera,i=e=>1-Math.exp(-5*e)+.007*e,s=o.createContext(null);exports.Bounds=function({children:e,maxDuration:t=1,margin:n=1.2,observe:m,fit:p,clip:l,interpolateFunc:x=i,onFit:d}){const f=o.useRef(null),{camera:y,size:h,invalidate:g}=r.useThree(),v=r.useThree((e=>e.controls)),R=o.useRef(d);R.current=d;const M=o.useRef({camPos:new c.Vector3,camRot:new c.Quaternion,camZoom:1}),P=o.useRef({camPos:void 0,camRot:void 0,camZoom:void 0,camUp:void 0,target:void 0}),w=o.useRef(a.NONE),T=o.useRef(0),[V]=o.useState((()=>new c.Box3)),A=o.useMemo((()=>{function e(){const e=V.getSize(new c.Vector3),t=V.getCenter(new c.Vector3),r=Math.max(e.x,e.y,e.z),o=u(y)?4*r:r/(2*Math.atan(Math.PI*y.fov/360)),a=u(y)?4*r:o/y.aspect,i=n*Math.max(o,a);return{box:V,size:e,center:t,distance:i}}return{getSize:e,refresh(e){if((t=e)&&t.isBox3)V.copy(e);else{const t=e||f.current;if(!t)return this;t.updateWorldMatrix(!0,!0),V.setFromObject(t)}var t;if(V.isEmpty()){const e=y.position.length()||10;V.setFromCenterAndSize(new c.Vector3,new c.Vector3(e,e,e))}return M.current.camPos.copy(y.position),M.current.camRot.copy(y.quaternion),u(y)&&(M.current.camZoom=y.zoom),P.current.camPos=void 0,P.current.camRot=void 0,P.current.camZoom=void 0,P.current.camUp=void 0,P.current.target=void 0,this},reset(){const{center:t,distance:r}=e(),n=y.position.clone().sub(t).normalize();P.current.camPos=t.clone().addScaledVector(n,r),P.current.target=t.clone();const o=(new c.Matrix4).lookAt(P.current.camPos,P.current.target,y.up);return P.current.camRot=(new c.Quaternion).setFromRotationMatrix(o),w.current=a.START,T.current=0,this},moveTo(e){return P.current.camPos=Array.isArray(e)?new c.Vector3(...e):e.clone(),w.current=a.START,T.current=0,this},lookAt({target:e,up:t}){P.current.target=Array.isArray(e)?new c.Vector3(...e):e.clone(),P.current.camUp=t?Array.isArray(t)?new c.Vector3(...t):t.clone():y.up.clone();const r=(new c.Matrix4).lookAt(P.current.camPos||y.position,P.current.target,P.current.camUp);return P.current.camRot=(new c.Quaternion).setFromRotationMatrix(r),w.current=a.START,T.current=0,this},to({position:e,target:t}){return this.moveTo(e).lookAt({target:t})},fit(){if(!u(y))return this.reset();let e=0,t=0;const r=[new c.Vector3(V.min.x,V.min.y,V.min.z),new c.Vector3(V.min.x,V.max.y,V.min.z),new c.Vector3(V.min.x,V.min.y,V.max.z),new c.Vector3(V.min.x,V.max.y,V.max.z),new c.Vector3(V.max.x,V.max.y,V.max.z),new c.Vector3(V.max.x,V.max.y,V.min.z),new c.Vector3(V.max.x,V.min.y,V.max.z),new c.Vector3(V.max.x,V.min.y,V.min.z)],o=P.current.camPos||y.position,i=P.current.target||(null==v?void 0:v.target),s=P.current.camUp||y.up,m=i?(new c.Matrix4).lookAt(o,i,s).setPosition(o).invert():y.matrixWorldInverse;for(const n of r)n.applyMatrix4(m),e=Math.max(e,Math.abs(n.y)),t=Math.max(t,Math.abs(n.x));e*=2,t*=2;const p=(y.top-y.bottom)/e,l=(y.right-y.left)/t;return P.current.camZoom=Math.min(p,l)/n,w.current=a.START,T.current=0,R.current&&R.current(this.getSize()),this},clip(){const{distance:t}=e();return y.near=t/100,y.far=100*t,y.updateProjectionMatrix(),v&&(v.maxDistance=10*t,v.update()),g(),this}}}),[V,y,v,n,g]);o.useLayoutEffect((()=>{if(v){const e=()=>{if(v&&P.current.target&&w.current!==a.NONE){const e=(new c.Vector3).setFromMatrixColumn(y.matrix,2),t=M.current.camPos.distanceTo(v.target),r=(P.current.camPos||M.current.camPos).distanceTo(P.current.target),n=(1-T.current)*t+T.current*r;v.target.copy(y.position).addScaledVector(e,-n),v.update()}w.current=a.NONE};return v.addEventListener("start",e),()=>v.removeEventListener("start",e)}}),[v]);const z=o.useRef(0);return o.useLayoutEffect((()=>{(m||0==z.current++)&&(A.refresh(),p&&A.reset().fit(),l&&A.clip())}),[h,l,p,m,y,v]),r.useFrame(((e,r)=>{if(w.current===a.START)w.current=a.ACTIVE,g();else if(w.current===a.ACTIVE){if(T.current+=r/t,T.current>=1)P.current.camPos&&y.position.copy(P.current.camPos),P.current.camRot&&y.quaternion.copy(P.current.camRot),P.current.camUp&&y.up.copy(P.current.camUp),P.current.camZoom&&u(y)&&(y.zoom=P.current.camZoom),y.updateMatrixWorld(),y.updateProjectionMatrix(),v&&P.current.target&&(v.target.copy(P.current.target),v.update()),w.current=a.NONE;else{const e=x(T.current);P.current.camPos&&y.position.lerpVectors(M.current.camPos,P.current.camPos,e),P.current.camRot&&y.quaternion.slerpQuaternions(M.current.camRot,P.current.camRot,e),P.current.camUp&&y.up.set(0,1,0).applyQuaternion(y.quaternion),P.current.camZoom&&u(y)&&(y.zoom=(1-e)*M.current.camZoom+e*P.current.camZoom),y.updateMatrixWorld(),y.updateProjectionMatrix()}g()}})),o.createElement("group",{ref:f},o.createElement(s.Provider,{value:A},e))},exports.useBounds=function(){return o.useContext(s)};

package/core/Bounds.d.ts

@@ -8,19 +8,19 @@ export type SizeProps = {
 };
 export type BoundsApi = {
     getSize: () => SizeProps;
-    refresh(object?: THREE.Object3D | THREE.Box3): any;
-    reset(): any;
-    moveTo(position: THREE.Vector3 | [number, number, number]): any;
+    refresh(object?: THREE.Object3D | THREE.Box3): BoundsApi;
+    reset(): BoundsApi;
+    moveTo(position: THREE.Vector3 | [number, number, number]): BoundsApi;
     lookAt({ target, up, }: {
         target?: THREE.Vector3 | [number, number, number];
         up?: THREE.Vector3 | [number, number, number];
-    }): any;
+    }): BoundsApi;
     to({ position, target }: {
         position: [number, number, number];
         target: [number, number, number];
-    }): any;
-    fit(): any;
-    clip(): any;
+    }): BoundsApi;
+    fit(): BoundsApi;
+    clip(): BoundsApi;
 };
 export type BoundsProps = JSX.IntrinsicElements['group'] & {
     maxDuration?: number;

package/core/Bounds.js

@@ -207,7 +207,7 @@ function Bounds({
   React.useLayoutEffect(() => {
     if (observe || count.current++ === 0) {
       api.refresh();
-      if (fit) api.fit();
+      if (fit) api.reset().fit();
       if (clip) api.clip();
     }
   }, [size, clip, fit, observe, camera, controls]);

package/core/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js"),c=require("../helpers/constants.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 l=i(e),u=s(r),f=s(t);const m=a.shaderMaterial({color:new f.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),v=u.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:s,toneMapped:f,transparent:v,side:d,...y},g)=>{n.extend({ImageMaterial:m});const p=Array.isArray(a)?[a[0],a[1]]:[a,a],x=[s.image.width,s.image.height];return u.createElement("mesh",l.default({ref:g,scale:Array.isArray(a)?[...a,1]:a},y),u.createElement("planeGeometry",{args:[1,1,t,t]}),u.createElement("imageMaterial",{color:r,map:s,zoom:o,grayscale:c,opacity:i,scale:p,imageBounds:x,toneMapped:f,transparent:v,side:d}),e)})),d=u.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return u.createElement(v,l.default({},r,{texture:n,ref:t}))})),y=u.forwardRef((({url:e,...r},t)=>u.createElement(v,l.default({},r,{ref:t})))),g=u.forwardRef(((e,r)=>{if(e.url)return u.createElement(d,l.default({},e,{ref:r}));if(e.texture)return u.createElement(y,l.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js"),c=require("../helpers/constants.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 l=i(e),u=s(r),f=s(t);const m=a.shaderMaterial({color:new f.Color("white"),scale:new f.Vector2(1,1),imageBounds:new f.Vector2(1,1),map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),v=u.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:s,toneMapped:f,transparent:v,side:d,...y},g)=>{n.extend({ImageMaterial:m});const p=u.useRef(null),x=Array.isArray(a)?[a[0],a[1]]:[a,a],h=[s.image.width,s.image.height];return u.useImperativeHandle(g,(()=>p.current),[]),u.useLayoutEffect((()=>{p.current.geometry.parameters&&p.current.material.scale.set(x[0]*p.current.geometry.parameters.width,x[1]*p.current.geometry.parameters.height)}),[]),u.createElement("mesh",l.default({ref:p,scale:Array.isArray(a)?[...a,1]:a},y),u.createElement("planeGeometry",{args:[1,1,t,t]}),u.createElement("imageMaterial",{color:r,map:s,zoom:o,grayscale:c,opacity:i,scale:x,imageBounds:h,toneMapped:f,transparent:v,side:d}),e)})),d=u.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return u.createElement(v,l.default({},r,{texture:n,ref:t}))})),y=u.forwardRef((({url:e,...r},t)=>u.createElement(v,l.default({},r,{ref:t})))),g=u.forwardRef(((e,r)=>{if(e.url)return u.createElement(d,l.default({},e,{ref:r}));if(e.texture)return u.createElement(y,l.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;

package/core/Image.js

@@ -10,8 +10,8 @@ import { version } from '../helpers/constants.js';
 
 const ImageMaterialImpl = /* @__PURE__ */shaderMaterial({
   color: /* @__PURE__ */new THREE.Color('white'),
-  scale: [1, 1],
-  imageBounds: [1, 1],
+  scale: /* @__PURE__ */new THREE.Vector2(1, 1),
+  imageBounds: /* @__PURE__ */new THREE.Vector2(1, 1),
   map: null,
   zoom: 1,
   grayscale: 0,
@@ -67,12 +67,26 @@ const ImageBase = /* @__PURE__ */React.forwardRef(({
   transparent,
   side,
   ...props
-}, ref) => {
+}, fref) => {
   extend({
     ImageMaterial: ImageMaterialImpl
   });
+  const ref = React.useRef(null);
   const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
   const imageBounds = [texture.image.width, texture.image.height];
+  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useLayoutEffect(() => {
+    // Support arbitrary plane geometries (for instance with rounded corners)
+    // @ts-ignore
+    if (ref.current.geometry.parameters) {
+      // @ts-ignore
+      ref.current.material.scale.set(
+      // @ts-ignore
+      planeBounds[0] * ref.current.geometry.parameters.width,
+      // @ts-ignore
+      planeBounds[1] * ref.current.geometry.parameters.height);
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
     scale: Array.isArray(scale) ? [...scale, 1] : scale

package/core/Outlines.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
 type OutlinesProps = JSX.IntrinsicElements['group'] & {
-    color: ReactThreeFiber.Color;
-    screenspace: boolean;
-    opacity: number;
-    transparent: boolean;
-    thickness: number;
-    angle: number;
+    color?: ReactThreeFiber.Color;
+    screenspace?: boolean;
+    opacity?: number;
+    transparent?: boolean;
+    thickness?: number;
+    angle?: number;
     toneMapped?: boolean;
     polygonOffset?: boolean;
     polygonOffsetFactor?: number;