@react-three/drei 9.104.1 → 9.105.1

package/README.md

@@ -4722,7 +4722,11 @@ Sets up a global cubemap, which affects the default `scene.environment`, and opt
 ```jsx
 <Environment
   background={false} // can be true, false or "only" (which only sets the background) (default: false)
-  blur={0} // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
+  backgroundBlurriness={0} // optional blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
+  backgroundIntensity={1} // optional intensity factor (default: 1, only works with three 0.163 and up)
+  backgroundRotation={[0, Math.PI / 2, 0]} // optional rotation (default: 0, only works with three 0.163 and up)
+  environmentIntensity={1} // optional intensity factor (default: 1, only works with three 0.163 and up)
+  environmentRotation={[0, Math.PI / 2, 0]} // optional rotation (default: 0, only works with three 0.163 and up)
   files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
   path="/"
   preset={null}

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

package/core/Environment.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Object3DNode } from '@react-three/fiber';
+import { Object3DNode, Euler } from '@react-three/fiber';
 import { Texture, Scene } from 'three';
 import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
 import { PresetsType } from '../helpers/environment-assets';
@@ -12,6 +12,11 @@ export type EnvironmentProps = {
     resolution?: number;
     background?: boolean | 'only';
     blur?: number;
+    backgroundBlurriness?: number;
+    backgroundIntensity?: number;
+    backgroundRotation?: Euler;
+    environmentIntensity?: number;
+    environmentRotation?: Euler;
     map?: Texture;
     preset?: PresetsType;
     scene?: Scene | React.MutableRefObject<Scene>;
@@ -21,9 +26,9 @@ export type EnvironmentProps = {
         scale?: number;
     };
 } & EnvironmentLoaderProps;
-export declare function EnvironmentMap({ scene, background, blur, map }: EnvironmentProps): null;
-export declare function EnvironmentCube({ background, scene, blur, ...rest }: EnvironmentProps): null;
-export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, scene, files, path, preset, extensions, }: EnvironmentProps): React.JSX.Element;
+export declare function EnvironmentMap({ scene, background, map, ...config }: EnvironmentProps): null;
+export declare function EnvironmentCube({ background, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, ...rest }: EnvironmentProps): null;
+export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, scene, files, path, preset, extensions, }: EnvironmentProps): React.JSX.Element;
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/core/Environment.js

@@ -1,52 +1,86 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useThree, useFrame, createPortal, extend } from '@react-three/fiber';
+import { useThree, useFrame, createPortal, applyProps, extend } from '@react-three/fiber';
 import { Scene, WebGLCubeRenderTarget, HalfFloatType } from 'three';
 import { GroundProjectedEnv } from 'three-stdlib';
 import { useEnvironment } from './useEnvironment.js';
 
 const isRef = obj => obj.current && obj.current.isScene;
 const resolveScene = scene => isRef(scene) ? scene.current : scene;
-function setEnvProps(background, scene, defaultScene, texture, blur = 0) {
+function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
+  var _sceneProps$blur, _target$backgroundRot, _target$backgroundRot2, _target$environmentRo, _target$environmentRo2;
+  // defaults
+  sceneProps = {
+    backgroundBlurriness: (_sceneProps$blur = sceneProps.blur) !== null && _sceneProps$blur !== void 0 ? _sceneProps$blur : 0,
+    backgroundIntensity: 1,
+    backgroundRotation: [0, 0, 0],
+    environmentIntensity: 1,
+    environmentRotation: [0, 0, 0],
+    ...sceneProps
+  };
   const target = resolveScene(scene || defaultScene);
   const oldbg = target.background;
   const oldenv = target.environment;
-  // @ts-ignore
-  const oldBlur = target.backgroundBlurriness || 0;
+  const oldSceneProps = {
+    // @ts-ignore
+    backgroundBlurriness: target.backgroundBlurriness,
+    // @ts-ignore
+    backgroundIntensity: target.backgroundIntensity,
+    // @ts-ignore
+    backgroundRotation: (_target$backgroundRot = (_target$backgroundRot2 = target.backgroundRotation) == null || _target$backgroundRot2.clone == null ? void 0 : _target$backgroundRot2.clone()) !== null && _target$backgroundRot !== void 0 ? _target$backgroundRot : [0, 0, 0],
+    // @ts-ignore
+    environmentIntensity: target.environmentIntensity,
+    // @ts-ignore
+    environmentRotation: (_target$environmentRo = (_target$environmentRo2 = target.environmentRotation) == null || _target$environmentRo2.clone == null ? void 0 : _target$environmentRo2.clone()) !== null && _target$environmentRo !== void 0 ? _target$environmentRo : [0, 0, 0]
+  };
   if (background !== 'only') target.environment = texture;
-  if (background) target.background = texture;
-  // @ts-ignore
-  if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = blur;
+  if (background) {
+    target.background = texture;
+    applyProps(target, sceneProps);
+  }
   return () => {
     if (background !== 'only') target.environment = oldenv;
-    if (background) target.background = oldbg;
-    // @ts-ignore
-    if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = oldBlur;
+    if (background) {
+      target.background = oldbg;
+      applyProps(target, oldSceneProps);
+    }
   };
 }
 function EnvironmentMap({
   scene,
   background = false,
-  blur,
-  map
+  map,
+  ...config
 }) {
   const defaultScene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
-    if (map) return setEnvProps(background, scene, defaultScene, map, blur);
-  }, [defaultScene, scene, map, background, blur]);
+    if (map) return setEnvProps(background, scene, defaultScene, map, config);
+  });
   return null;
 }
 function EnvironmentCube({
   background = false,
   scene,
   blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
   ...rest
 }) {
   const texture = useEnvironment(rest);
   const defaultScene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
-    return setEnvProps(background, scene, defaultScene, texture, blur);
-  }, [texture, background, scene, defaultScene, blur]);
+    return setEnvProps(background, scene, defaultScene, texture, {
+      blur,
+      backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
+  });
   return null;
 }
 function EnvironmentPortal({
@@ -58,6 +92,11 @@ function EnvironmentPortal({
   map,
   background = false,
   blur,
+  backgroundBlurriness,
+  backgroundIntensity,
+  backgroundRotation,
+  environmentIntensity,
+  environmentRotation,
   scene,
   files,
   path,
@@ -75,7 +114,14 @@ function EnvironmentPortal({
   }, [resolution]);
   React.useLayoutEffect(() => {
     if (frames === 1) camera.current.update(gl, virtualScene);
-    return setEnvProps(background, scene, defaultScene, fbo.texture, blur);
+    return setEnvProps(background, scene, defaultScene, fbo.texture, {
+      blur,
+      backgroundBlurriness,
+      backgroundIntensity,
+      backgroundRotation,
+      environmentIntensity,
+      environmentRotation
+    });
   }, [children, virtualScene, fbo.texture, scene, defaultScene, background, frames, gl]);
   let count = 1;
   useFrame(() => {