@react-three/drei 9.101.0 → 9.102.1

package/README.md

@@ -448,7 +448,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
 You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
 
 ```jsx
-;<ScrollControls pages={3} damping={0.1}>
+<ScrollControls pages={3} damping={0.1}>
   {/* Canvas contents in here will *not* scroll, but receive useScroll! */}
   <SomeModel />
   <Scroll>
@@ -1596,7 +1596,7 @@ Radial gradient.
 
 ```jsx
 import { GradientTexture, GradientType } from './GradientTexture'
-;<mesh>
+<mesh>
   <planeGeometry />
   <meshBasicMaterial>
     <GradientTexture
@@ -3725,7 +3725,7 @@ If you still experience flip flops despite the bounds you can define a limit of
 PerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.
 
 ```jsx
-;<PerformanceMonitor>
+<PerformanceMonitor>
   <Effects />
 </PerformanceMonitor>
 
@@ -3755,19 +3755,16 @@ type HudProps = {
 ```
 
 ```jsx
-{
-  /* Renders on top of the default scene with a perspective camera */
-}
-;<Hud>
+{ /* Renders on top of the default scene with a perspective camera */ }
+<Hud>
   <PerspectiveCamera makeDefault position={[0, 0, 10]} />
   <mesh>
     <ringGeometry />
   </mesh>
 </Hud>
-{
-  /* Renders on top of the previous HUD with an orthographic camera */
-}
-;<Hud renderPriority={2}>
+
+{ /* Renders on top of the previous HUD with an orthographic camera */ }
+<Hud renderPriority={2}>
   <OrthographicCamera makeDefault position={[0, 0, 10]} />
   <mesh>
     <boxGeometry />
@@ -4296,7 +4293,7 @@ const config = {
   controls: undefined, // if using orbit controls, pass a ref here so we can update the rotation
 }
 
-;<CameraShake {...config} />
+<CameraShake {...config} />
 ```
 
 ```ts
@@ -4887,6 +4884,8 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
   range?: number
   /** Which material it will override, default: MeshLambertMaterial */
   material?: typeof Material
+  /** Frustum culling, default: true */
+  frustumCulled?: boolean
 }
 
 type CloudProps = JSX.IntrinsicElements['group'] & {

package/core/Cloud.d.ts

@@ -33,6 +33,7 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
     limit?: number;
     range?: number;
     material?: typeof Material;
+    frustumCulled?: boolean;
 };
 type CloudProps = JSX.IntrinsicElements['group'] & {
     seed?: number;
@@ -51,7 +52,6 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
     fade?: number;
     opacity?: number;
     color?: ReactThreeFiber.Color;
-    frustumCulled?: boolean;
 };
 export declare const Clouds: React.ForwardRefExoticComponent<Omit<CloudsProps, "ref"> & React.RefAttributes<Group>>;
 export declare const CloudInstance: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;

package/core/Edges.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");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=n(e),a=u(r),o=u(t);const l=a.forwardRef((({userData:e,children:r,geometry:t,threshold:n=15,color:u="black",...l},s)=>{const f=a.useRef(null);return a.useLayoutEffect((()=>{const e=f.current.parent;if(e){const r=t||e.geometry;r===f.current.userData.currentGeom&&n===f.current.userData.currentThreshold||(f.current.userData.currentGeom=r,f.current.userData.currentThreshold=n,f.current.geometry=new o.EdgesGeometry(r,n))}})),a.useImperativeHandle(s,(()=>f.current)),a.createElement("lineSegments",c.default({ref:f,raycast:()=>null},l),r||a.createElement("lineBasicMaterial",{color:u}))}));exports.Edges=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("three-stdlib"),i=require("@react-three/fiber");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),o=a(t),s=a(r);const l=o.forwardRef((({children:e,threshold:t=15,color:r="black",opacity:u=1,linewidth:a,lineWidth:l,...d},f)=>{var m;const b=o.useRef(null);o.useImperativeHandle(f,(()=>b.current),[]);const h=o.useMemo((()=>new n.LineSegmentsGeometry),[]),p=o.useMemo((()=>new n.LineMaterial),[]),y=i.useThree((e=>e.size)),g=o.useRef(),v=o.useRef();return o.useLayoutEffect((()=>{const e=b.current.parent;if(e){const r=e.geometry;if(r!==g.current||t!==v.current){g.current=r,v.current=t;const e=new s.EdgesGeometry(r,t).attributes.position.array;b.current.geometry.setPositions(e),b.current.geometry.attributes.instanceStart.needsUpdate=!0,b.current.geometry.attributes.instanceEnd.needsUpdate=!0}}})),o.createElement("mesh",c.default({ref:b,raycast:()=>null},d),o.createElement("primitive",{object:h,attach:"geometry"}),o.createElement("primitive",{object:p,attach:"material",color:r,opacity:u,transparent:u<1,resolution:[y.width,y.height],linewidth:null!==(m=null!=a?a:l)&&void 0!==m?m:1}),e)}));exports.Edges=l;

package/core/Edges.d.ts

@@ -1,9 +1,13 @@
-import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
+import { LineSegmentsGeometry, LineMaterial } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type Props = JSX.IntrinsicElements['lineSegments'] & {
+import { type Color, type ThreeElements } from '@react-three/fiber';
+export type EdgesRef = THREE.Mesh<LineSegmentsGeometry, LineMaterial>;
+export interface EdgesProps extends Partial<ThreeElements['mesh']> {
+    color?: Color;
+    opacity?: number;
     threshold?: number;
-    color?: ReactThreeFiber.Color;
-};
-export declare const Edges: ForwardRefComponent<Props, THREE.LineSegments>;
-export {};
+    linewidth?: number;
+    lineWidth?: number;
+}
+export declare const Edges: ForwardRefComponent<EdgesProps, EdgesRef>;

package/core/Edges.js

@@ -1,34 +1,55 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
+import { LineSegmentsGeometry, LineMaterial } from 'three-stdlib';
+import { useThree } from '@react-three/fiber';
 
 const Edges = /* @__PURE__ */React.forwardRef(({
-  userData,
   children,
-  geometry,
   threshold = 15,
   color = 'black',
+  opacity = 1,
+  linewidth,
+  lineWidth,
   ...props
 }, fref) => {
+  var _ref;
   const ref = React.useRef(null);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  const geometry = React.useMemo(() => new LineSegmentsGeometry(), []);
+  const material = React.useMemo(() => new LineMaterial(), []);
+  const size = useThree(s => s.size);
+  const memoizedGeometry = React.useRef();
+  const memoizedThreshold = React.useRef();
   React.useLayoutEffect(() => {
     const parent = ref.current.parent;
     if (parent) {
-      const geom = geometry || parent.geometry;
-      if (geom !== ref.current.userData.currentGeom || threshold !== ref.current.userData.currentThreshold) {
-        ref.current.userData.currentGeom = geom;
-        ref.current.userData.currentThreshold = threshold;
-        ref.current.geometry = new THREE.EdgesGeometry(geom, threshold);
+      const geometry = parent.geometry;
+      if (geometry !== memoizedGeometry.current || threshold !== memoizedThreshold.current) {
+        memoizedGeometry.current = geometry;
+        memoizedThreshold.current = threshold;
+        const points = new THREE.EdgesGeometry(geometry, threshold).attributes.position.array;
+        ref.current.geometry.setPositions(points);
+        ref.current.geometry.attributes.instanceStart.needsUpdate = true;
+        ref.current.geometry.attributes.instanceEnd.needsUpdate = true;
       }
     }
   });
-  React.useImperativeHandle(fref, () => ref.current);
-  return /*#__PURE__*/React.createElement("lineSegments", _extends({
+  return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
     raycast: () => null
-  }, props), children ? children : /*#__PURE__*/React.createElement("lineBasicMaterial", {
-    color: color
-  }));
+  }, props), /*#__PURE__*/React.createElement("primitive", {
+    object: geometry,
+    attach: "geometry"
+  }), /*#__PURE__*/React.createElement("primitive", {
+    object: material,
+    attach: "material",
+    color: color,
+    opacity: opacity,
+    transparent: opacity < 1,
+    resolution: [size.width, size.height],
+    linewidth: (_ref = linewidth !== null && linewidth !== void 0 ? linewidth : lineWidth) !== null && _ref !== void 0 ? _ref : 1
+  }), children);
 });
 
 export { Edges };

package/core/Effects.d.ts

@@ -1,7 +1,8 @@
-import { TextureDataType, TextureEncoding } from 'three';
+import { TextureDataType } from 'three';
 import { ReactThreeFiber } from '@react-three/fiber';
 import { EffectComposer, RenderPass, ShaderPass } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
+import { TextureEncoding } from '../helpers/deprecated';
 type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
     multisamping?: number;
     encoding?: TextureEncoding;

package/core/Environment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(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(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("../helpers/environment-assets.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:g,path:p,preset:v,extensions:E}){const h=n.useThree((e=>e.gl)),j=n.useThree((e=>e.scene)),k=l.useRef(null),[x]=l.useState((()=>new t.Scene)),y=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);l.useLayoutEffect((()=>(1===c&&k.current.update(h,x),d(a,b,j,y.texture,i))),[e,x,y.texture,b,j,a,c,h]);let P=1;return n.useFrame((()=>{(c===1/0||P<c)&&(k.current.update(h,x),P++)})),l.createElement(l.Fragment,null,n.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:k,args:[r,u,y]}),g||v?l.createElement(f,{background:!0,files:g,preset:v,path:p,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function g(e){var r,t,c,s;const i=o.useEnvironment(e),d=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[d]),[d]),b=null==(r=e.ground)?void 0:r.height,g=null==(t=e.ground)?void 0:t.radius,p=null!==(c=null==(s=e.ground)?void 0:s.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(m,a.default({},e,{map:d})),l.createElement("groundProjectedEnvImpl",{args:f,scale:p,height:b,radius:g}))}exports.Environment=function(e){return e.ground?l.createElement(g,e):e.map?l.createElement(m,e):e.children?l.createElement(b,e):l.createElement(f,e)},exports.EnvironmentCube=f,exports.EnvironmentMap=m,exports.EnvironmentPortal=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("./useEnvironment.cjs.js");function c(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(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var a=c(e),l=s(r);const i=e=>{return(r=e).current&&r.current.isScene?e.current:e;var r};function d(e,r,n,t,u=0){const o=i(r||n),c=o.background,s=o.environment,a=o.backgroundBlurriness||0;return"only"!==e&&(o.environment=t),e&&(o.background=t),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=u),()=>{"only"!==e&&(o.environment=s),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=a)}}function m({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return d(r,e,o,u,t)}),[o,e,u,r,t]),null}function f({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>d(e,r,s,c,t)),[c,e,r,s,t]),null}function b({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:i,scene:b,files:p,path:g,preset:v,extensions:E}){const h=n.useThree((e=>e.gl)),j=n.useThree((e=>e.scene)),k=l.useRef(null),[x]=l.useState((()=>new t.Scene)),y=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);l.useLayoutEffect((()=>(1===c&&k.current.update(h,x),d(a,b,j,y.texture,i))),[e,x,y.texture,b,j,a,c,h]);let q=1;return n.useFrame((()=>{(c===1/0||q<c)&&(k.current.update(h,x),q++)})),l.createElement(l.Fragment,null,n.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:k,args:[r,u,y]}),p||v?l.createElement(f,{background:!0,files:p,preset:v,path:g,extensions:E}):s?l.createElement(m,{background:!0,map:s,extensions:E}):null),x))}function p(e){var r,t,c,s;const i=o.useEnvironment(e),d=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[d]),[d]),b=null==(r=e.ground)?void 0:r.height,p=null==(t=e.ground)?void 0:t.radius,g=null!==(c=null==(s=e.ground)?void 0:s.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(m,a.default({},e,{map:d})),l.createElement("groundProjectedEnvImpl",{args:f,scale:g,height:b,radius:p}))}exports.Environment=function(e){return e.ground?l.createElement(p,e):e.map?l.createElement(m,e):e.children?l.createElement(b,e):l.createElement(f,e)},exports.EnvironmentCube=f,exports.EnvironmentMap=m,exports.EnvironmentPortal=b;

package/core/Stage.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),n=require("./Environment.cjs.js"),i=require("./ContactShadows.cjs.js"),r=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const n=s.useBounds();return c.useEffect((()=>{t&&n.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,y,E,q,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(y=null==f?void 0:f.offset)&&void 0!==y?y:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:n,height:i,depth:r,boundingSphere:a}=e;B({radius:a.radius,width:n,height:i,depth:r}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(r.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(i.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(E=A.amount)&&void 0!==E?E:8,radius:null!==(q=A.radius)&&void 0!==q?q:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(n.Environment,D))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),n=require("./ContactShadows.cjs.js"),r=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const i=s.useBounds();return c.useEffect((()=>{t&&i.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,y,E,q,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(y=null==f?void 0:f.offset)&&void 0!==y?y:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:i,height:n,depth:r,boundingSphere:a}=e;B({radius:a.radius,width:i,height:n,depth:r}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(r.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(n.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(E=A.amount)&&void 0!==E?E:8,radius:null!==(q=A.radius)&&void 0!==q?q:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(i.Environment,D))};

package/core/useEnvironment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js");const s=e=>Array.isArray(e);exports.useEnvironment=function({files:i=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:o="",preset:a,encoding:p,extensions:l}={}){var u;let c,d=null,b=!1;if(a){if(!(a in t.presetsObj))throw new Error("Preset must be one of: "+Object.keys(t.presetsObj).join(", "));i=t.presetsObj[a],o="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}if(b=s(i),c=s(i)?"cube":i.startsWith("data:application/exr")?"exr":i.startsWith("data:application/hdr")?"hdr":null==(u=i.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),d=b?r.CubeTextureLoader:"hdr"===c?n.RGBELoader:"exr"===c?n.EXRLoader:null,!d)throw new Error("useEnvironment: Unrecognized file extension: "+i);const h=e.useLoader(d,b?[i]:i,(e=>{null==e.setPath||e.setPath(o),l&&l(e)})),g=b?h[0]:h;return g.mapping=b?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in g?g.colorSpace=(null!=p?p:b)?"srgb":"srgb-linear":g.encoding=(null!=p?p:b)?3001:3e3,g};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js"),s=require("../helpers/deprecated.cjs.js");const i=e=>Array.isArray(e);exports.useEnvironment=function({files:o=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:a="",preset:p,encoding:l,extensions:c}={}){var u;let d,b=null,h=!1;if(p){if(!(p in t.presetsObj))throw new Error("Preset must be one of: "+Object.keys(t.presetsObj).join(", "));o=t.presetsObj[p],a="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}if(h=i(o),d=i(o)?"cube":o.startsWith("data:application/exr")?"exr":o.startsWith("data:application/hdr")?"hdr":null==(u=o.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),b=h?r.CubeTextureLoader:"hdr"===d?n.RGBELoader:"exr"===d?n.EXRLoader:null,!b)throw new Error("useEnvironment: Unrecognized file extension: "+o);const g=e.useLoader(b,h?[o]:o,(e=>{null==e.setPath||e.setPath(a),c&&c(e)})),f=h?g[0]:g;return f.mapping=h?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in f?f.colorSpace=(null!=l?l:h)?"srgb":"srgb-linear":f.encoding=(null!=l?l:h)?s.sRGBEncoding:s.LinearEncoding,f};

package/core/useEnvironment.d.ts

@@ -1,13 +1,11 @@
 import { Texture, Loader, CubeTexture } from 'three';
 import { PresetsType } from '../helpers/environment-assets';
-declare const LinearEncoding = 3000;
-declare const sRGBEncoding = 3001;
+import { TextureEncoding } from '../helpers/deprecated';
 export type EnvironmentLoaderProps = {
     files?: string | string[];
     path?: string;
     preset?: PresetsType;
     extensions?: (loader: Loader) => void;
-    encoding?: typeof LinearEncoding | typeof sRGBEncoding;
+    encoding?: TextureEncoding;
 };
 export declare function useEnvironment({ files, path, preset, encoding, extensions, }?: Partial<EnvironmentLoaderProps>): Texture | CubeTexture | (CubeTexture & Record<"colorSpace", unknown>);
-export {};

package/core/useEnvironment.js

@@ -2,11 +2,10 @@ import { useLoader } from '@react-three/fiber';
 import { CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
 import { RGBELoader, EXRLoader } from 'three-stdlib';
 import { presetsObj } from '../helpers/environment-assets.js';
+import { sRGBEncoding, LinearEncoding } from '../helpers/deprecated.js';
 
 const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
 const isArray = arr => Array.isArray(arr);
-const LinearEncoding = 3000;
-const sRGBEncoding = 3001;
 function useEnvironment({
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
   path = '',

package/core/useTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,a){const s=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);if(t.useLayoutEffect((()=>{null==a||a(c)}),[a]),t.useEffect((()=>{if("initTexture"in s){(Array.isArray(c)?c:[c]).forEach(s.initTexture)}}),[s,c]),u(o)){const e={};let r=0;for(const t in o)e[t]=c[r++];return e}return c}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function o(o,s){const a=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(o)?Object.values(o):o);t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{if("initTexture"in a){(Array.isArray(c)?c:[c]).forEach(a.initTexture)}}),[a,c]);return t.useMemo((()=>{if(u(o)){const e={};let r=0;for(const t in o)e[t]=c[r++];return e}return c}),[o,c])}o.preload=t=>r.useLoader.preload(e.TextureLoader,t),o.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=o;

package/core/useTexture.js

@@ -1,6 +1,6 @@
 import { TextureLoader } from 'three';
 import { useThree, useLoader } from '@react-three/fiber';
-import { useLayoutEffect, useEffect } from 'react';
+import { useLayoutEffect, useEffect, useMemo } from 'react';
 
 const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
 function useTexture(input, onLoad) {
@@ -19,14 +19,17 @@ function useTexture(input, onLoad) {
       array.forEach(gl.initTexture);
     }
   }, [gl, textures]);
-  if (IsObject(input)) {
-    const keyed = {};
-    let i = 0;
-    for (const key in input) keyed[key] = textures[i++];
-    return keyed;
-  } else {
-    return textures;
-  }
+  const mappedTextures = useMemo(() => {
+    if (IsObject(input)) {
+      const keyed = {};
+      let i = 0;
+      for (const key in input) keyed[key] = textures[i++];
+      return keyed;
+    } else {
+      return textures;
+    }
+  }, [input, textures]);
+  return mappedTextures;
 }
 useTexture.preload = url => useLoader.preload(TextureLoader, url);
 useTexture.clear = input => useLoader.clear(TextureLoader, input);

package/helpers/deprecated.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.setUpdateRange=(e,t)=>{"updateRanges"in e?e.updateRanges[0]=t:e.updateRange=t};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.LinearEncoding=3e3,exports.sRGBEncoding=3001,exports.setUpdateRange=(e,t)=>{"updateRanges"in e?e.updateRanges[0]=t:e.updateRange=t};

package/helpers/deprecated.d.ts

@@ -2,3 +2,6 @@ export declare const setUpdateRange: (attribute: THREE.BufferAttribute, updateRa
     offset: number;
     count: number;
 }) => void;
+export declare const LinearEncoding = 3000;
+export declare const sRGBEncoding = 3001;
+export type TextureEncoding = typeof LinearEncoding | typeof sRGBEncoding;

package/helpers/deprecated.js

@@ -10,5 +10,11 @@ const setUpdateRange = (attribute, updateRange) => {
     attribute.updateRange = updateRange;
   }
 };
+const LinearEncoding = 3000;
+const sRGBEncoding = 3001;
 
-export { setUpdateRange };
+/**
+ * TextureEncoding was deprecated in r152, and removed in r162.
+ */
+
+export { LinearEncoding, sRGBEncoding, setUpdateRange };