@react-three/drei 9.0.0-beta.3 → 9.0.0-beta.4

package/core/Clone.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { MeshProps } from '@react-three/fiber';
+export declare const Clone: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").GroupProps, "children"> & {
+    object: THREE.Object3D | THREE.Object3D[];
+    children?: React.ReactNode;
+    deep?: boolean | "materialsOnly" | "geometriesOnly" | undefined;
+    keys?: string[] | undefined;
+    inject?: React.ReactNode | MeshProps | ((object: THREE.Object3D) => React.ReactNode);
+    castShadow?: boolean | undefined;
+    receiveShadow?: boolean | undefined;
+}, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "keys" | "deep" | "inject"> & React.RefAttributes<import("three").Group>>;

package/core/Clone.js

@@ -0,0 +1,92 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import pick from 'lodash.pick';
+
+function createSpread(child, {
+  keys = ['near', 'far', 'color', 'distance', 'decay', 'penumbra', 'angle', 'intensity', 'skeleton', 'visible', 'castShadow', 'receiveShadow', 'morphTargetDictionary', 'morphTargetInfluences', 'name', 'geometry', 'material', 'position', 'rotation', 'scale', 'up', 'userData'],
+  deep,
+  inject,
+  castShadow,
+  receiveShadow
+}) {
+  let spread = pick(child, keys);
+
+  if (deep) {
+    if (spread.geometry && deep !== 'materialsOnly') spread.geometry = spread.geometry.clone();
+    if (spread.material && deep !== 'geometriesOnly') spread.material = spread.material.clone();
+  }
+
+  if (inject) {
+    if (typeof inject === 'function') spread = { ...spread,
+      children: inject(child)
+    };else if ( /*#__PURE__*/React.isValidElement(inject)) spread = { ...spread,
+      children: inject
+    };else spread = { ...spread,
+      ...inject
+    };
+  }
+
+  if (child.type === 'Mesh') {
+    if (castShadow) spread.castShadow = true;
+    if (receiveShadow) spread.receiveShadow = true;
+  }
+
+  return spread;
+}
+
+const Clone = /*#__PURE__*/React.forwardRef(({
+  object,
+  children,
+  deep,
+  castShadow,
+  receiveShadow,
+  inject,
+  keys,
+  ...props
+}, forwardRef) => {
+  const config = {
+    keys,
+    deep,
+    inject,
+    castShadow,
+    receiveShadow
+  }; // Deal with arrayed clones
+
+  if (Array.isArray(object)) {
+    return /*#__PURE__*/React.createElement("group", _extends({}, props, {
+      ref: forwardRef
+    }), object.map(o => /*#__PURE__*/React.createElement(Clone, _extends({
+      key: o.uuid,
+      object: o
+    }, config))), children);
+  } // Singleton clones
+
+
+  const {
+    children: injectChildren,
+    ...spread
+  } = createSpread(object, config);
+  const Element = object.type[0].toLowerCase() + object.type.slice(1);
+  return /*#__PURE__*/React.createElement(Element, _extends({}, spread, props, {
+    ref: forwardRef
+  }), (object == null ? void 0 : object.children).map(child => {
+    let spread = {};
+    let Element = child.type[0].toLowerCase() + child.type.slice(1);
+
+    if (Element === 'group' || Element === 'object3D') {
+      Element = Clone;
+      spread = {
+        object: child,
+        ...config
+      };
+    } else {
+      spread = createSpread(child, config);
+    }
+
+    return /*#__PURE__*/React.createElement(Element, _extends({
+      key: child.uuid
+    }, spread));
+  }), children, injectChildren);
+});
+
+export { Clone };

package/core/Cloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,texture:l="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",...d}){const h=c.useRef(),m=n.useTexture(l),p=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=h.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=p[t].rotation,r.children[0].scale.setScalar(p[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",d,c.createElement("group",{position:[0,0,u/2*o],ref:h},p.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:m,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:o=10,depth:i=1.5,segments:u=20,texture:l="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",color:d="#ffffff",depthTest:f=!0,...h}){const p=c.useRef(),m=n.useTexture(l),b=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:o/2-Math.random()*o,y:o/2-Math.random()*o,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[o,u,s]);return r.useFrame((e=>{var r;return null==(r=p.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=b[t].rotation,r.children[0].scale.setScalar(b[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",h,c.createElement("group",{position:[0,0,u/2*i],ref:p},b.map((({x:r,y:n,scale:s,density:o},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*i]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:m,transparent:!0,opacity:s/6*o*e,depthTest:f,color:d})))))))};

package/core/Cloud.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare function Cloud({ opacity, speed, width, depth, segments, texture, ...props }: {
+export declare function Cloud({ opacity, speed, width, depth, segments, texture, color, depthTest, ...props }: {
     [x: string]: any;
     opacity?: number | undefined;
     speed?: number | undefined;
@@ -7,4 +7,6 @@ export declare function Cloud({ opacity, speed, width, depth, segments, texture,
     depth?: number | undefined;
     segments?: number | undefined;
     texture?: string | undefined;
+    color?: string | undefined;
+    depthTest?: boolean | undefined;
 }): JSX.Element;

package/core/Cloud.js

@@ -12,6 +12,8 @@ function Cloud({
   depth = 1.5,
   segments = 20,
   texture = CLOUD_URL,
+  color = "#ffffff",
+  depthTest = true,
   ...props
 }) {
   const group = React.useRef();
@@ -49,7 +51,8 @@ function Cloud({
     map: cloudTexture,
     transparent: true,
     opacity: scale / 6 * density * opacity,
-    depthTest: false
+    depthTest: depthTest,
+    color: color
   }))))));
 }
 

package/core/ComputedAttribute.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),a=n(t);exports.ComputedAttribute=({compute:e,name:t,...u})=>{const[n]=a.useState((()=>new r.BufferAttribute(new Float32Array(0),1))),f=a.useRef(null);return a.useLayoutEffect((()=>{if(f.current){var t;const r=null!==(t=f.current.parent)&&void 0!==t?t:f.current.__r3f.parent,u=e(r);f.current.copy(u)}}),[e]),a.createElement("primitive",c.default({ref:f,object:n,attach:`attributes-${t}`},u))};

package/core/ComputedAttribute.d.ts

@@ -0,0 +1,9 @@
+import { BufferAttributeProps } from '@react-three/fiber';
+import * as React from 'react';
+import { BufferAttribute, BufferGeometry } from 'three';
+declare type Props = {
+    compute: (geometry: BufferGeometry) => BufferAttribute;
+    name: string;
+};
+export declare const ComputedAttribute: ({ compute, name, ...props }: React.PropsWithChildren<Props & BufferAttributeProps>) => JSX.Element;
+export {};

package/core/ComputedAttribute.js

@@ -0,0 +1,34 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { BufferAttribute } from 'three';
+
+/**
+ * Used exclusively as a child of a BufferGeometry.
+ * Computes the BufferAttribute by calling the `compute` function
+ * and attaches the attribute to the geometry.
+ */
+const ComputedAttribute = ({
+  compute,
+  name,
+  ...props
+}) => {
+  const [bufferAttribute] = React.useState(() => new BufferAttribute(new Float32Array(0), 1));
+  const primitive = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (primitive.current) {
+      var _ref;
+
+      // @ts-expect-error brittle
+      const parent = (_ref = primitive.current.parent) !== null && _ref !== void 0 ? _ref : primitive.current.__r3f.parent;
+      const attr = compute(parent);
+      primitive.current.copy(attr);
+    }
+  }, [compute]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: primitive,
+    object: bufferAttribute,
+    attach: `attributes-${name}`
+  }, props));
+};
+
+export { ComputedAttribute };

package/core/ContactShadows.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"),a=require("@react-three/fiber"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),s=o(r),l=o(t);const c=s.forwardRef((({scale:e,frames:r=1/0,opacity:t=1,width:u=1,height:o=1,blur:c=1,far:d=10,resolution:f=256,smooth:h=!0,...m},p)=>{const g=a.useThree((({scene:e})=>e)),b=a.useThree((({gl:e})=>e)),M=s.useRef(null);u*=Array.isArray(e)?e[0]:e||1,o*=Array.isArray(e)?e[1]:e||1;const[v,y,w,T,x,R,j]=s.useMemo((()=>{const e=new l.WebGLRenderTarget(f,f),r=new l.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new l.PlaneBufferGeometry(u,o).rotateX(Math.PI/2),a=new l.Mesh(t),i=new l.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>e.fragmentShader=e.fragmentShader.replace("1.0 - fragCoordZ ), opacity );","0.0 ), ( 1.0 - fragCoordZ ) * 1.0 );");const s=new l.ShaderMaterial(n.HorizontalBlurShader),c=new l.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=s.depthTest=!1,[e,t,i,a,s,c,r]}),[f,u,o,e]),O=s.useCallback((e=>{T.visible=!0,T.material=x,x.uniforms.tDiffuse.value=v.texture,x.uniforms.h.value=1*e/256,b.setRenderTarget(j),b.render(T,M.current),T.material=R,R.uniforms.tDiffuse.value=j.texture,R.uniforms.v.value=1*e/256,b.setRenderTarget(v),b.render(T,M.current),T.visible=!1}),[]);let P=0;return a.useFrame((()=>{if(M.current&&(r===1/0||P<r)){const e=g.background;g.background=null,g.overrideMaterial=w,b.setRenderTarget(v),b.render(g,M.current),g.overrideMaterial=null,O(c),h&&O(.4*c),b.setRenderTarget(null),g.background=e,P++}})),s.createElement("group",i.default({"rotation-x":Math.PI/2},m,{ref:p}),s.createElement("mesh",{geometry:y,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},s.createElement("meshBasicMaterial",{map:v.texture,transparent:!0,opacity:t})),s.createElement("orthographicCamera",{ref:M,args:[-u/2,u/2,o/2,-o/2,0,d]}))}));exports.ContactShadows=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=o(e),l=u(r),s=u(t);const c=l.forwardRef((({scale:e,frames:r=1/0,opacity:t=1,width:o=1,height:u=1,blur:c=1,far:d=10,resolution:f=256,smooth:h=!0,color:m="#000000",...p},g)=>{const v=a.useThree((({scene:e})=>e)),b=a.useThree((({gl:e})=>e)),M=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,u*=Array.isArray(e)?e[1]:e||1;const[y,w,T,S,x,R,j]=l.useMemo((()=>{const e=new s.WebGLRenderTarget(f,f),r=new s.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new s.PlaneBufferGeometry(o,u).rotateX(Math.PI/2),a=new s.Mesh(t),i=new s.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new s.Color(m).convertSRGBToLinear()}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );")};const l=new s.ShaderMaterial(n.HorizontalBlurShader),c=new s.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=l.depthTest=!1,[e,t,i,a,l,c,r]}),[f,o,u,e]),C=l.useCallback((e=>{S.visible=!0,S.material=x,x.uniforms.tDiffuse.value=y.texture,x.uniforms.h.value=1*e/256,b.setRenderTarget(j),b.render(S,M.current),S.material=R,R.uniforms.tDiffuse.value=j.texture,R.uniforms.v.value=1*e/256,b.setRenderTarget(y),b.render(S,M.current),S.visible=!1}),[]);let O=0;return a.useFrame((()=>{if(M.current&&(r===1/0||O<r)){const e=v.background;v.background=null;const r=v.overrideMaterial;v.overrideMaterial=T,b.setRenderTarget(y),b.render(v,M.current),v.overrideMaterial=r,C(c),h&&C(.4*c),b.setRenderTarget(null),v.background=e,O++}})),l.createElement("group",i.default({"rotation-x":Math.PI/2},p,{ref:g}),l.createElement("mesh",{geometry:w,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{map:y.texture,transparent:!0,opacity:t})),l.createElement("orthographicCamera",{ref:M,args:[-o/2,o/2,u/2,-u/2,0,d]}))}));exports.ContactShadows=c;

package/core/ContactShadows.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as THREE from 'three';
 export declare const ContactShadows: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").GroupProps, "scale"> & {
     opacity?: number | undefined;
     width?: number | undefined;
@@ -9,4 +10,5 @@ export declare const ContactShadows: React.ForwardRefExoticComponent<Pick<Omit<i
     resolution?: number | undefined;
     frames?: number | undefined;
     scale?: number | [x: number, y: number] | undefined;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "smooth" | "blur" | "height" | "opacity" | "width" | "resolution" | "far" | "frames"> & React.RefAttributes<unknown>>;
+    color?: THREE.ColorRepresentation | undefined;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "smooth" | "blur" | "height" | "opacity" | "width" | "resolution" | "far" | "frames"> & React.RefAttributes<unknown>>;

package/core/ContactShadows.js

@@ -14,6 +14,7 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
   far = 10,
   resolution = 256,
   smooth = true,
+  color = '#000000',
   ...props
 }, ref) => {
   const scene = useThree(({
@@ -34,7 +35,18 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     const depthMaterial = new THREE.MeshDepthMaterial();
     depthMaterial.depthTest = depthMaterial.depthWrite = false;
 
-    depthMaterial.onBeforeCompile = shader => shader.fragmentShader = shader.fragmentShader.replace('1.0 - fragCoordZ ), opacity );', '0.0 ), ( 1.0 - fragCoordZ ) * 1.0 );');
+    depthMaterial.onBeforeCompile = shader => {
+      shader.uniforms = { ...shader.uniforms,
+        ucolor: {
+          value: new THREE.Color(color).convertSRGBToLinear()
+        }
+      };
+      shader.fragmentShader = shader.fragmentShader.replace(`void main() {`, //
+      `uniform vec3 ucolor;
+           void main() {
+          `);
+      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', 'vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );');
+    };
 
     const horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader);
     const verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader);
@@ -60,10 +72,11 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     if (shadowCamera.current && (frames === Infinity || count < frames)) {
       const initialBackground = scene.background;
       scene.background = null;
+      const initialOverrideMaterial = scene.overrideMaterial;
       scene.overrideMaterial = depthMaterial;
       gl.setRenderTarget(renderTarget);
       gl.render(scene, shadowCamera.current);
-      scene.overrideMaterial = null;
+      scene.overrideMaterial = initialOverrideMaterial;
       blurShadows(blur);
       if (smooth) blurShadows(blur * 0.4);
       gl.setRenderTarget(null);

package/core/CubeCamera.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function n(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 u=n(r);exports.CubeCamera=function({children:r,fog:n,frames:a=1/0,resolution:i=256,near:c=1,far:o=1e3,...s}){const f=u.useRef(),[l,g]=u.useState(null),b=t.useThree((({scene:e})=>e)),d=t.useThree((({gl:e})=>e)),m=u.useMemo((()=>new e.WebGLCubeRenderTarget(i,{minFilter:e.LinearFilter,magFilter:e.LinearFilter,encoding:d.outputEncoding})),[i]);let p=0;return t.useFrame((()=>{if(l&&f.current&&(a===1/0||p<a)){f.current.traverse((e=>e.visible=!1));const e=b.fog;b.fog=n||e,l.update(d,b),b.fog=e,f.current.traverse((e=>e.visible=!0)),p++}})),u.createElement("group",s,u.createElement("cubeCamera",{ref:g,args:[c,o,m]}),u.createElement("group",{ref:f},r(m.texture)))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(r);exports.CubeCamera=function({children:r,fog:u,frames:a=1/0,resolution:c=256,near:o=1,far:s=1e3,...f}){const i=n.useRef(),[l,b]=n.useState(null),g=t.useThree((({scene:e})=>e)),p=t.useThree((({gl:e})=>e)),d=n.useMemo((()=>{const r=new e.WebGLCubeRenderTarget(c);return r.texture.type=e.HalfFloatType,r}),[c]);let m=0;return t.useFrame((()=>{if(l&&i.current&&(a===1/0||m<a)){i.current.traverse((e=>e.visible=!1));const e=g.fog;g.fog=u||e,l.update(p,g),g.fog=e,i.current.traverse((e=>e.visible=!0)),m++}})),n.createElement("group",f,n.createElement("cubeCamera",{ref:b,args:[o,s,d]}),n.createElement("group",{ref:i},r(d.texture)))};

package/core/CubeCamera.js

@@ -1,4 +1,4 @@
-import { WebGLCubeRenderTarget, LinearFilter } from 'three';
+import { WebGLCubeRenderTarget, HalfFloatType } from 'three';
 import * as React from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 
@@ -19,11 +19,11 @@ function CubeCamera({
   const gl = useThree(({
     gl
   }) => gl);
-  const fbo = React.useMemo(() => new WebGLCubeRenderTarget(resolution, {
-    minFilter: LinearFilter,
-    magFilter: LinearFilter,
-    encoding: gl.outputEncoding
-  }), [resolution]);
+  const fbo = React.useMemo(() => {
+    const fbo = new WebGLCubeRenderTarget(resolution);
+    fbo.texture.type = HalfFloatType;
+    return fbo;
+  }, [resolution]);
   let count = 0;
   useFrame(() => {
     if (camera && ref.current && (frames === Infinity || count < frames)) {

package/core/DeviceOrientationControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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=u(e),a=i(r);const l=a.forwardRef(((e,r)=>{const{camera:u,onChange:i,...l}=e,c=t.useThree((({camera:e})=>e)),s=t.useThree((({invalidate:e})=>e)),d=u||c,[f]=a.useState((()=>new n.DeviceOrientationControls(d)));return a.useEffect((()=>{const e=e=>{s(),i&&i(e)};return null==f||null==f.addEventListener||f.addEventListener("change",e),()=>null==f||null==f.removeEventListener?void 0:f.removeEventListener("change",e)}),[i,f,s]),t.useFrame((()=>null==f?void 0:f.update())),a.useEffect((()=>{const e=f;return null==e||e.connect(),()=>null==e?void 0:e.dispose()}),[f]),f?a.createElement("primitive",o.default({ref:r,dispose:void 0,object:f},l)):null}));exports.DeviceOrientationControls=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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=u(e),a=i(r);const l=a.forwardRef(((e,r)=>{const{camera:u,onChange:i,...l}=e,c=t.useThree((e=>e.camera)),s=t.useThree((e=>e.invalidate)),d=u||c,[f]=a.useState((()=>new n.DeviceOrientationControls(d)));return a.useEffect((()=>{const e=e=>{s(),i&&i(e)};return null==f||null==f.addEventListener||f.addEventListener("change",e),()=>null==f||null==f.removeEventListener?void 0:f.removeEventListener("change",e)}),[i,f,s]),t.useFrame((()=>null==f?void 0:f.update())),a.useEffect((()=>{const e=f;return null==e||e.connect(),()=>null==e?void 0:e.dispose()}),[f]),f?a.createElement("primitive",o.default({ref:r,dispose:void 0,object:f},l)):null}));exports.DeviceOrientationControls=l;

package/core/DeviceOrientationControls.js

@@ -9,12 +9,8 @@ const DeviceOrientationControls = /*#__PURE__*/React.forwardRef((props, ref) =>
     onChange,
     ...rest
   } = props;
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
   const explCamera = camera || defaultCamera;
   const [controls] = React.useState(() => new DeviceOrientationControls$1(explCamera));
   React.useEffect(() => {

package/core/Effects.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"),a=require("@react-three/fiber"),s=require("three-stdlib"),n=require("react-merge-refs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),o=c(r),l=u(n);a.extend({EffectComposer:s.EffectComposer,RenderPass:s.RenderPass,ShaderPass:s.ShaderPass});const d=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}},f=o.forwardRef((({children:e,multisamping:r=8,renderIndex:n=1,disableGamma:u=!1,disableRenderPass:c=!1,...f},h)=>{const m=o.useRef(),b=a.useThree((({scene:e})=>e)),g=a.useThree((({camera:e})=>e)),p=a.useThree((({gl:e})=>e)),P=a.useThree((({size:e})=>e)),[v]=o.useState((()=>{if(d()&&r>0){const e=new t.WebGLMultisampleRenderTarget(P.width,P.height,{format:t.RGBAFormat,encoding:t.sRGBEncoding});return e.samples=8,e}}));return o.useEffect((()=>{var e,r;null==(e=m.current)||e.setSize(P.width,P.height),null==(r=m.current)||r.setPixelRatio(p.getPixelRatio())}),[p,P]),a.useFrame((()=>{var e;return null==(e=m.current)?void 0:e.render()}),n),o.createElement("effectComposer",i.default({ref:l.default([h,m]),args:[p,v]},f),!c&&o.createElement("renderPass",{attach:"passes",args:[b,g]}),!u&&o.createElement("shaderPass",{attach:"passes",args:[s.GammaCorrectionShader]}),e)}));exports.Effects=f,exports.isWebGL2Available=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),s=require("three-stdlib"),n=require("react-merge-refs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),o=c(r),d=u(n);a.extend({EffectComposer:s.EffectComposer,RenderPass:s.RenderPass,ShaderPass:s.ShaderPass});const l=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}},f=o.forwardRef((({children:e,multisamping:r=8,renderIndex:n=1,disableGamma:u=!1,disableRenderPass:c=!1,...f},h)=>{const m=o.useRef(),b=a.useThree((({scene:e})=>e)),g=a.useThree((({camera:e})=>e)),p=a.useThree((({gl:e})=>e)),P=a.useThree((({size:e})=>e)),[v]=o.useState((()=>{if(l()&&r>0){const e=new t.WebGLRenderTarget(P.width,P.height,{format:t.RGBAFormat,encoding:t.sRGBEncoding});return e.samples=8,e}}));return o.useEffect((()=>{var e,r;null==(e=m.current)||e.setSize(P.width,P.height),null==(r=m.current)||r.setPixelRatio(p.getPixelRatio())}),[p,P]),a.useFrame((()=>{var e;return null==(e=m.current)?void 0:e.render()}),n),o.createElement("effectComposer",i.default({ref:d.default([h,m]),args:[p,v]},f),!c&&o.createElement("renderPass",{attach:"passes",args:[b,g]}),!u&&o.createElement("shaderPass",{attach:"passes",args:[s.GammaCorrectionShader]}),e)}));exports.Effects=f,exports.isWebGL2Available=l;

package/core/Effects.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { WebGLRenderTarget } from 'three';
 import { ReactThreeFiber } from '@react-three/fiber';
 import { EffectComposer, RenderPass, ShaderPass } from 'three-stdlib';
 declare global {
@@ -11,9 +12,9 @@ declare global {
     }
 }
 export declare const isWebGL2Available: () => boolean;
-export declare const Effects: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<EffectComposer<import("three").WebGLRenderTarget>>, ReactThreeFiber.NodeProps<EffectComposer<import("three").WebGLRenderTarget>, typeof EffectComposer>>> & {
+export declare const Effects: React.ForwardRefExoticComponent<Pick<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<EffectComposer<WebGLRenderTarget>>, ReactThreeFiber.NodeProps<EffectComposer<WebGLRenderTarget>, typeof EffectComposer>>> & {
     multisamping?: number | undefined;
     renderIndex?: number | undefined;
     disableGamma?: boolean | undefined;
     disableRenderPass?: boolean | undefined;
-}, "attach" | "args" | "children" | "key" | "onUpdate" | keyof EffectComposer<import("three").WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableGamma" | "disableRenderPass"> & React.RefAttributes<unknown>>;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | keyof EffectComposer<WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableGamma" | "disableRenderPass"> & React.RefAttributes<unknown>>;

package/core/Effects.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { WebGLMultisampleRenderTarget, RGBAFormat, sRGBEncoding } from 'three';
+import { WebGLRenderTarget, RGBAFormat, sRGBEncoding } from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import { EffectComposer, RenderPass, ShaderPass, GammaCorrectionShader } from 'three-stdlib';
 import mergeRefs from 'react-merge-refs';
@@ -41,7 +41,7 @@ const Effects = /*#__PURE__*/React.forwardRef(({
   }) => size);
   const [target] = React.useState(() => {
     if (isWebGL2Available() && multisamping > 0) {
-      const t = new WebGLMultisampleRenderTarget(size.width, size.height, {
+      const t = new WebGLRenderTarget(size.width, size.height, {
         format: RGBAFormat,
         encoding: sRGBEncoding
       });

package/core/Environment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),n=require("three"),t=require("three-stdlib"),s=require("../helpers/environment-assets.cjs.js");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)}var o=a(e);exports.Environment=function({background:e=!1,files:a=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:i="",preset:u,scene:c,extensions:p}){if(u){if(!(u in s.presetsObj))throw new Error("Preset must be one of: "+Object.keys(s.presetsObj).join(", "));a=s.presetsObj[u],i="https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/"}const b=r.useThree((({scene:e})=>e)),d=Array.isArray(a),f=d?n.CubeTextureLoader:t.RGBELoader,g=r.useLoader(f,d?[a]:a,(e=>{e.setPath(i),null==e.setDataType||e.setDataType(n.FloatType),p&&p(e)})),l=d?g[0]:g;return l.mapping=n.EquirectangularReflectionMapping,o.useLayoutEffect((()=>{const r=c?c.background:b.background,n=c?c.environment:b.environment;return c?(c.environment=l,e&&(c.background=l)):(b.environment=l,e&&(b.background=l)),()=>{c?(c.environment=n,c.background=r):(b.environment=n,b.background=r),l.dispose()}}),[l,e,c]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@react-three/fiber"),r=require("three"),t=require("three-stdlib"),u=require("../helpers/environment-assets.cjs.js");function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var o=a(e);const s=e=>{return(n=e).current&&n.current.isScene?e.current:e;var n};function c({scene:e,background:r=!1,map:t}){const u=n.useThree((e=>e.scene));return o.useLayoutEffect((()=>{if(t){const n=s(e||u),a=n.background,o=n.environment;return"only"!==r&&(n.environment=t),r&&(n.background=t),()=>{"only"!==r&&(n.environment=o),r&&(n.background=a)}}}),[e,t]),null}function i({children:e,near:t=1,far:u=1e3,resolution:a=256,frames:i=1,background:l=!1,scene:p,files:f,path:m,preset:b,extensions:g}){const d=n.useThree((e=>e.gl)),y=n.useThree((e=>e.scene)),v=o.useRef(null),[h]=o.useState((()=>new r.Scene)),E=o.useMemo((()=>{const e=new r.WebGLCubeRenderTarget(a);return e.texture.type=r.HalfFloatType,e}),[a]);o.useLayoutEffect((()=>{1===i&&v.current.update(d,h);const e=s(p||y),n=e.background,r=e.environment;return"only"!==l&&(e.environment=E.texture),l&&(e.background=E.texture),()=>{"only"!==l&&(e.environment=r),l&&(e.background=n)}}),[e,p]);let k=1;return n.useFrame((()=>{(i===1/0||k<i)&&(v.current.update(d,h),k++)})),o.createElement(o.Fragment,null,n.createPortal(o.createElement(o.Fragment,null,e,o.createElement("cubeCamera",{ref:v,args:[t,u,E]}),(f||b)&&o.createElement(c,{background:!0,files:f,preset:b,path:m,extensions:g,scene:h})),h))}function l({background:e=!1,files:a=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:c="",preset:i,scene:l,extensions:p}){if(i){if(!(i in u.presetsObj))throw new Error("Preset must be one of: "+Object.keys(u.presetsObj).join(", "));a=u.presetsObj[i],c="https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/"}const f=n.useThree((e=>e.scene)),m=Array.isArray(a),b=m?r.CubeTextureLoader:t.RGBELoader,g=n.useLoader(b,m?[a]:a,(e=>{e.setPath(c),null==e.setDataType||e.setDataType(r.FloatType),p&&p(e)})),d=m?g[0]:g;return d.mapping=m?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,o.useLayoutEffect((()=>{const n=s(l||f),r=n.background,t=n.environment;return"only"!==e&&(n.environment=d),e&&(n.background=d),()=>{"only"!==e&&(n.environment=t),e&&(n.background=r)}}),[d,e,l]),null}exports.Environment=function(e){return e.map?o.createElement(c,e):e.children?o.createElement(i,e):o.createElement(l,e)},exports.EnvironmentCube=l,exports.EnvironmentMap=c,exports.EnvironmentPortal=i;

package/core/Environment.d.ts

@@ -1,12 +1,22 @@
+import * as React from 'react';
 import { Scene, Loader } from 'three';
 import { PresetsType } from '../helpers/environment-assets';
 declare type Props = {
-    background?: boolean;
+    children?: React.ReactNode;
+    frames?: number;
+    near?: number;
+    far?: number;
+    resolution?: number;
+    background?: boolean | 'only';
+    map?: THREE.Texture;
     files?: string | string[];
     path?: string;
     preset?: PresetsType;
-    scene?: Scene;
+    scene?: Scene | React.MutableRefObject<THREE.Scene>;
     extensions?: (loader: Loader) => void;
 };
-export declare function Environment({ background, files, path, preset, scene, extensions, }: Props): null;
+export declare function Environment(props: Props): JSX.Element;
+export declare function EnvironmentMap({ scene, background, map }: Props): null;
+export declare function EnvironmentPortal({ children, near, far, resolution, frames, background, scene, files, path, preset, extensions, }: Props): JSX.Element;
+export declare function EnvironmentCube({ background, files, path, preset, scene, extensions, }: Props): null;
 export {};

package/core/Environment.js

@@ -1,11 +1,93 @@
 import * as React from 'react';
-import { useThree, useLoader } from '@react-three/fiber';
-import { FloatType, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
+import { useThree, useFrame, createPortal, useLoader } from '@react-three/fiber';
+import { Scene, WebGLCubeRenderTarget, HalfFloatType, FloatType, CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
 import { RGBELoader } from 'three-stdlib';
 import { presetsObj } from '../helpers/environment-assets.js';
 
 const CUBEMAP_ROOT = 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/';
-function Environment({
+
+const isRef = obj => obj.current && obj.current.isScene;
+
+const resolveScene = scene => isRef(scene) ? scene.current : scene;
+
+function Environment(props) {
+  return props.map ? /*#__PURE__*/React.createElement(EnvironmentMap, props) : props.children ? /*#__PURE__*/React.createElement(EnvironmentPortal, props) : /*#__PURE__*/React.createElement(EnvironmentCube, props);
+}
+function EnvironmentMap({
+  scene,
+  background = false,
+  map
+}) {
+  const defaultScene = useThree(state => state.scene);
+  React.useLayoutEffect(() => {
+    if (map) {
+      const target = resolveScene(scene || defaultScene);
+      const oldbg = target.background;
+      const oldenv = target.environment;
+      if (background !== 'only') target.environment = map;
+      if (background) target.background = map;
+      return () => {
+        if (background !== 'only') target.environment = oldenv;
+        if (background) target.background = oldbg;
+      };
+    }
+  }, [scene, map]);
+  return null;
+}
+function EnvironmentPortal({
+  children,
+  near = 1,
+  far = 1000,
+  resolution = 256,
+  frames = 1,
+  background = false,
+  scene,
+  files,
+  path,
+  preset = undefined,
+  extensions
+}) {
+  const gl = useThree(state => state.gl);
+  const defaultScene = useThree(state => state.scene);
+  const camera = React.useRef(null);
+  const [virtualScene] = React.useState(() => new Scene());
+  const fbo = React.useMemo(() => {
+    const fbo = new WebGLCubeRenderTarget(resolution);
+    fbo.texture.type = HalfFloatType;
+    return fbo;
+  }, [resolution]);
+  React.useLayoutEffect(() => {
+    if (frames === 1) camera.current.update(gl, virtualScene);
+    const target = resolveScene(scene || defaultScene);
+    const oldbg = target.background;
+    const oldenv = target.environment;
+    if (background !== 'only') target.environment = fbo.texture;
+    if (background) target.background = fbo.texture;
+    return () => {
+      if (background !== 'only') target.environment = oldenv;
+      if (background) target.background = oldbg;
+    };
+  }, [children, scene]);
+  let count = 1;
+  useFrame(() => {
+    if (frames === Infinity || count < frames) {
+      camera.current.update(gl, virtualScene);
+      count++;
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement("cubeCamera", {
+    ref: camera,
+    args: [near, far, fbo]
+  }), (files || preset) && /*#__PURE__*/React.createElement(EnvironmentMap, {
+    background: true,
+    files: files,
+    preset: preset,
+    path: path,
+    extensions: extensions,
+    scene: virtualScene
+  })), virtualScene));
+}
+function EnvironmentCube({
   background = false,
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
   path = '',
@@ -14,17 +96,12 @@ function Environment({
   extensions
 }) {
   if (preset) {
-    if (!(preset in presetsObj)) {
-      throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
-    }
-
+    if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
     files = presetsObj[preset];
     path = CUBEMAP_ROOT;
   }
 
-  const defaultScene = useThree(({
-    scene
-  }) => scene);
+  const defaultScene = useThree(state => state.scene);
   const isCubeMap = Array.isArray(files);
   const loader = isCubeMap ? CubeTextureLoader : RGBELoader; // @ts-expect-error
 
@@ -35,33 +112,19 @@ function Environment({
     if (extensions) extensions(loader);
   });
   const texture = isCubeMap ? loaderResult[0] : loaderResult;
-  texture.mapping = EquirectangularReflectionMapping;
+  texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
   React.useLayoutEffect(() => {
-    const oldbg = scene ? scene.background : defaultScene.background;
-    const oldenv = scene ? scene.environment : defaultScene.environment;
-
-    if (scene) {
-      scene.environment = texture;
-      if (background) scene.background = texture;
-    } else {
-      defaultScene.environment = texture;
-      if (background) defaultScene.background = texture;
-    }
-
+    const target = resolveScene(scene || defaultScene);
+    const oldbg = target.background;
+    const oldenv = target.environment;
+    if (background !== 'only') target.environment = texture;
+    if (background) target.background = texture;
     return () => {
-      if (scene) {
-        scene.environment = oldenv;
-        scene.background = oldbg;
-      } else {
-        defaultScene.environment = oldenv;
-        defaultScene.background = oldbg;
-      } // Environment textures are volatile, better dispose and uncache them
-
-
-      texture.dispose();
+      if (background !== 'only') target.environment = oldenv;
+      if (background) target.background = oldbg;
     };
   }, [texture, background, scene]);
   return null;
 }
 
-export { Environment };
+export { Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal };

package/core/FirstPersonControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=u(e),i=o(r);const s=i.forwardRef(((e,r)=>{const u=t.useThree((({camera:e})=>e)),o=t.useThree((({gl:e})=>e)),[s]=i.useState((()=>new n.FirstPersonControls(u,o.domElement)));return t.useFrame(((e,r)=>{s.update(r)})),s?i.createElement("primitive",a.default({ref:r,object:s},e)):null}));exports.FirstPersonControls=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=u(e),i=o(r);const s=i.forwardRef(((e,r)=>{const u=t.useThree((e=>e.camera)),o=t.useThree((e=>e.gl)),[s]=i.useState((()=>new n.FirstPersonControls(u,o.domElement)));return t.useFrame(((e,r)=>{s.update(r)})),s?i.createElement("primitive",a.default({ref:r,object:s},e)):null}));exports.FirstPersonControls=s;

package/core/FirstPersonControls.js

@@ -4,12 +4,8 @@ import { useThree, useFrame } from '@react-three/fiber';
 import { FirstPersonControls as FirstPersonControls$1 } from 'three-stdlib';
 
 const FirstPersonControls = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const camera = useThree(({
-    camera
-  }) => camera);
-  const gl = useThree(({
-    gl
-  }) => gl);
+  const camera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
   const [controls] = React.useState(() => new FirstPersonControls$1(camera, gl.domElement));
   useFrame((_, delta) => {
     controls.update(delta);

package/core/Float.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber");function r(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 n=r(e);exports.Float=function({children:e,speed:r=1,rotationIntensity:o=1,floatIntensity:c=1,...u}){const a=n.useRef(null),i=n.useRef(1e4*Math.random());return t.useFrame((e=>{const t=i.current+e.clock.getElapsedTime();a.current.rotation.x=Math.cos(t/4*r)/8*o,a.current.rotation.y=Math.sin(t/4*r)/8*o,a.current.rotation.z=Math.sin(t/4*r)/20*o,a.current.position.y=Math.sin(t/4*r)/10*c})),n.createElement("group",u,n.createElement("group",{ref:a},e))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("react-merge-refs");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=o(e),a=n(r);const c=u.forwardRef((({children:e,speed:r=1,rotationIntensity:n=1,floatIntensity:o=1,...c},i)=>{const f=u.useRef(null),s=u.useRef(1e4*Math.random());return t.useFrame((e=>{const t=s.current+e.clock.getElapsedTime();f.current.rotation.x=Math.cos(t/4*r)/8*n,f.current.rotation.y=Math.sin(t/4*r)/8*n,f.current.rotation.z=Math.sin(t/4*r)/20*n,f.current.position.y=Math.sin(t/4*r)/10*o})),u.createElement("group",c,u.createElement("group",{ref:a.default([f,i])},e))}));exports.Float=c;