@react-three/drei 9.102.2 → 9.102.4

package/README.md

@@ -448,7 +448,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
 You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
 
 ```jsx
-<ScrollControls pages={3} damping={0.1}>
+;<ScrollControls pages={3} damping={0.1}>
   {/* Canvas contents in here will *not* scroll, but receive useScroll! */}
   <SomeModel />
   <Scroll>
@@ -1596,7 +1596,7 @@ Radial gradient.
 
 ```jsx
 import { GradientTexture, GradientType } from './GradientTexture'
-<mesh>
+;<mesh>
   <planeGeometry />
   <meshBasicMaterial>
     <GradientTexture
@@ -1625,7 +1625,7 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
   <boxGeometry />
   <meshBasicMaterial />
   <Edges
-    lineWidth={4}
+    linewidth={4}
     scale={1.1}
     threshold={15} // Display edges only when the angle between two faces exceeds this value (default=15 degrees)
     color="white"
@@ -2825,7 +2825,7 @@ type FBOSettings = {
   samples?: number
   /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
   depth?: boolean
-} & THREE.WebGLRenderTargetOptions
+} & THREE.RenderTargetOptions
 
 export function useFBO(
   /** Width in pixels, or settings (will render fullscreen by default) */
@@ -3726,7 +3726,7 @@ If you still experience flip flops despite the bounds you can define a limit of
 PerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.
 
 ```jsx
-<PerformanceMonitor>
+;<PerformanceMonitor>
   <Effects />
 </PerformanceMonitor>
 
@@ -3756,16 +3756,20 @@ type HudProps = {
 ```
 
 ```jsx
-{ /* Renders on top of the default scene with a perspective camera */ }
-<Hud>
+{
+  /* Renders on top of the default scene with a perspective camera */
+}
+;<Hud>
   <PerspectiveCamera makeDefault position={[0, 0, 10]} />
   <mesh>
     <ringGeometry />
   </mesh>
 </Hud>
 
-{ /* Renders on top of the previous HUD with an orthographic camera */ }
-<Hud renderPriority={2}>
+{
+  /* Renders on top of the previous HUD with an orthographic camera */
+}
+;<Hud renderPriority={2}>
   <OrthographicCamera makeDefault position={[0, 0, 10]} />
   <mesh>
     <boxGeometry />

package/core/Line.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"),n=require("@react-three/fiber"),i=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),c=s(t);const u=c.forwardRef((function({points:e,color:t=16777215,vertexColors:o,linewidth:s=1,lineWidth:u,segments:l,dashed:f,...d},m){var h;const p=n.useThree((e=>e.size)),b=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[y]=c.useState((()=>new i.LineMaterial)),v=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,g=c.useMemo((()=>{const n=l?new i.LineSegmentsGeometry:new i.LineGeometry,s=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(n.setPositions(s.flat()),o){t=16777215;const e=o.map((e=>e instanceof r.Color?e.toArray():e));n.setColors(e.flat(),v)}return n}),[e,l,o,v]);return c.useLayoutEffect((()=>{b.computeLineDistances()}),[e,b]),c.useLayoutEffect((()=>{f?y.defines.USE_DASH="":delete y.defines.USE_DASH,y.needsUpdate=!0}),[f,y]),c.useEffect((()=>()=>g.dispose()),[g]),c.createElement("primitive",a.default({object:b,ref:m},d),c.createElement("primitive",{object:g,attach:"geometry"}),c.createElement("primitive",a.default({object:y,attach:"material",color:t,vertexColors:Boolean(o),resolution:[p.width,p.height],linewidth:null!=s?s:u,dashed:f,transparent:4===v},d)))}));exports.Line=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=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),c=s(t);const l=c.forwardRef((function({points:e,color:t=16777215,vertexColors:o,linewidth:s,lineWidth:l,segments:u,dashed:f,...d},m){var h,p;const b=n.useThree((e=>e.size)),y=c.useMemo((()=>u?new i.LineSegments2:new i.Line2),[u]),[v]=c.useState((()=>new i.LineMaterial)),g=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,j=c.useMemo((()=>{const n=u?new i.LineSegmentsGeometry:new i.LineGeometry,s=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(n.setPositions(s.flat()),o){t=16777215;const e=o.map((e=>e instanceof r.Color?e.toArray():e));n.setColors(e.flat(),g)}return n}),[e,u,o,g]);return c.useLayoutEffect((()=>{y.computeLineDistances()}),[e,y]),c.useLayoutEffect((()=>{f?v.defines.USE_DASH="":delete v.defines.USE_DASH,v.needsUpdate=!0}),[f,v]),c.useEffect((()=>()=>j.dispose()),[j]),c.createElement("primitive",a.default({object:y,ref:m},d),c.createElement("primitive",{object:j,attach:"geometry"}),c.createElement("primitive",a.default({object:v,attach:"material",color:t,vertexColors:Boolean(o),resolution:[b.width,b.height],linewidth:null!==(p=null!=s?s:l)&&void 0!==p?p:1,dashed:f,transparent:4===g},d)))}));exports.Line=l;

package/core/Line.js

@@ -8,13 +8,13 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
   points,
   color = 0xffffff,
   vertexColors,
-  linewidth = 1,
+  linewidth,
   lineWidth,
   segments,
   dashed,
   ...rest
 }, ref) {
-  var _vertexColors$;
+  var _vertexColors$, _ref;
   const size = useThree(state => state.size);
   const line2 = React.useMemo(() => segments ? new LineSegments2() : new Line2(), [segments]);
   const [lineMaterial] = React.useState(() => new LineMaterial());
@@ -61,7 +61,7 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
     color: color,
     vertexColors: Boolean(vertexColors),
     resolution: [size.width, size.height],
-    linewidth: linewidth !== null && linewidth !== void 0 ? linewidth : lineWidth,
+    linewidth: (_ref = linewidth !== null && linewidth !== void 0 ? linewidth : lineWidth) !== null && _ref !== void 0 ? _ref : 1,
     dashed: dashed,
     transparent: itemSize === 4
   }, rest)));

package/core/useFBO.d.ts

@@ -1,7 +1,22 @@
 import * as THREE from 'three';
+import { TextureEncoding } from '../helpers/deprecated';
+type ColorSpace = 'srgb' | 'srgb-linear' | '' | string;
 type FBOSettings = {
     samples?: number;
     depth?: boolean;
-} & THREE.WebGLRenderTargetOptions;
+    wrapS?: THREE.Wrapping | undefined;
+    wrapT?: THREE.Wrapping | undefined;
+    magFilter?: THREE.MagnificationTextureFilter | undefined;
+    minFilter?: THREE.MinificationTextureFilter | undefined;
+    format?: number | undefined;
+    type?: THREE.TextureDataType | undefined;
+    anisotropy?: number | undefined;
+    depthBuffer?: boolean | undefined;
+    stencilBuffer?: boolean | undefined;
+    generateMipmaps?: boolean | undefined;
+    depthTexture?: THREE.DepthTexture | undefined;
+    encoding?: TextureEncoding | undefined;
+    colorSpace?: ColorSpace | undefined;
+};
 export declare function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings): THREE.WebGLRenderTarget;
 export {};

package/core/useFBO.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 
+// TODO: consume this from three >r154 when SemVer allows
+
 // 👇 uncomment when TS version supports function overloads
 // export function useFBO(settings?: FBOSettings)
 function useFBO( /** Width in pixels, or settings (will render fullscreen by default) */

package/helpers/deprecated.d.ts

@@ -1,3 +1,4 @@
+import * as THREE from 'three';
 export declare const setUpdateRange: (attribute: THREE.BufferAttribute, updateRange: {
     offset: number;
     count: number;