@react-three/drei 9.106.2 → 9.107.0

package/README.md

@@ -63,7 +63,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#dragcontrols">DragControls</a></li>
           <li><a href="#transformcontrols">TransformControls</a></li>
           <li><a href="#grid">Grid</a></li>
-          <li><a href="#usehelper">useHelper</a></li>
+          <li><a href="#helper--usehelper">Helper / useHelper</a></li>
           <li><a href="#helper">Helper</a></li>
         </ul>
         <li><a href="#abstractions">Abstractions</a></li>
@@ -119,29 +119,29 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#wireframe">Wireframe</a></li>
           <li><a href="#usedepthbuffer">useDepthBuffer</a></li>
           <li><a href="#usecontextbridge">useContextBridge</a></li>
-          <li><a href="#usefbo">useFBO</a></li>
+          <li><a href="#fbo--usefbo">Fbo / useFBO</a></li>
           <li><a href="#usecamera">useCamera</a></li>
-          <li><a href="#usecubecamera">useCubeCamera</a></li>
-          <li><a href="#usedetectgpu">useDetectGPU</a></li>          
+          <li><a href="#cubecamera--usecubecamera">CubeCamera / useCubeCamera</a></li>
+          <li><a href="#detectgpu--usedetectgpu">DetectGPU / useDetectGPU</a></li>          
           <li><a href="#useaspect">useAspect</a></li>
           <li><a href="#usecursor">useCursor</a></li>
           <li><a href="#useintersect">useIntersect</a></li>
           <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li>
-          <li><a href="#useTrail">useTrail</a></li>
+          <li><a href="#trail--useTrail">Trail / useTrail</a></li>
           <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li>
           <li><a href="#facelandmarker">FaceLandmarker</a></li>
         </ul>
         <li><a href="#loading">Loaders</a></li>
         <ul>
           <li><a href="#loader">Loader</a></li>
-          <li><a href="#useprogress">useProgress</a></li>
-          <li><a href="#usegltf">useGLTF</a></li>
-          <li><a href="#usefbx">useFBX</a></li>
-          <li><a href="#usetexture">useTexture</a></li>
-          <li><a href="#usektx2">useKTX2</a></li>
-          <li><a href="#usecubetexture">useCubeTexture</a></li>
-          <li><a href="#usevideotexture">useVideoTexture</a></li>
-          <li><a href="#usetrailtexture">useTrailTexture</a></li>
+          <li><a href="#progress--useprogress">Progress / useProgress</a></li>
+          <li><a href="#gltf--usegltf">Gltf / useGLTF</a></li>
+          <li><a href="#fbx--usefbx">FBX / useFBX</a></li>
+          <li><a href="#texture--usetexture">Texture / useTexture</a></li>
+          <li><a href="#ktx2--usektx2">Ktx2 / useKTX2</a></li>
+          <li><a href="#cubetexture--usecubetexture">CubeTexture / useCubeTexture</a></li>
+          <li><a href="#videotexture--usevideotexture">VideoTexture / useVideoTexture</a></li>
+          <li><a href="#trailtexture--usetrailtexture">TrailTexture / useTrailTexture</a></li>
           <li><a href="#usefont">useFont</a></li>
           <li><a href="#usespriteloader">useSpriteLoader</a></li>
         </ul>
@@ -230,8 +230,8 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#sparkles">Sparkles</a></li>
           <li><a href="#cloud">Cloud</a></li>
           <li><a href="#useenvironment">useEnvironment</a></li>
-          <li><a href="#usematcaptexture">useMatcapTexture</a></li>
-          <li><a href="#usenormaltexture">useNormalTexture</a></li>
+          <li><a href="#matcaptexture--usematcaptexture">MatcapTexture / useMatcapTexture</a></li>
+          <li><a href="#normaltexture--usenormaltexture">NormalTexture / useNormalTexture</a></li>
           <li><a href="#shadowalpha">ShadowAlpha</a></li>
         </ul>
       </ul>

package/core/GradientTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber");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 i=a(e),u=n(t);let o=function(e){return e.Linear="linear",e.Radial="radial",e}({});exports.GradientTexture=function({stops:e,colors:t,size:a=1024,width:n=16,type:c=o.Linear,innerCircleRadius:l=0,outerCircleRadius:s="auto",...d}){const f=r.useThree((e=>e.gl)),p=u.useMemo((()=>{const r=document.createElement("canvas"),i=r.getContext("2d");let u;if(r.width=n,r.height=a,c===o.Linear)u=i.createLinearGradient(0,0,0,a);else{const e=r.width/2,t=r.height/2,a="auto"!==s?Math.abs(Number(s)):Math.sqrt(e**2+t**2);u=i.createRadialGradient(e,t,Math.abs(l),e,t,a)}let d=e.length;for(;d--;)u.addColorStop(e[d],t[d]);return i.save(),i.fillStyle=u,i.fillRect(0,0,n,a),i.restore(),r}),[e]);return u.createElement("canvasTexture",i.default({colorSpace:f.outputColorSpace,args:[p],attach:"map"},d))},exports.GradientType=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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=n(e),u=i(t),c=i(a);let l=function(e){return e.Linear="linear",e.Radial="radial",e}({});exports.GradientTexture=function({stops:e,colors:t,size:a=1024,width:n=16,type:i=l.Linear,innerCircleRadius:s=0,outerCircleRadius:d="auto",...f}){const h=r.useThree((e=>e.gl)),p=u.useMemo((()=>{const r=document.createElement("canvas"),o=r.getContext("2d");let u;if(r.width=n,r.height=a,i===l.Linear)u=o.createLinearGradient(0,0,0,a);else{const e=r.width/2,t=r.height/2,a="auto"!==d?Math.abs(Number(d)):Math.sqrt(e**2+t**2);u=o.createRadialGradient(e,t,Math.abs(s),e,t,a)}const f=new c.Color;let h=e.length;for(;h--;)u.addColorStop(e[h],f.set(t[h]).getStyle());return o.save(),o.fillStyle=u,o.fillRect(0,0,n,a),o.restore(),r}),[e]);return u.createElement("canvasTexture",o.default({colorSpace:h.outputColorSpace,args:[p],attach:"map"},f))},exports.GradientType=l;

package/core/GradientTexture.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import * as THREE from 'three';
 export declare enum GradientType {
     Linear = "linear",
     Radial = "radial"
 }
 type Props = {
     stops: Array<number>;
-    colors: Array<string>;
+    colors: Array<THREE.ColorRepresentation>;
     attach?: string;
     size?: number;
     width?: number;

package/core/GradientTexture.js

@@ -1,6 +1,7 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { useThree } from '@react-three/fiber';
+import * as THREE from 'three';
 
 let GradientType = /*#__PURE__*/function (GradientType) {
   GradientType["Linear"] = "linear";
@@ -33,9 +34,10 @@ function GradientTexture({
       const radius = outerCircleRadius !== 'auto' ? Math.abs(Number(outerCircleRadius)) : Math.sqrt(canvasCenterX ** 2 + canvasCenterY ** 2);
       gradient = context.createRadialGradient(canvasCenterX, canvasCenterY, Math.abs(innerCircleRadius), canvasCenterX, canvasCenterY, radius);
     }
+    const tempColor = new THREE.Color(); // reuse instance for performance
     let i = stops.length;
     while (i--) {
-      gradient.addColorStop(stops[i], colors[i]);
+      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle());
     }
     context.save();
     context.fillStyle = gradient;

package/core/Stats.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats.js"),n=require("../helpers/useEffectfulState.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(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 c=f(e),a=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const f=n.useEffectfulState((()=>new a.default),[]);return c.useEffect((()=>{if(f){const n=u&&u.current||document.body;f.showPanel(e),null==n||n.appendChild(f.dom),r&&f.dom.classList.add(...r.split(" ").filter((e=>e)));const c=t.addEffect((()=>f.begin())),a=t.addAfterEffect((()=>f.end()));return()=>{null==n||n.removeChild(f.dom),c(),a()}}}),[u,f,r,e]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats.js"),n=require("../helpers/useEffectfulState.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 f=c(e),l=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const c=n.useEffectfulState((()=>new l.default),[]);return f.useEffect((()=>{if(c){const n=u&&u.current||document.body;c.showPanel(e),null==n||n.appendChild(c.dom);const f=(null!=r?r:"").split(" ").filter((e=>e));f.length&&c.dom.classList.add(...f);const l=t.addEffect((()=>c.begin())),s=t.addAfterEffect((()=>c.end()));return()=>{f.length&&c.dom.classList.remove(...f),null==n||n.removeChild(c.dom),l(),s()}}}),[u,c,r,e]),null};

package/core/Stats.js

@@ -14,10 +14,12 @@ function Stats({
       const node = parent && parent.current || document.body;
       stats.showPanel(showPanel);
       node == null || node.appendChild(stats.dom);
-      if (className) stats.dom.classList.add(...className.split(' ').filter(cls => cls));
+      const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
+      if (classNames.length) stats.dom.classList.add(...classNames);
       const begin = addEffect(() => stats.begin());
       const end = addAfterEffect(() => stats.end());
       return () => {
+        if (classNames.length) stats.dom.classList.remove(...classNames);
         node == null || node.removeChild(stats.dom);
         begin();
         end();

package/core/StatsGl.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats-gl");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 c=u(e),o=n(r);exports.StatsGl=function({className:e,parent:r,...n}){const u=t.useThree((e=>e.gl)),a=c.useMemo((()=>{const e=new o.default({...n});return e.init(u),e}),[u]);return c.useEffect((()=>{if(a){const n=r&&r.current||document.body;null==n||n.appendChild(a.dom),e&&a.container.classList.add(...e.split(" ").filter((e=>e)));const u=t.addAfterEffect((()=>a.update()));return()=>{null==n||n.removeChild(a.dom),u()}}}),[r,a,e]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats-gl");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 l=u(e),c=n(r);exports.StatsGl=function({className:e,parent:r,...n}){const u=t.useThree((e=>e.gl)),o=l.useMemo((()=>{const e=new c.default({...n});return e.init(u),e}),[u]);return l.useEffect((()=>{if(o){const n=r&&r.current||document.body;null==n||n.appendChild(o.dom);const u=(null!=e?e:"").split(" ").filter((e=>e));u.length&&o.dom.classList.add(...u);const l=t.addAfterEffect((()=>o.update()));return()=>{u.length&&o.dom.classList.remove(...u),null==n||n.removeChild(o.dom),l()}}}),[r,o,e]),null};

package/core/StatsGl.js

@@ -19,9 +19,11 @@ function StatsGl({
     if (stats) {
       const node = parent && parent.current || document.body;
       node == null || node.appendChild(stats.dom);
-      if (className) stats.container.classList.add(...className.split(' ').filter(cls => cls));
+      const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
+      if (classNames.length) stats.dom.classList.add(...classNames);
       const end = addAfterEffect(() => stats.update());
       return () => {
+        if (classNames.length) stats.dom.classList.remove(...classNames);
         node == null || node.removeChild(stats.dom);
         end();
       };