@react-three/drei 8.18.9 → 9.0.0-beta.2

package/core/Environment.js

@@ -1,93 +1,11 @@
 import * as React from 'react';
-import { useThree, useFrame, createPortal, useLoader } from '@react-three/fiber';
-import { Scene, WebGLCubeRenderTarget, HalfFloatType, FloatType, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
+import { useThree, useLoader } from '@react-three/fiber';
+import { FloatType, 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/';
-
-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({
+function Environment({
   background = false,
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
   path = '',
@@ -96,12 +14,17 @@ function EnvironmentCube({
   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(state => state.scene);
+  const defaultScene = useThree(({
+    scene
+  }) => scene);
   const isCubeMap = Array.isArray(files);
   const loader = isCubeMap ? CubeTextureLoader : RGBELoader; // @ts-expect-error
 
@@ -114,14 +37,26 @@ function EnvironmentCube({
   const texture = isCubeMap ? loaderResult[0] : loaderResult;
   texture.mapping = EquirectangularReflectionMapping;
   React.useLayoutEffect(() => {
-    const target = resolveScene(scene || defaultScene);
-    const oldbg = target.background;
-    const oldenv = target.environment;
-    if (background !== 'only') target.environment = texture;
-    if (background) target.background = texture;
+    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;
+    }
+
     return () => {
-      if (background !== 'only') target.environment = oldenv;
-      if (background) target.background = oldbg; // Environment textures are volatile, better dispose and uncache them
+      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();
     };
@@ -129,4 +64,4 @@ function EnvironmentCube({
   return null;
 }
 
-export { Environment, EnvironmentCube, EnvironmentMap, EnvironmentPortal };
+export { Environment };

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((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;
+"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;

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" | "attachArray" | "attachObject" | "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 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,8 +4,12 @@ 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(state => state.camera);
-  const gl = useThree(state => state.gl);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const gl = useThree(({
+    gl
+  }) => 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"),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;
+"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))};

package/core/Float.d.ts

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

package/core/Float.js

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

package/core/FlyControls.d.ts

@@ -5,4 +5,4 @@ import { FlyControls as FlyControlsImpl } from 'three-stdlib';
 export declare type FlyControlsProps = ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl> & {
     onChange?: (e?: THREE.Event) => void;
 };
-export declare const FlyControls: React.ForwardRefExoticComponent<Pick<FlyControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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>>;
+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/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"),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);
+"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);

package/core/GizmoHelper.d.ts

@@ -8,9 +8,8 @@ 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, autoClear, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
+export declare const GizmoHelper: ({ alignment, margin, renderPriority, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
 export {};

package/core/GizmoHelper.js

@@ -19,7 +19,6 @@ const GizmoHelper = ({
   alignment = 'bottom-right',
   margin = [80, 80],
   renderPriority = 0,
-  autoClear = true,
   onUpdate,
   onTarget,
   children: GizmoHelperComponent
@@ -50,7 +49,8 @@ const GizmoHelper = ({
   const animating = React.useRef(false);
   const radius = React.useRef(0);
   const focusPoint = React.useRef(new Vector3(0, 0, 0));
-  const tweenCamera = React.useCallback(direction => {
+
+  const tweenCamera = 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,7 +61,27 @@ const GizmoHelper = ({
     dummy.lookAt(targetPosition);
     q2.copy(dummy.quaternion);
     invalidate();
-  }, [defaultControls, mainCamera, onTarget, 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();
+  };
+
   React.useEffect(() => {
     if (scene.background) {
       //Interchange the actual scene background with the virtual scene
@@ -72,44 +92,33 @@ 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;
-
-      // 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
 
-          q1.rotateTowards(q2, step); // animate orientation
+  const beforeRender = () => {
+    var _gizmoRef$current;
 
-          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
+    // Sync gizmo with main camera orientation
+    matrix.copy(mainCamera.matrix).invert();
+    (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
+  };
 
-
-      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;
+  useFrame((_, delta) => {
+    if (virtualCam.current && gizmoRef.current) {
+      animateStep(delta);
+      beforeRender();
+      gl.autoClear = false;
       gl.clearDepth();
       gl.render(virtualScene, virtualCam.current);
     }
   }, renderPriority);
-  const raycast = useCamera(virtualCam);
-  const gizmoHelperContext = React.useMemo(() => ({
+  const gizmoHelperContext = {
     tweenCamera,
-    raycast
-  }), [tweenCamera]); // Position gizmo component within scene
+    raycast: useCamera(virtualCam)
+  }; // Position gizmo component within scene
 
   const [marginX, marginY] = margin;
   const x = alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
@@ -118,6 +127,7 @@ 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,attachArray:"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}));

package/core/GizmoViewcube.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Event } from 'three';
+import { ThreeEvent } from '@react-three/fiber';
 declare type GenericProps = {
     font?: string;
     opacity?: number;
@@ -7,7 +7,7 @@ declare type GenericProps = {
     hoverColor?: string;
     textColor?: string;
     strokeColor?: string;
-    onClick?: (e: Event) => null;
+    onClick?: (e: ThreeEvent<MouseEvent>) => null;
     faces?: string[];
 };
 export declare const GizmoViewcube: (props: GenericProps) => JSX.Element;

package/core/GizmoViewcube.js

@@ -49,7 +49,7 @@ const FaceMaterial = ({
   return /*#__PURE__*/React.createElement("meshLambertMaterial", {
     map: texture,
     "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
-    attachArray: "material",
+    attach: `material-${index}`,
     color: hover ? hoverColor : 'white',
     transparent: true,
     opacity: opacity

package/core/GizmoViewport.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Event } from 'three';
+import { ThreeEvent } from '@react-three/fiber';
 declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     axisColors?: [string, string, string];
     axisScale?: [number, number, number];
@@ -10,7 +10,7 @@ declare type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     hideAxisHeads?: boolean;
     disabled?: boolean;
     font?: string;
-    onClick?: (e: Event) => null;
+    onClick?: (e: ThreeEvent<MouseEvent>) => null;
 };
 export declare const GizmoViewport: ({ hideNegativeAxes, hideAxisHeads, disabled, font, axisColors, axisHeadScale, axisScale, labels, labelColor, onClick, ...props }: GizmoViewportProps) => JSX.Element;
 export {};

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    #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;
+"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;

package/core/Image.d.ts

@@ -7,7 +7,6 @@ export declare type ImageProps = JSX.IntrinsicElements['mesh'] & {
     color?: Color;
     zoom?: number;
     grayscale?: number;
-    toneMapped?: boolean;
     url: string;
 };
 declare type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
@@ -25,7 +24,7 @@ declare global {
         }
     }
 }
-export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Mesh>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>, import("@react-three/fiber").NodeProps<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Mesh>>>, 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;
@@ -49,7 +48,6 @@ export declare const Image: React.ForwardRefExoticComponent<Pick<Omit<import("@r
     color?: Color | undefined;
     zoom?: number | undefined;
     grayscale?: number | undefined;
-    toneMapped?: boolean | undefined;
     url: string;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "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[]>>>;
+}, "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[]>>>;
 export {};

package/core/Image.js

@@ -48,9 +48,6 @@ 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(({
@@ -61,7 +58,6 @@ const Image = /*#__PURE__*/React.forwardRef(({
   zoom = 1,
   grayscale = 0,
   url,
-  toneMapped,
   ...props
 }, ref) => {
   extend({
@@ -81,8 +77,7 @@ const Image = /*#__PURE__*/React.forwardRef(({
     zoom: zoom,
     grayscale: grayscale,
     scale: planeBounds,
-    imageBounds: imageBounds,
-    toneMapped: toneMapped
+    imageBounds: imageBounds
   }), 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 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]})),{}))))};
+"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]})),{}))))};

package/core/Instances.d.ts

@@ -14,7 +14,7 @@ declare type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'insta
     instanceMatrix: THREE.InstancedBufferAttribute;
     instanceColor: THREE.InstancedBufferAttribute;
 };
-declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<Position, typeof Position>, import("@react-three/fiber").NonFunctionKeys<{
+declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<Position>, import("@react-three/fiber").NodeProps<Position, typeof Position>>>, 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;
@@ -34,8 +34,8 @@ declare const Instance: React.ForwardRefExoticComponent<Pick<Omit<import("@react
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     context?: React.Context<Api> | undefined;
-}, "visible" | "attach" | "attachArray" | "attachObject" | "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" | "attachArray" | "attachObject" | "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>>;
+}, "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 function Merged({ meshes, children, ...props }: {
     [x: string]: any;
     meshes: any;