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

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 s=u(e),c=o(r);const a=c.forwardRef((({domElement:e,...r},u)=>{const o=t.useThree((e=>e.camera)),a=t.useThree((e=>e.gl)),i=t.useThree((e=>e.events)),l=e||i.connected||a.domElement,[f]=c.useState((()=>new n.FirstPersonControls(o,l)));return t.useFrame(((e,r)=>{f.update(r)})),f?c.createElement("primitive",s.default({ref:u,object:f},r)):null}));exports.FirstPersonControls=a;

package/core/FirstPersonControls.d.ts

@@ -1,5 +1,7 @@
 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" | "connect" | "domElement" | "movementSpeed" | "autoForward" | "handleResize" | "lookSpeed" | "lookVertical" | "activeLook" | "heightSpeed" | "heightCoef" | "heightMin" | "heightMax" | "constrainVertical" | "verticalMin" | "verticalMax" | "mouseDragOn"> & React.RefAttributes<FirstPersonControlImpl>>;
+export declare type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl> & {
+    domElement?: HTMLElement;
+};
+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" | "connect" | "update" | "domElement" | "movementSpeed" | "autoForward" | "handleResize" | "lookSpeed" | "lookVertical" | "activeLook" | "heightSpeed" | "heightCoef" | "heightMin" | "heightMax" | "constrainVertical" | "verticalMin" | "verticalMax" | "mouseDragOn"> & React.RefAttributes<FirstPersonControlImpl>>;

package/core/FirstPersonControls.js

@@ -3,14 +3,15 @@ import * as React from 'react';
 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 [controls] = React.useState(() => new FirstPersonControls$1(camera, gl.domElement));
+const FirstPersonControls = /*#__PURE__*/React.forwardRef(({
+  domElement,
+  ...props
+}, ref) => {
+  const camera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const [controls] = React.useState(() => new FirstPersonControls$1(camera, explDomElement));
   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/FlyControls.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 l(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),i=l(r);const a=i.forwardRef(((e,r)=>{const{onChange:u,...l}=e,a=t.useThree((({invalidate:e})=>e)),s=t.useThree((({camera:e})=>e)),c=t.useThree((({gl:e})=>e)),[d]=i.useState((()=>new n.FlyControls(s,c.domElement)));return i.useEffect((()=>{const e=e=>{a(),u&&u(e)};return null==d||null==d.addEventListener||d.addEventListener("change",e),()=>null==d||null==d.removeEventListener?void 0:d.removeEventListener("change",e)}),[u,d,a]),t.useFrame(((e,t)=>null==d?void 0:d.update(t))),d?i.createElement("primitive",o.default({ref:r,dispose:void 0,object:d},l)):null}));exports.FlyControls=a;
+"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 l(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),i=l(r);const a=i.forwardRef((({domElement:e,...r},u)=>{const{onChange:l,...a}=r,s=t.useThree((e=>e.invalidate)),c=t.useThree((e=>e.camera)),d=t.useThree((e=>e.gl)),f=t.useThree((e=>e.events)),v=e||f.connected||d.domElement,[b]=i.useState((()=>new n.FlyControls(c,v)));return i.useEffect((()=>{const e=e=>{s(),l&&l(e)};return null==b||null==b.addEventListener||b.addEventListener("change",e),()=>null==b||null==b.removeEventListener?void 0:b.removeEventListener("change",e)}),[l,b,s]),t.useFrame(((e,t)=>null==b?void 0:b.update(t))),b?i.createElement("primitive",o.default({ref:u,dispose:void 0,object:b},a)):null}));exports.FlyControls=a;

package/core/FlyControls.d.ts

@@ -4,5 +4,6 @@ import * as THREE from 'three';
 import { FlyControls as FlyControlsImpl } from 'three-stdlib';
 export declare type FlyControlsProps = ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl> & {
     onChange?: (e?: THREE.Event) => void;
+    domElement?: HTMLElement;
 };
 export declare const FlyControls: React.ForwardRefExoticComponent<Pick<FlyControlsProps, "object" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "update" | "domElement" | "movementSpeed" | "rollSpeed" | "dragToLook" | "autoForward"> & React.RefAttributes<FlyControlsImpl>>;

package/core/FlyControls.js

@@ -3,21 +3,20 @@ import { useThree, useFrame } from '@react-three/fiber';
 import * as React from 'react';
 import { FlyControls as FlyControls$1 } from 'three-stdlib';
 
-const FlyControls = /*#__PURE__*/React.forwardRef((props, ref) => {
+const FlyControls = /*#__PURE__*/React.forwardRef(({
+  domElement,
+  ...props
+}, ref) => {
   const {
     onChange,
     ...rest
   } = props;
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
-  const camera = useThree(({
-    camera
-  }) => camera);
-  const gl = useThree(({
-    gl
-  }) => gl);
-  const [controls] = React.useState(() => new FlyControls$1(camera, gl.domElement));
+  const invalidate = useThree(state => state.invalidate);
+  const camera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const [controls] = React.useState(() => new FlyControls$1(camera, explDomElement));
   React.useEffect(() => {
     const callback = e => {
       invalidate();

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/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("three"),t=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 s=c(e),l=i(r),u=i(n);const v=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:n=1,scale:a=1,zoom:c=1,grayscale:i=0,url:u,...m},f)=>{t.extend({ImageMaterial:v});const g=o.useTexture(u),y=Array.isArray(a)?[a[0],a[1]]:[a,a],d=[g.image.width,g.image.height];return l.createElement("mesh",s.default({ref:f,scale:a},m),l.createElement("planeGeometry",{args:[1,1,n,n]}),l.createElement("imageMaterial",{color:r,map:g,zoom:c,grayscale:i,scale:y,imageBounds:d}),e)}));exports.Image=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),n=require("three"),t=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 s=c(e),l=i(r),u=i(n);const v=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:n=1,scale:a=1,zoom:c=1,grayscale:i=0,url:u,toneMapped:m,...f},g)=>{t.extend({ImageMaterial:v});const d=o.useTexture(u),y=Array.isArray(a)?[a[0],a[1]]:[a,a],p=[d.image.width,d.image.height];return l.createElement("mesh",s.default({ref:g,scale:a},f),l.createElement("planeGeometry",{args:[1,1,n,n]}),l.createElement("imageMaterial",{color:r,map:d,zoom:c,grayscale:i,scale:y,imageBounds:p,toneMapped:m}),e)}));exports.Image=m;

package/core/Image.d.ts

@@ -3,10 +3,11 @@ import * as THREE from 'three';
 import { Color } from '@react-three/fiber';
 export declare type ImageProps = JSX.IntrinsicElements['mesh'] & {
     segments?: number;
-    scale?: number;
+    scale?: number | [number, number];
     color?: Color;
     zoom?: number;
     grayscale?: number;
+    toneMapped?: boolean;
     url: string;
 };
 declare type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
@@ -44,10 +45,11 @@ export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@r
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     segments?: number | undefined;
-    scale?: number | undefined;
+    scale?: number | [number, number] | undefined;
     color?: Color | undefined;
     zoom?: number | undefined;
     grayscale?: number | undefined;
+    toneMapped?: boolean | undefined;
     url: string;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "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 | "zoom" | "material" | "url" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "segments" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "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 | "zoom" | "material" | "url" | "toneMapped" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "segments" | "grayscale"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

package/core/Image.js

@@ -48,6 +48,9 @@ const ImageMaterialImpl = shaderMaterial({
     vec2 uv = vUv * s / new + offset;
     vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
     gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, 1.0), grayscale);
+    
+    #include <tonemapping_fragment>
+    #include <encodings_fragment>
   }
 `);
 const Image = /*#__PURE__*/React.forwardRef(({
@@ -58,6 +61,7 @@ const Image = /*#__PURE__*/React.forwardRef(({
   zoom = 1,
   grayscale = 0,
   url,
+  toneMapped,
   ...props
 }, ref) => {
   extend({
@@ -77,7 +81,8 @@ const Image = /*#__PURE__*/React.forwardRef(({
     zoom: zoom,
     grayscale: grayscale,
     scale: planeBounds,
-    imageBounds: imageBounds
+    imageBounds: imageBounds,
+    toneMapped: toneMapped
   }), children);
 });
 

package/core/Instances.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer"),u=require("../helpers/Position.cjs.js");function o(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 s=o(e),l=i(t),f=i(r),d=o(a),m=o(c);let y,p;const x=f.createContext(null),g=new l.Matrix4,b=new l.Matrix4,h=new l.Matrix4,M=new l.Color,w=new l.Vector3,A=new l.Quaternion,E=new l.Vector3,j=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o,getParent:i}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",s.default({instance:i(),instanceKey:c,ref:d.default([a,c])},r),t)})),v=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:i}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(j,s.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[v,O]=f.useState([]),[[P,q]]=f.useState((()=>{const e=new Float32Array(16*r);for(y=0;y<r;y++)h.identity().toArray(e,16*y);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useLayoutEffect((()=>{m.current.count=m.current.instanceMatrix.updateRange.count=m.current.instanceColor.updateRange.count=Math.min(r,void 0!==t?t:r,v.length)}),[v,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let C=0;n.useFrame((()=>{if(a===1/0||C<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),g.copy(m.current.matrixWorld).invert(),y=0;y<v.length;y++)p=v[y].current,p.matrixWorld.decompose(w,A,E),b.compose(w,A,E).premultiply(g),b.equals(h.fromArray(P,16*y))||(b.toArray(P,16*y),m.current.instanceMatrix.needsUpdate=!0),p.color.equals(M.fromArray(q,3*y))||(p.color.toArray(q,3*y),m.current.instanceColor.needsUpdate=!0);C++}}));const R=f.useMemo((()=>({getParent:()=>m,subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",s.default({userData:{instances:v},matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0],raycast:()=>null},c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:P.length/16,array:P,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:q.length/3,array:q,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:R},e(i)):f.createElement(x.Provider,{value:R},e))}));exports.Instance=j,exports.Instances=v,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement(m.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(v,s.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer"),u=require("../helpers/Position.cjs.js");function o(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 s=o(e),l=i(t),f=i(r),d=o(a),m=o(c);let p,y;const x=f.createContext(null),g=new l.Matrix4,b=new l.Matrix4,h=new l.Matrix4;new l.Color;const M=new l.Vector3,w=new l.Quaternion,E=new l.Vector3,j=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o,getParent:i}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",s.default({instance:i(),instanceKey:c,ref:d.default([a,c])},r),t)})),v=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:i}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(j,s.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[v,A]=f.useState([]),[[O,P]]=f.useState((()=>{const e=new Float32Array(16*r);for(p=0;p<r;p++)h.identity().toArray(e,16*p);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useLayoutEffect((()=>{m.current.count=m.current.instanceMatrix.updateRange.count=m.current.instanceColor.updateRange.count=Math.min(r,void 0!==t?t:r,v.length)}),[v,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let q=0;n.useFrame((()=>{if(a===1/0||q<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),g.copy(m.current.matrixWorld).invert(),p=0;p<v.length;p++)y=v[p].current,y.matrixWorld.decompose(M,w,E),b.compose(M,w,E).premultiply(g),b.toArray(O,16*p),m.current.instanceMatrix.needsUpdate=!0,y.color.toArray(P,3*p),m.current.instanceColor.needsUpdate=!0;q++}}));const C=f.useMemo((()=>({getParent:()=>m,subscribe:e=>(A((t=>[...t,e])),()=>A((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",s.default({userData:{instances:v},matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0],raycast:()=>null},c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:O.length/16,array:O,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:P.length/3,array:P,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:C},e(i)):f.createElement(x.Provider,{value:C},e))}));exports.Instance=j,exports.Instances=v,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement(m.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(v,s.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};

package/core/Instances.d.ts

@@ -35,7 +35,7 @@ declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     context?: React.Context<Api> | 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 | "geometry" | "context" | "instance" | "instanceKey"> & React.RefAttributes<unknown>>;
-declare const Instances: React.ForwardRefExoticComponent<Pick<InstancesProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "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 | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "instanceMatrix" | "frames" | "count" | "instanceColor" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<InstancedMesh>>;
+declare const Instances: React.ForwardRefExoticComponent<Pick<InstancesProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "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 | "range" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "instanceMatrix" | "count" | "frames" | "instanceColor" | "isInstancedMesh" | "getColorAt" | "getMatrixAt" | "setColorAt" | "setMatrixAt" | "limit"> & React.RefAttributes<InstancedMesh>>;
 declare function Merged({ meshes, children, ...props }: {
     [x: string]: any;
     meshes: any;

package/core/Instances.js

@@ -11,7 +11,7 @@ const globalContext = /*#__PURE__*/React.createContext(null);
 const parentMatrix = new THREE.Matrix4();
 const instanceMatrix = new THREE.Matrix4();
 const tempMatrix = new THREE.Matrix4();
-const color = new THREE.Color();
+new THREE.Color();
 const translation = new THREE.Vector3();
 const rotation = new THREE.Quaternion();
 const scale = new THREE.Vector3();
@@ -85,16 +85,10 @@ const Instances = /*#__PURE__*/React.forwardRef(({
 
         instanceRef.matrixWorld.decompose(translation, rotation, scale);
         instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix);
-
-        if (!instanceMatrix.equals(tempMatrix.fromArray(matrices, i * 16))) {
-          instanceMatrix.toArray(matrices, i * 16);
-          parentRef.current.instanceMatrix.needsUpdate = true;
-        }
-
-        if (!instanceRef.color.equals(color.fromArray(colors, i * 3))) {
-          instanceRef.color.toArray(colors, i * 3);
-          parentRef.current.instanceColor.needsUpdate = true;
-        }
+        instanceMatrix.toArray(matrices, i * 16);
+        parentRef.current.instanceMatrix.needsUpdate = true;
+        instanceRef.color.toArray(colors, i * 3);
+        parentRef.current.instanceColor.needsUpdate = true;
       }
 
       count++;

package/core/Lightformer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),a=require("three"),l=require("react-merge-refs");function n(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 u=n(e),i=c(t),o=c(a),s=n(l);const f=i.forwardRef((({args:e,map:t,toneMapped:a=!1,color:l="white",form:n="rect",intensity:c=1,scale:f=1,target:m,children:p,...d},y)=>{const g=i.useRef(null);return i.useLayoutEffect((()=>{p||d.material||(r.applyProps(g.current.material,{color:l}),g.current.material.color.multiplyScalar(c))}),[l,c,p,d.material]),i.useLayoutEffect((()=>{m&&g.current.lookAt(Array.isArray(m)?new o.Vector3(...m):m)}),[m]),f=Array.isArray(f)&&2===f.length?[f[0],f[1],1]:f,i.createElement("mesh",u.default({ref:s.default([g,y]),scale:f},d),"circle"===n?i.createElement("ringGeometry",{args:[0,1,64]}):"ring"===n?i.createElement("ringGeometry",{args:[.5,1,64]}):"rect"===n?i.createElement("planeGeometry",null):i.createElement(n,{args:e}),p||(d.material?null:i.createElement("meshBasicMaterial",{toneMapped:a,map:t,side:o.DoubleSide})))}));exports.Lightformer=f;