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

package/core/Float.d.ts

@@ -5,4 +5,4 @@ export declare type FloatProps = JSX.IntrinsicElements['group'] & {
     floatIntensity?: number;
     children?: React.ReactNode;
 };
-export declare function Float({ children, speed, rotationIntensity, floatIntensity, ...props }: FloatProps): JSX.Element;
+export declare const Float: React.ForwardRefExoticComponent<Pick<FloatProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "speed" | "rotationIntensity" | "floatIntensity"> & React.RefAttributes<import("three").Group>>;

package/core/Float.js

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

package/core/GizmoHelper.cjs.js

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

package/core/GizmoHelper.d.ts

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

package/core/GizmoHelper.js

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

package/core/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;

package/core/Lightformer.d.ts

@@ -0,0 +1,41 @@
+import { ReactThreeFiber } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+export declare type LightProps = JSX.IntrinsicElements['mesh'] & {
+    args?: any[];
+    map?: THREE.Texture;
+    toneMapped?: boolean;
+    color?: ReactThreeFiber.Color;
+    form?: 'circle' | 'ring' | 'rect' | any;
+    scale?: number | [number, number, number] | [number, number];
+    intensity?: number;
+    target?: [number, number, number] | THREE.Vector3;
+};
+export declare const Lightformer: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>, ReactThreeFiber.NodeProps<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Mesh>>>, ReactThreeFiber.NonFunctionKeys<{
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+}>> & {
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+    args?: any[] | undefined;
+    map?: THREE.Texture | undefined;
+    toneMapped?: boolean | undefined;
+    color?: ReactThreeFiber.Color | undefined;
+    form?: 'circle' | 'ring' | 'rect' | any;
+    scale?: number | [number, number] | [number, number, number] | undefined;
+    intensity?: number | undefined;
+    target?: THREE.Vector3 | [number, number, number] | undefined;
+}, "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 | "form" | "map" | "material" | "target" | "toneMapped" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "intensity"> & React.RefAttributes<unknown>>;

package/core/Lightformer.js

@@ -0,0 +1,51 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { applyProps } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+import mergeRefs from 'react-merge-refs';
+
+const Lightformer = /*#__PURE__*/React.forwardRef(({
+  args,
+  map,
+  toneMapped = false,
+  color = 'white',
+  form: Form = 'rect',
+  intensity = 1,
+  scale = 1,
+  target,
+  children,
+  ...props
+}, forwardRef) => {
+  // Apply emissive power
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!children && !props.material) {
+      applyProps(ref.current.material, {
+        color
+      });
+      ref.current.material.color.multiplyScalar(intensity);
+    }
+  }, [color, intensity, children, props.material]); // Target light
+
+  React.useLayoutEffect(() => {
+    if (target) ref.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target);
+  }, [target]); // Fix 2-dimensional scale
+
+  scale = Array.isArray(scale) && scale.length === 2 ? [scale[0], scale[1], 1] : scale;
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: mergeRefs([ref, forwardRef]),
+    scale: scale
+  }, props), Form === 'circle' ? /*#__PURE__*/React.createElement("ringGeometry", {
+    args: [0, 1, 64]
+  }) : Form === 'ring' ? /*#__PURE__*/React.createElement("ringGeometry", {
+    args: [0.5, 1, 64]
+  }) : Form === 'rect' ? /*#__PURE__*/React.createElement("planeGeometry", null) : /*#__PURE__*/React.createElement(Form, {
+    args: args
+  }), children ? children : !props.material ? /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    toneMapped: toneMapped,
+    map: map,
+    side: THREE.DoubleSide
+  }) : null);
+});
+
+export { Lightformer };

package/core/MeshReflectorMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(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 a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,mixContrast:M=1,distortionMap:S,reflectorOffset:T=0,...b},y)=>{const w=a.useThree((({gl:e})=>e)),g=a.useThree((({camera:e})=>e)),R=a.useThree((({scene:e})=>e)),v=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,j=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.Vector3(0,0,-1))),[E]=d.useState((()=>new r.Vector4)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Matrix4)),[I]=d.useState((()=>new r.PerspectiveCamera)),C=d.useCallback((()=>{var e;const t=j.current.parent||(null==(e=j.current)?void 0:e.__r3f.parent);if(!t)return;if(_.setFromMatrixPosition(t.matrixWorld),O.setFromMatrixPosition(g.matrixWorld),P.extractRotation(t.matrixWorld),B.set(0,0,1),B.applyMatrix4(P),_.addScaledVector(B,T),V.subVectors(_,O),V.dot(B)>0)return;V.reflect(B).negate(),V.add(_),P.extractRotation(g.matrixWorld),U.set(0,0,-1),U.applyMatrix4(P),U.add(O),W.subVectors(_,U),W.reflect(B).negate(),W.add(_),I.position.copy(V),I.up.set(0,1,0),I.up.applyMatrix4(P),I.up.reflect(B),I.lookAt(W),I.far=g.far,I.updateMatrixWorld(),I.projectionMatrix.copy(g.projectionMatrix),q.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),q.multiply(I.projectionMatrix),q.multiply(I.matrixWorldInverse),q.multiply(t.matrixWorld),D.setFromNormalAndCoplanarPoint(B,_),D.applyMatrix4(I.matrixWorldInverse),E.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const r=I.projectionMatrix;F.x=(Math.sign(E.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(E.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],E.multiplyScalar(2/E.dot(F)),r.elements[2]=E.x,r.elements[6]=E.y,r.elements[10]=E.z+1,r.elements[14]=E.w}),[g,T]),[k,L,z,A]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:w.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:w,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:q,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:v,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:S,mixContrast:M,"defines-USE_BLUR":v?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":S?"":void 0}]}),[w,o,q,n,h,v,e,t,s,l,p,m,f,x,S,M]);return a.useFrame((()=>{var e;const t=j.current.parent||(null==(e=j.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;C(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(k),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(R,I),v&&z.render(w,k,L),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+A["defines-USE_BLUR"]+A["defines-USE_DEPTH"]+A["defines-USE_DISTORTION"],ref:c.default([j,y])},A,b))}));exports.MeshReflectorMaterial=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(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 a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:i=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:T=0,...S},y)=>{const w=a.useThree((({gl:e})=>e)),b=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[D]=d.useState((()=>new r.Vector3)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Matrix4)),[P]=d.useState((()=>new r.Vector3(0,0,-1))),[U]=d.useState((()=>new r.Vector4)),[E]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(b.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,T),E.subVectors(B,_),E.dot(D)>0)return;E.reflect(D).negate(),E.add(B),O.extractRotation(b.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),V.subVectors(B,P),V.reflect(D).negate(),V.add(B),q.position.copy(E),q.up.set(0,1,0),q.up.applyMatrix4(O),q.up.reflect(D),q.lookAt(V),q.far=b.far,q.updateMatrixWorld(),q.projectionMatrix.copy(b.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(D,B),j.applyMatrix4(q.matrixWorldInverse),U.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;F.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(F)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[b,T]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:w.outputEncoding,type:r.HalfFloatType},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new o.BlurPass({gl:w,resolution:n,width:i[0],height:i[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,i,W,n,h,R,e,t,s,l,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;I(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(g,q),R&&L.render(w,C,k),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,y])},z,S))}));exports.MeshReflectorMaterial=p;

package/core/MeshReflectorMaterial.d.ts

@@ -11,7 +11,6 @@ export declare type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
     maxDepthThreshold?: number;
     depthScale?: number;
     depthToBlurRatioBias?: number;
-    debug?: number;
     distortionMap?: Texture;
     distortion?: number;
     mixContrast?: number;
@@ -24,4 +23,4 @@ declare global {
         }
     }
 }
-export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "attach" | "args" | "children" | "key" | "onUpdate" | "blur" | "resolution" | keyof import("three").MeshStandardMaterial | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap" | "reflectorOffset"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
+export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "attach" | "args" | "children" | "key" | "onUpdate" | "blur" | "resolution" | keyof import("three").MeshStandardMaterial | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "distortion" | "mixContrast" | "distortionMap" | "reflectorOffset"> & React.RefAttributes<MeshReflectorMaterialImpl>>;

package/core/MeshReflectorMaterial.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, HalfFloatType, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 import { BlurPass } from '../materials/BlurPass.js';
@@ -19,7 +19,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
   depthScale = 0,
   depthToBlurRatioBias = 0.25,
   mirror = 0,
-  debug = 0,
   distortion = 1,
   mixContrast = 1,
   distortionMap,
@@ -110,7 +109,8 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
     const parameters = {
       minFilter: LinearFilter,
       magFilter: LinearFilter,
-      encoding: gl.outputEncoding
+      encoding: gl.outputEncoding,
+      type: HalfFloatType
     };
     const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
     fbo1.depthBuffer = true;
@@ -142,7 +142,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
       depthScale,
       depthToBlurRatioBias,
       transparent: true,
-      debug,
       distortion,
       distortionMap,
       mixContrast,
@@ -151,7 +150,7 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
       'defines-USE_DISTORTION': distortionMap ? '' : undefined
     };
     return [fbo1, fbo2, blurpass, reflectorProps];
-  }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, mixContrast]);
+  }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast]);
   useFrame(() => {
     var _materialRef$current2;
 

package/core/OrbitControls.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 o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 a=o(e),u=s(r);const c=r.forwardRef((({makeDefault:e,camera:o,regress:s,domElement:c,enableDamping:i=!0,onChange:d,onStart:l,onEnd:f,...b},m)=>{const v=t.useThree((({invalidate:e})=>e)),p=t.useThree((({camera:e})=>e)),h=t.useThree((({gl:e})=>e)),E=t.useThree((({events:e})=>e)),g=t.useThree((({set:e})=>e)),O=t.useThree((({get:e})=>e)),j=t.useThree((({performance:e})=>e)),T=o||p,y=c||("boolean"!=typeof E.connected?E.connected:h.domElement),L=r.useMemo((()=>new n.OrbitControls(T)),[T]);return t.useFrame((()=>{L.enabled&&L.update()})),r.useEffect((()=>{const e=e=>{v(),s&&j.regress(),d&&d(e)};return L.connect(y),L.addEventListener("change",e),l&&L.addEventListener("start",l),f&&L.addEventListener("end",f),()=>{L.removeEventListener("change",e),l&&L.removeEventListener("start",l),f&&L.removeEventListener("end",f),L.dispose()}}),[y,d,l,f,s,L,v]),r.useEffect((()=>{if(e){const e=O().controls;return g({controls:L}),()=>g({controls:e})}}),[e,L]),u.createElement("primitive",a.default({ref:m,object:L,enableDamping:i},b))}));exports.OrbitControls=c;
+"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 s(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 a=s(e),u=o(r);const c=u.forwardRef((({makeDefault:e,camera:r,regress:s,domElement:o,enableDamping:c=!0,onChange:i,onStart:f,onEnd:d,...l},m)=>{const b=t.useThree((e=>e.invalidate)),v=t.useThree((e=>e.camera)),h=t.useThree((e=>e.gl)),p=t.useThree((e=>e.events)),E=t.useThree((e=>e.set)),g=t.useThree((e=>e.get)),O=t.useThree((e=>e.performance)),j=r||v,T=o||p.connected||h.domElement,L=u.useMemo((()=>new n.OrbitControls(j)),[j]);return t.useFrame((()=>{L.enabled&&L.update()})),u.useEffect((()=>(L.connect(T),()=>{L.dispose()})),[T,s,L,b]),u.useEffect((()=>{const e=e=>{b(),s&&O.regress(),i&&i(e)};return L.addEventListener("change",e),f&&L.addEventListener("start",f),d&&L.addEventListener("end",d),()=>{f&&L.removeEventListener("start",f),d&&L.removeEventListener("end",d),L.removeEventListener("change",e)}}),[i,f,d]),u.useEffect((()=>{if(e){const e=g().controls;return E({controls:L}),()=>E({controls:e})}}),[e,L]),u.createElement("primitive",a.default({ref:m,object:L,enableDamping:c},l))}));exports.OrbitControls=c;