@react-three/drei 9.74.9 → 9.74.11

package/README.md

@@ -3994,7 +3994,10 @@ If you provide a single string it will use THREE.RGBELoader.
 You can also use [@pmndrs/assets](https://github.com/pmndrs/assets) to easily self host common assets. Always use dynamic imports to avoid making this part of your main bundle.
 
 ```jsx
-<Environment files={import('@pmndrs/assets/hdri/city.exr')} />
+import { suspend } from 'suspend-react'
+const city = import('@pmndrs/assets/hdri/city.exr').then((module) => module.default)
+
+<Environment files={suspend(city)} />
 ```
 
 If you already have a cube texture you can pass it directly:

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("suspend-react"),require("../helpers/environment-assets.cjs.js");var a=c(e),l=s(r);function i(e,r,n,t,u=0){const o=(e=>{return(r=e).current&&r.current.isScene?e.current:e;var r})(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 d({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return i(r,e,o,u,t)}),[o,e,u,r,t]),null}function m({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),s=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>i(e,r,s,c,t)),[c,e,r,s,t]),null}function f({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:s,background:a=!1,blur:f,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),i(a,b,j,y.texture,f))),[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]}),g||v?l.createElement(m,{background:!0,files:g,preset:v,path:p,extensions:E}):s?l.createElement(d,{background:!0,map:s,extensions:E}):null),x))}function b(e){var r,t,c,s;const i=o.useEnvironment(e),m=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[m]),[m]),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(d,a.default({},e,{map:m})),l.createElement("groundProjectedEnvImpl",{args:f,scale:p,height:b,radius:g}))}exports.Environment=function(e){return e.ground?l.createElement(b,e):e.map?l.createElement(d,e):e.children?l.createElement(f,e):l.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=f;
+"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 a(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 s=c(e),l=a(r);function i(e,r,n,t,u=0){const o=(e=>{return(r=e).current&&r.current.isScene?e.current:e;var r})(r||n),c=o.background,a=o.environment,s=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=a),e&&(o.background=c),e&&void 0!==o.backgroundBlurriness&&(o.backgroundBlurriness=s)}}function d({scene:e,background:r=!1,blur:t,map:u}){const o=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(u)return i(r,e,o,u,t)}),[o,e,u,r,t]),null}function m({background:e=!1,scene:r,blur:t,...u}){const c=o.useEnvironment(u),a=n.useThree((e=>e.scene));return l.useLayoutEffect((()=>i(e,r,a,c,t)),[c,e,r,a,t]),null}function f({children:e,near:r=1,far:u=1e3,resolution:o=256,frames:c=1,map:a,background:s=!1,blur:f,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),i(s,b,j,y.texture,f))),[e,x,y.texture,b,j,s,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(m,{background:!0,files:g,preset:v,path:p,extensions:E}):a?l.createElement(d,{background:!0,map:a,extensions:E}):null),x))}function b(e){var r,t,c,a;const i=o.useEnvironment(e),m=e.map||i;l.useMemo((()=>n.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})),[]);const f=l.useMemo((()=>[m]),[m]),b=null==(r=e.ground)?void 0:r.height,g=null==(t=e.ground)?void 0:t.radius,p=null!==(c=null==(a=e.ground)?void 0:a.scale)&&void 0!==c?c:1e3;return l.createElement(l.Fragment,null,l.createElement(d,s.default({},e,{map:m})),l.createElement("groundProjectedEnvImpl",{args:f,scale:p,height:b,radius:g}))}exports.Environment=function(e){return e.ground?l.createElement(b,e):e.map?l.createElement(d,e):e.children?l.createElement(f,e):l.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=f;

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"),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("suspend-react"),require("../helpers/environment-assets.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.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",...v}){var j,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!==(j=null==f?void 0:f.bias)&&void 0!==j?j:-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},v),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))};
+"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("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.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",...v}){var j,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!==(j=null==f?void 0:f.bias)&&void 0!==j?j:-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},v),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("suspend-react"),s=require("../helpers/environment-assets.cjs.js");const o=e=>Array.isArray(e);exports.useEnvironment=function({files:i=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:p="",preset:a,encoding:u,extensions:l}={}){let c,d=null,b=!1;if(a){if(!(a in s.presetsObj))throw new Error("Preset must be one of: "+Object.keys(s.presetsObj).join(", "));i=s.presetsObj[a],p="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}var f,g;if("object"==typeof(g=i)&&"function"==typeof g.then?(i=t.suspend((async e=>(await e).default),[i]),d=n.EXRLoader):(b=o(i),c=!o(i)&&(null==(f=i.split(".").pop())?void 0:f.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(p),l&&l(e)})),j=b?h[0]:h;return j.mapping=b?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in j?j.colorSpace=(null!=u?u:b)?"srgb":"srgb-linear":j.encoding=(null!=u?u:b)?3001:3e3,j};
+"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 c;let u,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),u=s(i)?"cube":i.startsWith("data:application/exr")?"exr":i.startsWith("data:application/hdr")?"hdr":null==(c=i.split(".").pop())?void 0:c.toLowerCase(),d=b?r.CubeTextureLoader:"hdr"===u?n.RGBELoader:"exr"===u?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};

package/core/useEnvironment.d.ts

@@ -1,9 +1,7 @@
 import { Texture, Loader, CubeTexture, TextureEncoding } from 'three';
 import { PresetsType } from '../helpers/environment-assets';
 export declare type EnvironmentLoaderProps = {
-    files?: string | string[] | Promise<{
-        ['default']: string;
-    }>;
+    files?: string | string[];
     path?: string;
     preset?: PresetsType;
     extensions?: (loader: Loader) => void;

package/core/useEnvironment.js

@@ -1,13 +1,10 @@
 import { useLoader } from '@react-three/fiber';
 import { CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
-import { EXRLoader, RGBELoader } from 'three-stdlib';
-import { suspend } from 'suspend-react';
+import { RGBELoader, EXRLoader } from 'three-stdlib';
 import { presetsObj } from '../helpers/environment-assets.js';
 
 const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
 
-const isPromise = promise => typeof promise === 'object' && typeof promise.then === 'function';
-
 const isArray = arr => Array.isArray(arr);
 
 function useEnvironment({
@@ -17,6 +14,8 @@ function useEnvironment({
   encoding = undefined,
   extensions
 } = {}) {
+  var _files$split$pop;
+
   let loader = null;
   let isCubeMap = false;
   let extension;
@@ -25,24 +24,12 @@ function useEnvironment({
     if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
     files = presetsObj[preset];
     path = CUBEMAP_ROOT;
-  }
-
-  if (isPromise(files)) {
-    // Using promises that return inline-EXR URLs by default
-    files = suspend(async promise => {
-      const result = await promise;
-      return result.default;
-    }, [files]);
-    loader = EXRLoader;
-  } else {
-    var _files$split$pop;
-
-    // Everything else
-    isCubeMap = isArray(files);
-    extension = !isArray(files) && ((_files$split$pop = files.split('.').pop()) == null ? void 0 : _files$split$pop.toLowerCase());
-    loader = isCubeMap ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : null;
-  }
+  } // Everything else
+
 
+  isCubeMap = isArray(files);
+  extension = isArray(files) ? 'cube' : files.startsWith('data:application/exr') ? 'exr' : files.startsWith('data:application/hdr') ? 'hdr' : (_files$split$pop = files.split('.').pop()) == null ? void 0 : _files$split$pop.toLowerCase();
+  loader = isCubeMap ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : null;
   if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files);
   const loaderResult = useLoader( // @ts-expect-error
   loader, isCubeMap ? [files] : files, loader => {