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

package/core/CurveModifier.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three-stdlib");function t(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 u=t(e);const n=u.forwardRef((({children:e,curve:t},n)=>{const[c,o]=u.useState(),l=u.useRef(),f=u.useRef();return u.useImperativeHandle(n,(()=>({moveAlongCurve:e=>{var r;null==(r=f.current)||r.moveAlongCurve(e)}}))),u.useEffect((()=>{!f.current&&l.current&&n&&(f.current=new r.Flow(l.current),o(f.current.object3D))}),[e,n]),u.useEffect((()=>{var e;l.current&&t&&(null==(e=f.current)||e.updateCurve(0,t))}),[t]),c?u.createElement("primitive",{object:c}):u.cloneElement(u.Children.only(e),{ref:l})}));exports.CurveModifier=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("@react-three/fiber"),u=require("three-stdlib");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 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 c=n(e),a=n(r);const l=c.forwardRef((({children:e,curve:r},n)=>{const[l]=c.useState((()=>new a.Scene)),[o,i]=c.useState(),f=c.useRef();return c.useEffect((()=>{f.current=new u.Flow(l.children[0]),i(f.current.object3D)}),[e]),c.useEffect((()=>{var e;r&&(null==(e=f.current)||e.updateCurve(0,r))}),[r]),c.useImperativeHandle(n,(()=>({moveAlongCurve:e=>{var r;null==(r=f.current)||r.moveAlongCurve(e)}}))),c.createElement(c.Fragment,null,t.createPortal(e,l),o&&c.createElement("primitive",{object:o}))}));exports.CurveModifier=l;

package/core/CurveModifier.js

@@ -1,38 +1,34 @@
 import * as React from 'react';
+import * as THREE from 'three';
+import { createPortal } from '@react-three/fiber';
 import { Flow } from 'three-stdlib';
 
 const CurveModifier = /*#__PURE__*/React.forwardRef(({
   children,
   curve
 }, ref) => {
-  const [object3D, setObj] = React.useState();
-  const original = React.useRef();
+  const [scene] = React.useState(() => new THREE.Scene());
+  const [obj, set] = React.useState();
   const modifier = React.useRef();
-  React.useImperativeHandle(ref, () => ({
-    moveAlongCurve: val => {
-      var _modifier$current;
-
-      (_modifier$current = modifier.current) == null ? void 0 : _modifier$current.moveAlongCurve(val);
-    }
-  }));
   React.useEffect(() => {
-    if (!modifier.current && original.current && ref) {
-      modifier.current = new Flow(original.current);
-      setObj(modifier.current.object3D);
-    }
-  }, [children, ref]);
+    modifier.current = new Flow(scene.children[0]);
+    set(modifier.current.object3D);
+  }, [children]);
   React.useEffect(() => {
-    if (original.current && curve) {
+    var _modifier$current;
+
+    if (curve) (_modifier$current = modifier.current) == null ? void 0 : _modifier$current.updateCurve(0, curve);
+  }, [curve]);
+  React.useImperativeHandle(ref, () => ({
+    moveAlongCurve: val => {
       var _modifier$current2;
 
-      (_modifier$current2 = modifier.current) == null ? void 0 : _modifier$current2.updateCurve(0, curve);
+      (_modifier$current2 = modifier.current) == null ? void 0 : _modifier$current2.moveAlongCurve(val);
     }
-  }, [curve]);
-  return object3D ? /*#__PURE__*/React.createElement("primitive", {
-    object: object3D
-  }) : /*#__PURE__*/React.cloneElement(React.Children.only(children), {
-    ref: original
-  });
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal(children, scene), obj && /*#__PURE__*/React.createElement("primitive", {
+    object: obj
+  }));
 });
 
 export { CurveModifier };

package/core/Detailed.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LOD, Object3D } from 'three';
-export declare const Detailed: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<LOD, typeof LOD>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const Detailed: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<LOD>, import("@react-three/fiber").NodeProps<LOD, typeof LOD>>>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
     scale?: import("@react-three/fiber").Vector3 | undefined;

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<Omit<Partial<EffectComposer<import("three").WebGLRenderTarget>>, ReactThreeFiber.NonFunctionKeys<ReactThreeFiber.NodeProps<EffectComposer<import("three").WebGLRenderTarget>, typeof EffectComposer>>> & 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("use-asset"),u=require("../helpers/environment-assets.cjs.js");function o(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 a=o(e);exports.Environment=function({background:e=!1,files:o=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:i="",preset:c,scene:d,extensions:p}){if(c){if(!(c in u.presetsObj))throw new Error("Preset must be one of: "+Object.keys(u.presetsObj).join(", "));o=u.presetsObj[c],i="https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2/hdri/"}const b=r.useThree((({scene:e})=>e)),f=r.useThree((({gl:e})=>e)),g=Array.isArray(o),l=g?n.CubeTextureLoader:t.RGBELoader,m=r.useLoader(l,g?[o]:o,(e=>{e.setPath(i),p&&p(e)})),h=g?m[0]:m,j=s.useAsset((()=>new Promise((e=>{const r=new n.PMREMGenerator(f),t=function(e,r,n){return n?(r.compileEquirectangularShader(),r.fromCubemap(e).texture):r.fromEquirectangular(e).texture}(h,r,g);r.dispose(),e(t)}))),h);return a.useLayoutEffect((()=>{const r=d?d.background:b.background,n=d?d.environment:b.environment;return d?(d.environment=j,e&&(d.background=j)):(b.environment=j,e&&(b.background=j)),()=>{d?(d.environment=n,d.background=r):(b.environment=n,b.background=r),s.useAsset.clear(h),j.dispose()}}),[j,e,d]),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,21 +1,93 @@
 import * as React from 'react';
-import { useThree, useLoader } from '@react-three/fiber';
-import { PMREMGenerator, 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 { useAsset } from 'use-asset';
 import { presetsObj } from '../helpers/environment-assets.js';
 
-function getTexture(texture, gen, isCubeMap) {
-  if (isCubeMap) {
-    gen.compileEquirectangularShader();
-    return gen.fromCubemap(texture).texture;
-  }
+const CUBEMAP_ROOT = 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/';
 
-  return gen.fromEquirectangular(texture).texture;
-}
+const isRef = obj => obj.current && obj.current.isScene;
 
-const CUBEMAP_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/aa3600359ba664d546d05821bcbca42013587df2';
-function Environment({
+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 = '',
@@ -24,63 +96,35 @@ 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 + '/hdri/';
+    path = CUBEMAP_ROOT;
   }
 
-  const defaultScene = useThree(({
-    scene
-  }) => scene);
-  const gl = useThree(({
-    gl
-  }) => gl);
+  const defaultScene = useThree(state => state.scene);
   const isCubeMap = Array.isArray(files);
   const loader = isCubeMap ? CubeTextureLoader : RGBELoader; // @ts-expect-error
 
   const loaderResult = useLoader(loader, isCubeMap ? [files] : files, loader => {
-    loader.setPath(path);
+    loader.setPath(path); // @ts-expect-error
+
+    loader.setDataType == null ? void 0 : loader.setDataType(FloatType);
     if (extensions) extensions(loader);
   });
-  const map = isCubeMap ? loaderResult[0] : loaderResult; // PMREMGenerator takes its sweet time to generate the env-map,
-  // Let's make this part of suspense, or else it just yields a frame-skip
-
-  const texture = useAsset(() => new Promise(res => {
-    const gen = new PMREMGenerator(gl);
-    const texture = getTexture(map, gen, isCubeMap);
-    gen.dispose();
-    res(texture);
-  }), map);
+  const texture = isCubeMap ? loaderResult[0] : loaderResult;
+  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
-
-
-      useAsset.clear(map);
-      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.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { Object3DNode } from '@react-three/fiber';
 import { FirstPersonControls as FirstPersonControlImpl } from 'three-stdlib';
 export declare type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl>;
-export declare const FirstPersonControls: React.ForwardRefExoticComponent<Pick<FirstPersonControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "lookAt" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "enabled" | "update" | "domElement" | "movementSpeed" | "autoForward" | "handleResize" | "lookSpeed" | "lookVertical" | "activeLook" | "heightSpeed" | "heightCoef" | "heightMin" | "heightMax" | "constrainVertical" | "verticalMin" | "verticalMax" | "mouseDragOn"> & React.RefAttributes<FirstPersonControlImpl>>;
+export declare const FirstPersonControls: React.ForwardRefExoticComponent<Pick<FirstPersonControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "lookAt" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "enabled" | "update" | "connect" | "domElement" | "movementSpeed" | "autoForward" | "handleResize" | "lookSpeed" | "lookVertical" | "activeLook" | "heightSpeed" | "heightCoef" | "heightMin" | "heightMax" | "constrainVertical" | "verticalMin" | "verticalMax" | "mouseDragOn"> & React.RefAttributes<FirstPersonControlImpl>>;

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;

package/core/Float.d.ts

@@ -5,4 +5,4 @@ export declare type FloatProps = JSX.IntrinsicElements['group'] & {
     floatIntensity?: number;
     children?: React.ReactNode;
 };
-export declare function Float({ children, speed, rotationIntensity, floatIntensity, ...props }: FloatProps): JSX.Element;
+export declare const Float: React.ForwardRefExoticComponent<Pick<FloatProps, "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 | "speed" | "rotationIntensity" | "floatIntensity"> & React.RefAttributes<import("three").Group>>;

package/core/Float.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
 
-function Float({
+const Float = /*#__PURE__*/React.forwardRef(({
   children,
   speed = 1,
   rotationIntensity = 1,
   floatIntensity = 1,
   ...props
-}) {
+}, forwardRef) => {
   const ref = React.useRef(null);
   const offset = React.useRef(Math.random() * 10000);
   useFrame(state => {
@@ -18,8 +19,8 @@ function Float({
     ref.current.position.y = Math.sin(t / 4 * speed) / 10 * floatIntensity;
   });
   return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
-    ref: ref
+    ref: mergeRefs([ref, forwardRef])
   }, children));
-}
+});
 
 export { Float };

package/core/GizmoHelper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),u=require("./useCamera.cjs.js");function a(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)}require("@babel/runtime/helpers/extends"),require("react-merge-refs");var o=a(e);const c=o.createContext({}),i=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:a=[80,80],renderPriority:m=0,onUpdate:g,onTarget:b,children:y})=>{const v=r.useThree((({size:e})=>e)),w=r.useThree((({camera:e})=>e)),j=r.useThree((({controls:e})=>e)),q=r.useThree((({gl:e})=>e)),x=r.useThree((({scene:e})=>e)),O=r.useThree((({invalidate:e})=>e)),T=o.useRef(),C=o.useRef(),k=o.useRef(null),[P]=o.useState((()=>new t.Scene)),R=o.useRef(!1),z=o.useRef(0),E=o.useRef(new t.Vector3(0,0,0));o.useEffect((()=>(x.background&&(T.current=x.background,x.background=null,P.background=T.current),()=>{T.current&&(x.background=T.current)})),[]);r.useFrame(((e,r)=>{var t;k.current&&C.current&&((e=>{if(!R.current)return;if(p.angleTo(d)<.01)return void(R.current=!1);const r=e*i;p.rotateTowards(d,r),w.position.set(0,0,1).applyQuaternion(p).multiplyScalar(z.current).add(E.current),w.up.set(0,1,0).applyQuaternion(p).normalize(),w.quaternion.copy(p),g?g():j&&j.update(),O()})(r),l.copy(w.matrix).invert(),null==(t=C.current)||t.quaternion.setFromRotationMatrix(l),q.autoClear=!1,q.clearDepth(),q.render(P,k.current))}),m);const M={tweenCamera:e=>{R.current=!0,(j||b)&&(E.current=(null==j?void 0:j.target)||(null==b?void 0:b())),z.current=w.position.distanceTo(f),p.copy(w.quaternion),h.copy(e).multiplyScalar(z.current).add(f),s.lookAt(h),d.copy(s.quaternion),O()},raycast:u.useCamera(k)},[D,Q]=a,S=e.endsWith("-left")?-v.width/2+D:v.width/2-D,_=e.startsWith("top-")?v.height/2-Q:-v.height/2+Q;return r.createPortal(o.createElement(c.Provider,{value:M},o.createElement(n.OrthographicCamera,{ref:k,makeDefault:!1,position:[0,0,200]}),o.createElement("group",{ref:C,position:[S,_,0]},y)),P)},exports.useGizmoContext=()=>o.useContext(c);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),a=require("./useCamera.cjs.js");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)}require("@babel/runtime/helpers/extends"),require("react-merge-refs");var o=u(e);const c=o.createContext({}),i=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:u=[80,80],renderPriority:m=0,autoClear:g=!0,onUpdate:b,onTarget:y,children:w})=>{const v=r.useThree((({size:e})=>e)),j=r.useThree((({camera:e})=>e)),q=r.useThree((({controls:e})=>e)),C=r.useThree((({gl:e})=>e)),x=r.useThree((({scene:e})=>e)),O=r.useThree((({invalidate:e})=>e)),T=o.useRef(),k=o.useRef(),P=o.useRef(null),[R]=o.useState((()=>new t.Scene)),M=o.useRef(!1),z=o.useRef(0),E=o.useRef(new t.Vector3(0,0,0)),Q=o.useCallback((e=>{M.current=!0,(q||y)&&(E.current=(null==q?void 0:q.target)||(null==y?void 0:y())),z.current=j.position.distanceTo(f),p.copy(j.quaternion),h.copy(e).multiplyScalar(z.current).add(f),s.lookAt(h),d.copy(s.quaternion),O()}),[q,j,y,O]);o.useEffect((()=>(x.background&&(T.current=x.background,x.background=null,R.background=T.current),()=>{T.current&&(x.background=T.current)})),[]),r.useFrame(((e,r)=>{if(P.current&&k.current){var t;if(M.current)if(p.angleTo(d)<.01)M.current=!1;else{const e=r*i;p.rotateTowards(d,e),j.position.set(0,0,1).applyQuaternion(p).multiplyScalar(z.current).add(E.current),j.up.set(0,1,0).applyQuaternion(p).normalize(),j.quaternion.copy(p),b?b():q&&q.update(),O()}l.copy(j.matrix).invert(),null==(t=k.current)||t.quaternion.setFromRotationMatrix(l),g&&(C.autoClear=!1),C.clearDepth(),C.render(R,P.current)}}),m);const S=a.useCamera(P),_=o.useMemo((()=>({tweenCamera:Q,raycast:S})),[Q]),[D,V]=u,F=e.endsWith("-left")?-v.width/2+D:v.width/2-D,G=e.startsWith("top-")?v.height/2-V:-v.height/2+V;return r.createPortal(o.createElement(c.Provider,{value:_},o.createElement(n.OrthographicCamera,{ref:P,position:[0,0,200]}),o.createElement("group",{ref:k,position:[F,G,0]},w)),R)},exports.useGizmoContext=()=>o.useContext(c);

package/core/GizmoHelper.d.ts

@@ -8,8 +8,9 @@ export declare type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
     alignment?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
     margin?: [number, number];
     renderPriority?: number;
+    autoClear?: boolean;
     onUpdate?: () => void;
     onTarget?: () => Vector3;
 };
-export declare const GizmoHelper: ({ alignment, margin, renderPriority, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
+export declare const GizmoHelper: ({ alignment, margin, renderPriority, autoClear, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
 export {};

package/core/GizmoHelper.js

@@ -19,6 +19,7 @@ const GizmoHelper = ({
   alignment = 'bottom-right',
   margin = [80, 80],
   renderPriority = 0,
+  autoClear = true,
   onUpdate,
   onTarget,
   children: GizmoHelperComponent
@@ -49,8 +50,7 @@ const GizmoHelper = ({
   const animating = React.useRef(false);
   const radius = React.useRef(0);
   const focusPoint = React.useRef(new Vector3(0, 0, 0));
-
-  const tweenCamera = direction => {
+  const tweenCamera = React.useCallback(direction => {
     animating.current = true;
     if (defaultControls || onTarget) focusPoint.current = (defaultControls == null ? void 0 : defaultControls.target) || (onTarget == null ? void 0 : onTarget());
     radius.current = mainCamera.position.distanceTo(target); // Rotate from current camera orientation
@@ -61,27 +61,7 @@ const GizmoHelper = ({
     dummy.lookAt(targetPosition);
     q2.copy(dummy.quaternion);
     invalidate();
-  };
-
-  const animateStep = delta => {
-    if (!animating.current) return;
-
-    if (q1.angleTo(q2) < 0.01) {
-      animating.current = false;
-      return;
-    }
-
-    const step = delta * turnRate; // animate position by doing a slerp and then scaling the position on the unit sphere
-
-    q1.rotateTowards(q2, step); // animate orientation
-
-    mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius.current).add(focusPoint.current);
-    mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
-    mainCamera.quaternion.copy(q1);
-    if (onUpdate) onUpdate();else if (defaultControls) defaultControls.update();
-    invalidate();
-  };
-
+  }, [defaultControls, mainCamera, onTarget, invalidate]);
   React.useEffect(() => {
     if (scene.background) {
       //Interchange the actual scene background with the virtual scene
@@ -92,33 +72,44 @@ const GizmoHelper = ({
 
     return () => {
       // reset on unmount
-      if (backgroundRef.current) {
-        scene.background = backgroundRef.current;
-      }
+      if (backgroundRef.current) scene.background = backgroundRef.current;
     };
   }, []);
+  useFrame((_, delta) => {
+    if (virtualCam.current && gizmoRef.current) {
+      var _gizmoRef$current;
 
-  const beforeRender = () => {
-    var _gizmoRef$current;
+      // Animate step
+      if (animating.current) {
+        if (q1.angleTo(q2) < 0.01) {
+          animating.current = false;
+        } else {
+          const step = delta * turnRate; // animate position by doing a slerp and then scaling the position on the unit sphere
 
-    // Sync gizmo with main camera orientation
-    matrix.copy(mainCamera.matrix).invert();
-    (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
-  };
+          q1.rotateTowards(q2, step); // animate orientation
 
-  useFrame((_, delta) => {
-    if (virtualCam.current && gizmoRef.current) {
-      animateStep(delta);
-      beforeRender();
-      gl.autoClear = false;
+          mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius.current).add(focusPoint.current);
+          mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
+          mainCamera.quaternion.copy(q1);
+          if (onUpdate) onUpdate();else if (defaultControls) defaultControls.update();
+          invalidate();
+        }
+      } // Sync Gizmo with main camera orientation
+
+
+      matrix.copy(mainCamera.matrix).invert();
+      (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix); // Render virtual camera
+
+      if (autoClear) gl.autoClear = false;
       gl.clearDepth();
       gl.render(virtualScene, virtualCam.current);
     }
   }, renderPriority);
-  const gizmoHelperContext = {
+  const raycast = useCamera(virtualCam);
+  const gizmoHelperContext = React.useMemo(() => ({
     tweenCamera,
-    raycast: useCamera(virtualCam)
-  }; // Position gizmo component within scene
+    raycast
+  }), [tweenCamera]); // Position gizmo component within scene
 
   const [marginX, marginY] = margin;
   const x = alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
@@ -127,7 +118,6 @@ const GizmoHelper = ({
     value: gizmoHelperContext
   }, /*#__PURE__*/React.createElement(OrthographicCamera, {
     ref: virtualCam,
-    makeDefault: false,
     position: [0, 0, 200]
   }), /*#__PURE__*/React.createElement("group", {
     ref: gizmoRef,

package/core/GizmoViewcube.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",m="#999",p="black",u="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:s=m,textColor:h=p,strokeColor:y=u,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:"material",color:e?s:"white",transparent:!0,opacity:d})},C=e=>{const{tweenCamera:t,raycast:r}=o.useGizmoContext(),[a,n]=c.useState(null);return c.createElement("mesh",{raycast:r,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>c.createElement(x,s.default({key:r,index:r,hover:a===r},e)))),c.createElement("boxGeometry",null))},v=({onClick:e,dimensions:t,position:r,hoverColor:a=m})=>{const{tweenCamera:n,raycast:i}=o.useGizmoContext(),[s,l]=c.useState(!1);return c.createElement("mesh",{scale:1.01,position:r,raycast:i,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},c.createElement("meshBasicMaterial",{color:s?a:"white",transparent:!0,opacity:.6,visible:s}),c.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>c.createElement("group",{scale:[60,60,60]},c.createElement(C,e),g.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:d},e)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),a=require("three");function n(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 o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useCamera.cjs.js");var s=n(e),c=i(t);const l="#f0f0f0",m="#999",p="black",u="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new a.Vector3(...e).multiplyScalar(.38),y=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),d=[.25,.25,.25],g=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=g.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:n=f,color:i=l,hoverColor:s=m,textColor:h=p,strokeColor:y=u,opacity:d=1})=>{const g=r.useThree((e=>e.gl)),b=c.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=y,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(n[t].toUpperCase(),64,76),new a.CanvasTexture(e)}),[t,n,o,i,h,y]);return c.createElement("meshLambertMaterial",{map:b,"map-anisotropy":g.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?s:"white",transparent:!0,opacity:d})},C=e=>{const{tweenCamera:t,raycast:r}=o.useGizmoContext(),[a,n]=c.useState(null);return c.createElement("mesh",{raycast:r,onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,r)=>c.createElement(x,s.default({key:r,index:r,hover:a===r},e)))),c.createElement("boxGeometry",null))},v=({onClick:e,dimensions:t,position:r,hoverColor:a=m})=>{const{tweenCamera:n,raycast:i}=o.useGizmoContext(),[s,l]=c.useState(!1);return c.createElement("mesh",{scale:1.01,position:r,raycast:i,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),n(r)})},c.createElement("meshBasicMaterial",{color:s?a:"white",transparent:!0,opacity:.6,visible:s}),c.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>c.createElement("group",{scale:[60,60,60]},c.createElement(C,e),g.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:b[r]},e)))),y.map(((t,r)=>c.createElement(v,s.default({key:r,position:t,dimensions:d},e)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}));