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

package/core/ArcballControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=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 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=o(e),c=s(t);const u=c.forwardRef((({makeDefault:e,camera:t,regress:o,domElement:s,onChange:u,onStart:i,onEnd:l,...d},f)=>{const b=r.useThree((({invalidate:e})=>e)),m=r.useThree((({camera:e})=>e)),v=r.useThree((({gl:e})=>e)),h=r.useThree((({events:e})=>e)),p=r.useThree((({set:e})=>e)),E=r.useThree((({get:e})=>e)),g=r.useThree((({performance:e})=>e)),j=t||m,O=s||("boolean"!=typeof h.connected?h.connected:v.domElement),T=c.useMemo((()=>new n.ArcballControls(j)),[j]);return r.useFrame((()=>{T.enabled&&T.update()})),c.useEffect((()=>{const e=e=>{b(),o&&g.regress(),u&&u(e)};return T.connect(O),T.addEventListener("change",e),i&&T.addEventListener("start",i),l&&T.addEventListener("end",l),()=>{T.removeEventListener("change",e),i&&T.removeEventListener("start",i),l&&T.removeEventListener("end",l),T.dispose()}}),[O,u,i,l,o,T,b]),c.useEffect((()=>{if(e){const e=E().controls;return p({controls:T}),()=>p({controls:e})}}),[e,T]),c.createElement("primitive",a.default({ref:f,object:T},d))}));exports.ArcballControls=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=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 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=s(e),u=o(t);const c=t.forwardRef((({camera:e,makeDefault:s,regress:o,domElement:c,onChange:i,onStart:l,onEnd:f,...d},m)=>{const v=r.useThree((e=>e.invalidate)),b=r.useThree((e=>e.camera)),h=r.useThree((e=>e.gl)),E=r.useThree((e=>e.events)),p=r.useThree((e=>e.set)),g=r.useThree((e=>e.get)),j=r.useThree((e=>e.performance)),O=e||b,T=c||E.connected||h.domElement,L=t.useMemo((()=>new n.ArcballControls(O)),[O]);return r.useFrame((()=>{L.enabled&&L.update()})),t.useEffect((()=>(L.connect(T),()=>{L.dispose()})),[T,o,L,v]),t.useEffect((()=>{const e=e=>{v(),o&&j.regress(),i&&i(e)};return 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)}}),[i,l,f]),t.useEffect((()=>{if(s){const e=g().controls;return p({controls:L}),()=>p({controls:e})}}),[s,L]),u.createElement("primitive",a.default({ref:m,object:L},d))}));exports.ArcballControls=c;

package/core/ArcballControls.d.ts

@@ -1,15 +1,15 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 import * as React from 'react';
-import * as THREE from 'three';
 import { ArcballControls as ArcballControlsImpl } from 'three-stdlib';
-export declare type ArcballControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
+import type { Event, OrthographicCamera, PerspectiveCamera } from 'three';
+export declare type ArcballControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
     target?: ReactThreeFiber.Vector3;
-    camera?: THREE.Camera;
+    camera?: OrthographicCamera | PerspectiveCamera;
     domElement?: HTMLElement;
     regress?: boolean;
     makeDefault?: boolean;
-    onChange?: (e?: THREE.Event) => void;
-    onStart?: (e?: THREE.Event) => void;
-    onEnd?: (e?: THREE.Event) => void;
-}>;
-export declare const ArcballControls: React.ForwardRefExoticComponent<Pick<ArcballControlsProps, string | number | symbol> & React.RefAttributes<ArcballControlsImpl>>;
+    onChange?: (e?: Event) => void;
+    onStart?: (e?: Event) => void;
+    onEnd?: (e?: Event) => void;
+}>, 'ref'>;
+export declare const ArcballControls: React.ForwardRefExoticComponent<ArcballControlsProps & React.RefAttributes<ArcballControlsImpl>>;

package/core/ArcballControls.js

@@ -1,11 +1,12 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import { useThree, useFrame } from '@react-three/fiber';
 import * as React from 'react';
+import { forwardRef, useMemo, useEffect } from 'react';
 import { ArcballControls as ArcballControls$1 } from 'three-stdlib';
 
-const ArcballControls = /*#__PURE__*/React.forwardRef(({
-  makeDefault,
+const ArcballControls = /*#__PURE__*/forwardRef(({
   camera,
+  makeDefault,
   regress,
   domElement,
   onChange,
@@ -13,41 +14,30 @@ const ArcballControls = /*#__PURE__*/React.forwardRef(({
   onEnd,
   ...restProps
 }, ref) => {
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const gl = useThree(({
-    gl
-  }) => gl);
-  const events = useThree(({
-    events
-  }) => events);
-  const set = useThree(({
-    set
-  }) => set);
-  const get = useThree(({
-    get
-  }) => get);
-  const performance = useThree(({
-    performance
-  }) => performance);
+  const invalidate = useThree(state => state.invalidate);
+  const defaultCamera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
+  const performance = useThree(state => state.performance);
   const explCamera = camera || defaultCamera;
-  const explDomElement = domElement || (typeof events.connected !== 'boolean' ? events.connected : gl.domElement);
-  const controls = React.useMemo(() => new ArcballControls$1(explCamera), [explCamera]);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = useMemo(() => new ArcballControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
   });
-  React.useEffect(() => {
+  useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, regress, controls, invalidate]);
+  useEffect(() => {
     const callback = e => {
       invalidate();
       if (regress) performance.regress();
       if (onChange) onChange(e);
     };
 
-    controls.connect(explDomElement);
     controls.addEventListener('change', callback);
     if (onStart) controls.addEventListener('start', onStart);
     if (onEnd) controls.addEventListener('end', onEnd);
@@ -55,10 +45,9 @@ const ArcballControls = /*#__PURE__*/React.forwardRef(({
       controls.removeEventListener('change', callback);
       if (onStart) controls.removeEventListener('start', onStart);
       if (onEnd) controls.removeEventListener('end', onEnd);
-      controls.dispose();
     };
-  }, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
-  React.useEffect(() => {
+  }, [onChange, onStart, onEnd]);
+  useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
       set({

package/core/Bounds.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 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)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const p=a.useRef(null),l=r.useThree((e=>e.camera)),x=r.useThree((e=>e.controls)),h=r.useThree((e=>e.invalidate)),y=a.useRef(f);function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}y.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=b.getSize(new n.Vector3),t=b.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(l)?4*r:r/(2*Math.atan(Math.PI*l.fov/360)),a=c(l)?4*r:o/l.aspect,i=m*Math.max(o,a);return{box:b,size:e,center:t,distance:i}}return{getSize:e,refresh(t){var r;if((r=t)&&r.isObject3D?b.setFromObject(t):(e=>e&&e.isBox3)(t)?b.copy(t):p.current&&b.setFromObject(p.current),b.isEmpty()){const e=l.position.length()||10;b.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==x?void 0:x.constructor.name)){const{distance:t}=e(),r=l.position.clone().sub(x.target).normalize().multiplyScalar(t),o=x.target.clone().add(r);l.position.copy(o)}return this},clip(){const{distance:t}=e();return x&&(x.maxDistance=10*t),l.near=t/100,l.far=100*t,l.updateProjectionMatrix(),x&&x.update(),this},fit(){M.camera.copy(l.position),x&&M.focus.copy(x.target);const{center:r,distance:o}=e(),a=r.clone().sub(l.position).normalize().multiplyScalar(o);if(g.camera.copy(r).sub(a),g.focus.copy(r),c(l)){M.zoom=l.zoom;let e=0,o=0;const a=[new n.Vector3(b.min.x,b.min.y,b.min.z),new n.Vector3(b.min.x,b.max.y,b.min.z),new n.Vector3(b.min.x,b.min.y,b.max.z),new n.Vector3(b.min.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.min.z),new n.Vector3(b.max.x,b.min.y,b.max.z),new n.Vector3(b.max.x,b.min.y,b.min.z)];r.applyMatrix4(l.matrixWorldInverse);for(const t of a)t.applyMatrix4(l.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(l.top-l.bottom)/e,i=(l.right-l.left)/o;g.zoom=Math.min(c,i)/m,t||(l.zoom=g.zoom,l.updateProjectionMatrix())}return t?M.animating=!0:(l.position.copy(g.camera),l.lookAt(g.focus),x&&(x.target.copy(g.focus),x.update()),h()),y.current&&y.current(this.getSize()),this}}}),[b,l,x,m,t,h]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),x){const e=()=>M.animating=!1;return x.addEventListener("start",e),()=>x.removeEventListener("start",e)}}),[s,o,x]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,g.focus,t,r),d(M.camera,g.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,g.zoom,t,r),l.position.copy(M.camera),c(l)&&(l.zoom=M.zoom,l.updateProjectionMatrix()),x?(x.target.copy(M.focus),x.update()):l.lookAt(M.focus),h(),c(l)&&!(Math.abs(M.zoom-g.zoom)<u))return;if(!c(l)&&!z(M.camera,g.camera))return;if(x&&!z(M.focus,g.focus))return;M.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 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)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,observe:u,margin:m=1.2,eps:f=.01,onFit:l}){const p=a.useRef(null),{camera:x,invalidate:y,size:z,controls:d}=r.useThree(),h=d,M=a.useRef(l);function g(e,t){return Math.abs(e.x-t.x)<f&&Math.abs(e.y-t.y)<f&&Math.abs(e.z-t.z)<f}function b(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}M.current=l;const[w]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[v]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[V]=a.useState((()=>new n.Box3)),j=a.useMemo((()=>{function e(){const e=V.getSize(new n.Vector3),t=V.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(x)?4*r:r/(2*Math.atan(Math.PI*x.fov/360)),a=c(x)?4*r:o/x.aspect,i=m*Math.max(o,a);return{box:V,size:e,center:t,distance:i}}return{getSize:e,refresh(t){if((r=t)&&r.isBox3)V.copy(t);else{const e=t||p.current;e.updateWorldMatrix(!0,!0),V.setFromObject(e)}var r;if(V.isEmpty()){const e=x.position.length()||10;V.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==h?void 0:h.constructor.name)){const{distance:t}=e(),r=x.position.clone().sub(h.target).normalize().multiplyScalar(t),o=h.target.clone().add(r);x.position.copy(o)}return this},clip(){const{distance:t}=e();return h&&(h.maxDistance=10*t),x.near=t/100,x.far=100*t,x.updateProjectionMatrix(),h&&h.update(),y(),this},fit(){w.camera.copy(x.position),h&&w.focus.copy(h.target);const{center:r,distance:o}=e(),a=r.clone().sub(x.position).normalize().multiplyScalar(o);if(v.camera.copy(r).sub(a),v.focus.copy(r),c(x)){w.zoom=x.zoom;let e=0,o=0;const a=[new n.Vector3(V.min.x,V.min.y,V.min.z),new n.Vector3(V.min.x,V.max.y,V.min.z),new n.Vector3(V.min.x,V.min.y,V.max.z),new n.Vector3(V.min.x,V.max.y,V.max.z),new n.Vector3(V.max.x,V.max.y,V.max.z),new n.Vector3(V.max.x,V.max.y,V.min.z),new n.Vector3(V.max.x,V.min.y,V.max.z),new n.Vector3(V.max.x,V.min.y,V.min.z)];r.applyMatrix4(x.matrixWorldInverse);for(const t of a)t.applyMatrix4(x.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(x.top-x.bottom)/e,i=(x.right-x.left)/o;v.zoom=Math.min(c,i)/m,t||(x.zoom=v.zoom,x.updateProjectionMatrix())}return t?w.animating=!0:(x.position.copy(v.camera),x.lookAt(v.focus),h&&(h.target.copy(v.focus),h.update())),M.current&&M.current(this.getSize()),y(),this}}}),[V,x,h,m,t,y]);a.useLayoutEffect((()=>{if(h){const e=()=>w.animating=!1;return h.addEventListener("start",e),()=>h.removeEventListener("start",e)}}),[h]);const O=a.useRef(0);return a.useLayoutEffect((()=>{(u||0==O.current++)&&(j.refresh(),o&&j.fit(),s&&j.clip())}),[z,s,o,u]),r.useFrame(((e,r)=>{if(w.animating){if(b(w.focus,v.focus,t,r),b(w.camera,v.camera,t,r),w.zoom=n.MathUtils.damp(w.zoom,v.zoom,t,r),x.position.copy(w.camera),c(x)&&(x.zoom=w.zoom,x.updateProjectionMatrix()),h?(h.target.copy(w.focus),h.update()):x.lookAt(w.focus),y(),c(x)&&!(Math.abs(w.zoom-v.zoom)<f))return;if(!c(x)&&!g(w.camera,v.camera))return;if(h&&!g(w.focus,v.focus))return;w.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:j},e))},exports.useBounds=function(){return a.useContext(i)};

package/core/Bounds.d.ts

@@ -16,9 +16,10 @@ export declare type BoundsProps = JSX.IntrinsicElements['group'] & {
     damping?: number;
     fit?: boolean;
     clip?: boolean;
+    observe?: boolean;
     margin?: number;
     eps?: number;
     onFit?: (data: SizeProps) => void;
 };
-export declare function Bounds({ children, damping, fit, clip, margin, eps, onFit }: BoundsProps): JSX.Element;
+export declare function Bounds({ children, damping, fit, clip, observe, margin, eps, onFit }: BoundsProps): JSX.Element;
 export declare function useBounds(): BoundsApi;

package/core/Bounds.js

@@ -4,8 +4,6 @@ import { useThree, useFrame } from '@react-three/fiber';
 
 const isOrthographic = def => def && def.isOrthographicCamera;
 
-const isObject3D = def => def && def.isObject3D;
-
 const isBox3 = def => def && def.isBox3;
 
 const context = /*#__PURE__*/React.createContext(null);
@@ -14,15 +12,19 @@ function Bounds({
   damping = 6,
   fit,
   clip,
+  observe,
   margin = 1.2,
   eps = 0.01,
   onFit
 }) {
   const ref = React.useRef(null);
-  const camera = useThree(state => state.camera); // @ts-expect-error new in @react-three/fiber@7.0.5
-
-  const controls = useThree(state => state.controls);
-  const invalidate = useThree(state => state.invalidate);
+  const {
+    camera,
+    invalidate,
+    size,
+    controls: controlsImpl
+  } = useThree();
+  const controls = controlsImpl;
   const onFitRef = React.useRef(onFit);
   onFitRef.current = onFit;
 
@@ -68,7 +70,11 @@ function Bounds({
       getSize,
 
       refresh(object) {
-        if (isObject3D(object)) box.setFromObject(object);else if (isBox3(object)) box.copy(object);else if (ref.current) box.setFromObject(ref.current);
+        if (isBox3(object)) box.copy(object);else {
+          const target = object || ref.current;
+          target.updateWorldMatrix(true, true);
+          box.setFromObject(target);
+        }
 
         if (box.isEmpty()) {
           const max = camera.position.length() || 10;
@@ -97,6 +103,7 @@ function Bounds({
         camera.far = distance * 100;
         camera.updateProjectionMatrix();
         if (controls) controls.update();
+        invalidate();
         return this;
       },
 
@@ -147,21 +154,16 @@ function Bounds({
             controls.target.copy(goal.focus);
             controls.update();
           }
-
-          invalidate();
         }
 
         if (onFitRef.current) onFitRef.current(this.getSize());
+        invalidate();
         return this;
       }
 
     };
   }, [box, camera, controls, margin, damping, invalidate]);
   React.useLayoutEffect(() => {
-    api.refresh();
-    if (fit) api.fit();
-    if (clip) api.clip();
-
     if (controls) {
       // Try to prevent drag hijacking
       const callback = () => current.animating = false;
@@ -169,7 +171,16 @@ function Bounds({
       controls.addEventListener('start', callback);
       return () => controls.removeEventListener('start', callback);
     }
-  }, [clip, fit, controls]);
+  }, [controls]); // Scale pointer on window resize
+
+  const count = React.useRef(0);
+  React.useLayoutEffect(() => {
+    if (observe || count.current++ === 0) {
+      api.refresh();
+      if (fit) api.fit();
+      if (clip) api.clip();
+    }
+  }, [size, clip, fit, observe]);
   useFrame((state, delta) => {
     if (current.animating) {
       damp(current.focus, goal.focus, damping, delta);

package/core/Clone.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("lodash.pick");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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)}var o=a(e),c=n(t),i=a(r);function l(e,{keys:t=["near","far","color","distance","decay","penumbra","angle","intensity","skeleton","visible","castShadow","receiveShadow","morphTargetDictionary","morphTargetInfluences","name","geometry","material","position","rotation","scale","up","userData"],deep:r,inject:a,castShadow:n,receiveShadow:o}){let l=i.default(e,t);return r&&(l.geometry&&"materialsOnly"!==r&&(l.geometry=l.geometry.clone()),l.material&&"geometriesOnly"!==r&&(l.material=l.material.clone())),a&&(l="function"==typeof a?{...l,children:a(e)}:c.isValidElement(a)?{...l,children:a}:{...l,...a}),"Mesh"===e.type&&(n&&(l.castShadow=!0),o&&(l.receiveShadow=!0)),l}const u=c.forwardRef((({object:e,children:t,deep:r,castShadow:a,receiveShadow:n,inject:i,keys:d,...s},f)=>{const p={keys:d,deep:r,inject:i,castShadow:a,receiveShadow:n};if(Array.isArray(e))return c.createElement("group",o.default({},s,{ref:f}),e.map((e=>c.createElement(u,o.default({key:e.uuid,object:e},p)))),t);const{children:y,...m}=l(e,p),h=e.type[0].toLowerCase()+e.type.slice(1);return c.createElement(h,o.default({},m,s,{ref:f}),(null==e?void 0:e.children).map((e=>{let t={},r=e.type[0].toLowerCase()+e.type.slice(1);return"group"===r||"object3D"===r?(r=u,t={object:e,...p}):t=l(e,p),c.createElement(r,o.default({key:e.uuid},t))})),t,y)}));exports.Clone=u;

package/core/Clone.d.ts

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

package/core/Clone.js

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

package/core/Cloud.cjs.js

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

package/core/Cloud.d.ts

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

package/core/Cloud.js

@@ -11,10 +11,13 @@ function Cloud({
   width = 10,
   depth = 1.5,
   segments = 20,
+  texture = CLOUD_URL,
+  color = "#ffffff",
+  depthTest = true,
   ...props
 }) {
   const group = React.useRef();
-  const texture = useTexture(CLOUD_URL);
+  const cloudTexture = useTexture(texture);
   const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
     x: width / 2 - Math.random() * width,
     y: width / 2 - Math.random() * width,
@@ -45,10 +48,11 @@ function Cloud({
     scale: scale,
     rotation: [0, 0, 0]
   }, /*#__PURE__*/React.createElement("meshStandardMaterial", {
-    map: texture,
+    map: cloudTexture,
     transparent: true,
     opacity: scale / 6 * density * opacity,
-    depthTest: false
+    depthTest: depthTest,
+    color: color
   }))))));
 }
 

package/core/ComputedAttribute.cjs.js

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

package/core/ComputedAttribute.d.ts

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

package/core/ComputedAttribute.js

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

package/core/ContactShadows.cjs.js

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

package/core/ContactShadows.d.ts

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

package/core/ContactShadows.js

@@ -13,6 +13,8 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
   blur = 1,
   far = 10,
   resolution = 256,
+  smooth = true,
+  color = '#000000',
   ...props
 }, ref) => {
   const scene = useThree(({
@@ -21,7 +23,7 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
   const gl = useThree(({
     gl
   }) => gl);
-  const shadowCamera = React.useRef();
+  const shadowCamera = React.useRef(null);
   width = width * (Array.isArray(scale) ? scale[0] : scale || 1);
   height = height * (Array.isArray(scale) ? scale[1] : scale || 1);
   const [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur] = React.useMemo(() => {
@@ -33,32 +35,50 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     const depthMaterial = new THREE.MeshDepthMaterial();
     depthMaterial.depthTest = depthMaterial.depthWrite = false;
 
-    depthMaterial.onBeforeCompile = shader => shader.fragmentShader = shader.fragmentShader.replace('1.0 - fragCoordZ ), opacity );', '0.0 ), ( 1.0 - fragCoordZ ) * 1.0 );');
+    depthMaterial.onBeforeCompile = shader => {
+      shader.uniforms = { ...shader.uniforms,
+        ucolor: {
+          value: new THREE.Color(color).convertSRGBToLinear()
+        }
+      };
+      shader.fragmentShader = shader.fragmentShader.replace(`void main() {`, //
+      `uniform vec3 ucolor;
+           void main() {
+          `);
+      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', 'vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );');
+    };
 
     const horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader);
     const verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader);
     verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false;
     return [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur];
   }, [resolution, width, height, scale]);
+  const blurShadows = React.useCallback(blur => {
+    blurPlane.visible = true;
+    blurPlane.material = horizontalBlurMaterial;
+    horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture;
+    horizontalBlurMaterial.uniforms.h.value = blur * 1 / 256;
+    gl.setRenderTarget(renderTargetBlur);
+    gl.render(blurPlane, shadowCamera.current);
+    blurPlane.material = verticalBlurMaterial;
+    verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture;
+    verticalBlurMaterial.uniforms.v.value = blur * 1 / 256;
+    gl.setRenderTarget(renderTarget);
+    gl.render(blurPlane, shadowCamera.current);
+    blurPlane.visible = false;
+  }, []);
   let count = 0;
   useFrame(() => {
     if (shadowCamera.current && (frames === Infinity || count < frames)) {
       const initialBackground = scene.background;
       scene.background = null;
+      const initialOverrideMaterial = scene.overrideMaterial;
       scene.overrideMaterial = depthMaterial;
       gl.setRenderTarget(renderTarget);
       gl.render(scene, shadowCamera.current);
-      scene.overrideMaterial = null;
-      blurPlane.material = horizontalBlurMaterial;
-      blurPlane.material.uniforms.tDiffuse.value = renderTarget.texture;
-      horizontalBlurMaterial.uniforms.h.value = blur / 256;
-      gl.setRenderTarget(renderTargetBlur);
-      gl.render(blurPlane, shadowCamera.current);
-      blurPlane.material = verticalBlurMaterial;
-      blurPlane.material.uniforms.tDiffuse.value = renderTargetBlur.texture;
-      verticalBlurMaterial.uniforms.v.value = blur / 256;
-      gl.setRenderTarget(renderTarget);
-      gl.render(blurPlane, shadowCamera.current);
+      scene.overrideMaterial = initialOverrideMaterial;
+      blurShadows(blur);
+      if (smooth) blurShadows(blur * 0.4);
       gl.setRenderTarget(null);
       scene.background = initialBackground;
       count++;

package/core/CubeCamera.cjs.js

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

package/core/CubeCamera.js

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