@react-three/drei 9.7.2 → 9.8.2

package/README.md

@@ -56,6 +56,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
         <ul>
           <li><a href="#image">Image</a></li>
           <li><a href="#text">Text</a></li>
+          <li><a href="#text3d">Text3D</a></li>
           <li><a href="#line">Line</a></li>
           <li><a href="#quadraticbezierline">QuadraticBezierLine</a></li>
           <li><a href="#cubicbezierline">CubicBezierLine</a></li>
@@ -471,6 +472,23 @@ Text will suspend while loading the font data, but in order to completely avoid
 </Text>
 ```
 
+#### Text3D
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text3d--text-3-d-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
+
+Render 3D text using ThreeJS's `TextGeometry`.
+
+Text3D will suspend while loading the font data, you can also load the font yourself before passing it in. Text3D requires fonts in JSON format generated through (typeface.json)[http://gero3.github.io/facetype.js/] either as a path to a JSON files or a JSON object.
+
+```jsx
+<Text3D font={fontUrl} {...textOptions}>
+  Hello world!
+  <meshNormalMaterial />
+</Text3D>
+```
+
+You can use any material. `textOptions` are options you'd pass to the `TextGeometry` constructor. Find more information about available options [here](https://threejs.org/docs/index.html?q=textg#examples/en/geometries/TextGeometry).
+
 #### Line
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--basic-line)
@@ -1469,6 +1487,19 @@ const props = useTexture({
 return <meshStandardMaterial {...props} />
 ```
 
+Use the `onLoad` callback to set propeties on loaded textures.
+
+```jsx
+const texture = useTexture(url, (texture) => {
+  texture.wrapS = texture.wrapT = THREE.RepeatWrapping
+})
+
+const [texture1, texture2] = useTexture([texture1, texture2], ([texture1, texture2]) => {
+  texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping
+  texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping
+})
+```
+
 #### useKTX2
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-ktx2--use-ktx-2-scene-st)

package/core/Effects.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"),s=require("react-merge-refs");function c(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 l=c(e),o=u(r),i=c(s);const d=o.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:c,disableGamma:u,disableRenderPass:d,encoding:f,type:h,...p},m)=>{o.useMemo((()=>a.extend({EffectComposer:n.EffectComposer,RenderPass:n.RenderPass,ShaderPass:n.ShaderPass})),[]);const g=o.useRef(),{scene:b,camera:y,gl:E,size:v,viewport:P}=a.useThree(),[R]=o.useState((()=>{const e=new t.WebGLRenderTarget(v.width,v.height,{type:h||t.HalfFloatType,format:t.RGBAFormat,encoding:f||E.outputEncoding});return e.samples=r,e}));o.useEffect((()=>{var e,r;null==(e=g.current)||e.setSize(v.width,v.height),null==(r=g.current)||r.setPixelRatio(P.dpr)}),[E,v,P.dpr]),a.useFrame((()=>{var e;c||null==(e=g.current)||e.render()}),s);const w=[];return d||w.push(o.createElement("renderPass",{key:"renderpass",attach:`passes-${w.length}`,args:[b,y]})),u||w.push(o.createElement("shaderPass",{attach:`passes-${w.length}`,key:"gammapass",args:[n.GammaCorrectionShader]})),o.Children.forEach(e,(e=>w.push(o.cloneElement(e,{key:w.length,attach:`passes-${w.length}`})))),o.createElement("effectComposer",l.default({ref:i.default([m,g]),args:[E,R]},p),w)}));exports.Effects=d,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!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"),s=require("react-merge-refs");function u(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 o=u(e),i=c(r),l=u(s);const d=i.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:u,disableGamma:c,disableRenderPass:d,depthBuffer:f=!0,stencilBuffer:p=!1,anisotropy:h=1,encoding:m,type:g,...b},y)=>{i.useMemo((()=>a.extend({EffectComposer:n.EffectComposer,RenderPass:n.RenderPass,ShaderPass:n.ShaderPass})),[]);const E=i.useRef(),{scene:v,camera:P,gl:R,size:w,viewport:x}=a.useThree(),[j]=i.useState((()=>{const e=new t.WebGLRenderTarget(w.width,w.height,{type:g||t.HalfFloatType,format:t.RGBAFormat,encoding:m||R.outputEncoding,depthBuffer:f,stencilBuffer:p,anisotropy:h});return e.samples=r,e}));i.useEffect((()=>{var e,r;null==(e=E.current)||e.setSize(w.width,w.height),null==(r=E.current)||r.setPixelRatio(x.dpr)}),[R,w,x.dpr]),a.useFrame((()=>{var e;u||null==(e=E.current)||e.render()}),s);const C=[];return d||C.push(i.createElement("renderPass",{key:"renderpass",attach:`passes-${C.length}`,args:[v,P]})),c||C.push(i.createElement("shaderPass",{attach:`passes-${C.length}`,key:"gammapass",args:[n.GammaCorrectionShader]})),i.Children.forEach(e,(e=>C.push(i.cloneElement(e,{key:C.length,attach:`passes-${C.length}`})))),i.createElement("effectComposer",o.default({ref:l.default([y,E]),args:[R,j]},b),C)}));exports.Effects=d,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}};

package/core/Effects.d.ts

@@ -20,4 +20,7 @@ export declare const Effects: React.ForwardRefExoticComponent<Pick<ReactThreeFib
     disableGamma?: boolean | undefined;
     disableRenderPass?: boolean | undefined;
     disableRender?: boolean | undefined;
-}, "attach" | "args" | "children" | "key" | "onUpdate" | "type" | keyof EffectComposer<WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableRender" | "disableGamma" | "disableRenderPass" | "encoding"> & React.RefAttributes<unknown>>;
+    depthBuffer?: boolean | undefined;
+    stencilBuffer?: boolean | undefined;
+    anisotropy?: number | undefined;
+}, "attach" | "args" | "children" | "key" | "onUpdate" | "type" | keyof EffectComposer<WebGLRenderTarget> | "multisamping" | "renderIndex" | "disableRender" | "disableGamma" | "disableRenderPass" | "depthBuffer" | "stencilBuffer" | "anisotropy" | "encoding"> & React.RefAttributes<unknown>>;

package/core/Effects.js

@@ -20,6 +20,9 @@ const Effects = /*#__PURE__*/React.forwardRef(({
   disableRender,
   disableGamma,
   disableRenderPass,
+  depthBuffer = true,
+  stencilBuffer = false,
+  anisotropy = 1,
   encoding,
   type,
   ...props
@@ -41,7 +44,10 @@ const Effects = /*#__PURE__*/React.forwardRef(({
     const t = new WebGLRenderTarget(size.width, size.height, {
       type: type || HalfFloatType,
       format: RGBAFormat,
-      encoding: encoding || gl.outputEncoding
+      encoding: encoding || gl.outputEncoding,
+      depthBuffer,
+      stencilBuffer,
+      anisotropy
     });
     t.samples = multisamping;
     return t;

package/core/SpotLight.d.ts

@@ -26,5 +26,5 @@ declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@reac
     radiusBottom?: number | undefined;
     opacity?: number | undefined;
     color?: string | 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 | "distance" | "opacity" | "decay" | "target" | "angle" | "attenuation" | "penumbra" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "depthBuffer" | "isSpotLight" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
+}, "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 | "distance" | "opacity" | "decay" | "target" | "angle" | "depthBuffer" | "attenuation" | "penumbra" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "isSpotLight" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
 export { SpotLight };

package/core/Text3D.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("@react-three/fiber"),n=require("suspend-react"),a=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 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),f=u(t);const l=["string","number"],c=f.forwardRef((({font:e,loader:n,size:o=1,height:u=.2,bevelThickness:c=.1,bevelSize:i=.01,bevelEnabled:d=!1,bevelOffset:b=0,curveSegments:m=8,children:v,...h},p)=>{f.useMemo((()=>{r.extend({RenamedTextGeometry:a.TextGeometry})}),[]);const y=f.useMemo((()=>n.parse(e)),[e]),g=t.useMemo((()=>({font:y,size:o,height:u,bevelThickness:c,bevelSize:i,bevelEnabled:d,bevelOffset:b,curveSegments:m})),[y,o,u,c,i,d,b,m]),O=t.useMemo((()=>(e=>{let t="";return f.Children.map(e,(e=>{l.includes(typeof e)&&(t+=e+"")})),t})(v)),[v]),j=f.useMemo((()=>[O,g]),[O,g]);return f.createElement("mesh",s.default({},h,{ref:p}),f.createElement("renamedTextGeometry",{args:j}),v)})),i=f.forwardRef((({font:e,loader:t,...r},a)=>{const o=n.suspend((async()=>await(await fetch(e)).json()),[e]);return f.createElement(c,s.default({},r,{ref:a,font:o,loader:t}))})),d=f.forwardRef(((e,t)=>{const r=f.useMemo((()=>new a.FontLoader),[]);return"string"==typeof e.font?f.createElement(i,s.default({},e,{ref:t,loader:r})):f.createElement(c,s.default({},e,{ref:t,loader:r}))}));exports.Text3D=d;

package/core/Text3D.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { MeshProps, Node } from '@react-three/fiber';
+import { TextGeometryParameters } from 'three-stdlib';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            renamedTextGeometry: Node<any, any>;
+        }
+    }
+}
+declare type Glyph = {
+    _cachedOutline: string[];
+    ha: number;
+    o: string;
+};
+declare type FontData = {
+    boundingBox: {
+        yMax: number;
+        yMin: number;
+    };
+    familyName: string;
+    glyphs: {
+        [k: string]: Glyph;
+    };
+    resolution: number;
+    underlineThickness: number;
+};
+declare type Text3DProps = {
+    font: FontData | string;
+} & Omit<TextGeometryParameters, 'font'> & MeshProps;
+export declare const Text3D: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Text3DProps>, "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 | "size" | "font" | "material" | "height" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "bevelEnabled" | "bevelOffset" | "bevelSize" | "bevelThickness" | "curveSegments"> & React.RefAttributes<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export {};

package/core/Text3D.js

@@ -0,0 +1,98 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { extend } from '@react-three/fiber';
+import { suspend } from 'suspend-react';
+import { FontLoader, TextGeometry } from 'three-stdlib';
+
+const types = ['string', 'number'];
+
+const getTextFromChildren = children => {
+  let label = '';
+  React.Children.map(children, child => {
+    if (types.includes(typeof child)) {
+      label += child + '';
+    }
+  });
+  return label;
+};
+
+const Text3DBase = /*#__PURE__*/React.forwardRef(({
+  font,
+  loader,
+  size = 1,
+  height = 0.2,
+  bevelThickness = 0.1,
+  bevelSize = 0.01,
+  bevelEnabled = false,
+  bevelOffset = 0,
+  curveSegments = 8,
+  children,
+  ...props
+}, ref) => {
+  React.useMemo(() => {
+    extend({
+      RenamedTextGeometry: TextGeometry
+    });
+  }, []);
+
+  const _font = React.useMemo(() => loader.parse(font), [font]);
+
+  const opts = useMemo(() => {
+    return {
+      font: _font,
+      size,
+      height,
+      bevelThickness,
+      bevelSize,
+      bevelEnabled,
+      bevelOffset,
+      curveSegments
+    };
+  }, [_font, size, height, bevelThickness, bevelSize, bevelEnabled, bevelOffset, curveSegments]);
+  /**
+   * We need the `children` in the deps because we
+   * need to be able to do `<Text3d>{state}</Text3d>`.
+   */
+
+  const txt = useMemo(() => getTextFromChildren(children), [children]);
+  const args = React.useMemo(() => [txt, opts], [txt, opts]);
+  return /*#__PURE__*/React.createElement("mesh", _extends({}, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("renamedTextGeometry", {
+    args: args
+  }), children);
+});
+const Text3DSuspend = /*#__PURE__*/React.forwardRef(({
+  font,
+  loader,
+  ...props
+}, ref) => {
+  const _font = suspend(async () => {
+    const json = await (await fetch(font)).json();
+    return json;
+  }, [font]);
+
+  return /*#__PURE__*/React.createElement(Text3DBase, _extends({}, props, {
+    ref: ref,
+    font: _font,
+    loader: loader
+  }));
+});
+const Text3D = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const loader = React.useMemo(() => new FontLoader(), []);
+
+  if (typeof props.font === 'string') {
+    return /*#__PURE__*/React.createElement(Text3DSuspend, _extends({}, props, {
+      ref: ref,
+      loader: loader
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(Text3DBase, _extends({}, props, {
+      ref: ref,
+      loader: loader
+    }));
+  }
+});
+
+export { Text3D };

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),n=require("./Image.cjs.js"),j=require("./Edges.cjs.js"),p=require("./Trail.cjs.js"),c=require("./Sampler.cjs.js"),x=require("./ComputedAttribute.cjs.js"),l=require("./Clone.cjs.js"),q=require("./OrthographicCamera.cjs.js"),d=require("./PerspectiveCamera.cjs.js"),m=require("./CubeCamera.cjs.js"),C=require("./DeviceOrientationControls.cjs.js"),h=require("./FlyControls.cjs.js"),b=require("./MapControls.cjs.js"),S=require("./OrbitControls.cjs.js"),B=require("./TrackballControls.cjs.js"),P=require("./ArcballControls.cjs.js"),T=require("./TransformControls.cjs.js"),M=require("./PointerLockControls.cjs.js"),f=require("./FirstPersonControls.cjs.js"),g=require("./GizmoHelper.cjs.js"),v=require("./GizmoViewcube.cjs.js"),E=require("./GizmoViewport.cjs.js"),L=require("./useCubeTexture.cjs.js"),A=require("./useFBX.cjs.js"),k=require("./useGLTF.cjs.js"),G=require("./useProgress.cjs.js"),D=require("./useTexture.cjs.js"),F=require("./useKTX2.cjs.js"),O=require("./Stats.cjs.js"),w=require("./useDepthBuffer.cjs.js"),z=require("./useAspect.cjs.js"),I=require("./useCamera.cjs.js"),R=require("./useDetectGPU.cjs.js"),y=require("./useHelper.cjs.js"),H=require("./useBVH.cjs.js"),V=require("./useContextBridge.cjs.js"),Q=require("./useAnimations.cjs.js"),X=require("./useFBO.cjs.js"),K=require("./useIntersect.cjs.js"),W=require("./useBoxProjectedEnv.cjs.js"),N=require("./CurveModifier.cjs.js"),U=require("./MeshDistortMaterial.cjs.js"),_=require("./MeshWobbleMaterial.cjs.js"),J=require("./MeshReflectorMaterial.cjs.js"),Y=require("./PointMaterial.cjs.js"),Z=require("./shaderMaterial.cjs.js"),$=require("./softShadows.cjs.js"),ee=require("./shapes.cjs.js"),re=require("./RoundedBox.cjs.js"),se=require("./ScreenQuad.cjs.js"),te=require("./Center.cjs.js"),oe=require("./Bounds.cjs.js"),ie=require("./CameraShake.cjs.js"),ue=require("./Float.cjs.js"),ae=require("./Stage.cjs.js"),ne=require("./Backdrop.cjs.js"),je=require("./Shadow.cjs.js"),pe=require("./ContactShadows.cjs.js"),ce=require("./Reflector.cjs.js"),xe=require("./SpotLight.cjs.js"),le=require("./Environment.cjs.js"),qe=require("./Lightformer.cjs.js"),de=require("./Sky.cjs.js"),me=require("./Stars.cjs.js"),Ce=require("./Cloud.cjs.js"),he=require("./Sparkles.cjs.js"),be=require("./useMatcapTexture.cjs.js"),Se=require("./useNormalTexture.cjs.js"),Be=require("./Points.cjs.js"),Pe=require("./Instances.cjs.js"),Te=require("./Segments.cjs.js"),Me=require("./Detailed.cjs.js"),fe=require("./Preload.cjs.js"),ge=require("./BakeShadows.cjs.js"),ve=require("./meshBounds.cjs.js"),Ee=require("./AdaptiveDpr.cjs.js"),Le=require("./AdaptiveEvents.cjs.js"),Ae=require("./RenderTexture.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=n.Image,exports.Edges=j.Edges,exports.Trail=p.Trail,exports.useTrail=p.useTrail,exports.Sampler=c.Sampler,exports.ComputedAttribute=x.ComputedAttribute,exports.Clone=l.Clone,exports.OrthographicCamera=q.OrthographicCamera,exports.PerspectiveCamera=d.PerspectiveCamera,exports.CubeCamera=m.CubeCamera,exports.DeviceOrientationControls=C.DeviceOrientationControls,exports.FlyControls=h.FlyControls,exports.MapControls=b.MapControls,exports.OrbitControls=S.OrbitControls,exports.TrackballControls=B.TrackballControls,exports.ArcballControls=P.ArcballControls,exports.TransformControls=T.TransformControls,exports.PointerLockControls=M.PointerLockControls,exports.FirstPersonControls=f.FirstPersonControls,exports.GizmoHelper=g.GizmoHelper,exports.useGizmoContext=g.useGizmoContext,exports.GizmoViewcube=v.GizmoViewcube,exports.GizmoViewport=E.GizmoViewport,exports.useCubeTexture=L.useCubeTexture,exports.useFBX=A.useFBX,exports.useGLTF=k.useGLTF,exports.useProgress=G.useProgress,exports.IsObject=D.IsObject,exports.useTexture=D.useTexture,exports.useKTX2=F.useKTX2,exports.Stats=O.Stats,exports.useDepthBuffer=w.useDepthBuffer,exports.useAspect=z.useAspect,exports.useCamera=I.useCamera,exports.useDetectGPU=R.useDetectGPU,exports.useHelper=y.useHelper,exports.useBVH=H.useBVH,exports.useContextBridge=V.useContextBridge,exports.useAnimations=Q.useAnimations,exports.useFBO=X.useFBO,exports.useIntersect=K.useIntersect,exports.useBoxProjectedEnv=W.useBoxProjectedEnv,exports.CurveModifier=N.CurveModifier,exports.MeshDistortMaterial=U.MeshDistortMaterial,exports.MeshWobbleMaterial=_.MeshWobbleMaterial,exports.MeshReflectorMaterial=J.MeshReflectorMaterial,exports.PointMaterial=Y.PointMaterial,exports.PointMaterialImpl=Y.PointMaterialImpl,exports.shaderMaterial=Z.shaderMaterial,exports.softShadows=$.softShadows,exports.Box=ee.Box,exports.Circle=ee.Circle,exports.Cone=ee.Cone,exports.Cylinder=ee.Cylinder,exports.Dodecahedron=ee.Dodecahedron,exports.Extrude=ee.Extrude,exports.Icosahedron=ee.Icosahedron,exports.Lathe=ee.Lathe,exports.Octahedron=ee.Octahedron,exports.Plane=ee.Plane,exports.Polyhedron=ee.Polyhedron,exports.Ring=ee.Ring,exports.Sphere=ee.Sphere,exports.Tetrahedron=ee.Tetrahedron,exports.Torus=ee.Torus,exports.TorusKnot=ee.TorusKnot,exports.Tube=ee.Tube,exports.RoundedBox=re.RoundedBox,exports.ScreenQuad=se.ScreenQuad,exports.Center=te.Center,exports.Bounds=oe.Bounds,exports.useBounds=oe.useBounds,exports.CameraShake=ie.CameraShake,exports.Float=ue.Float,exports.Stage=ae.Stage,exports.Backdrop=ne.Backdrop,exports.Shadow=je.Shadow,exports.ContactShadows=pe.ContactShadows,exports.Reflector=ce.Reflector,exports.SpotLight=xe.SpotLight,exports.Environment=le.Environment,exports.EnvironmentCube=le.EnvironmentCube,exports.EnvironmentMap=le.EnvironmentMap,exports.EnvironmentPortal=le.EnvironmentPortal,exports.useEnvironment=le.useEnvironment,exports.Lightformer=qe.Lightformer,exports.Sky=de.Sky,exports.calcPosFromAngles=de.calcPosFromAngles,exports.Stars=me.Stars,exports.Cloud=Ce.Cloud,exports.Sparkles=he.Sparkles,exports.useMatcapTexture=be.useMatcapTexture,exports.useNormalTexture=Se.useNormalTexture,exports.Point=Be.Point,exports.Points=Be.Points,exports.PointsBuffer=Be.PointsBuffer,exports.Instance=Pe.Instance,exports.Instances=Pe.Instances,exports.Merged=Pe.Merged,exports.Segment=Te.Segment,exports.SegmentObject=Te.SegmentObject,exports.Segments=Te.Segments,exports.Detailed=Me.Detailed,exports.Preload=fe.Preload,exports.BakeShadows=ge.BakeShadows,exports.meshBounds=ve.meshBounds,exports.AdaptiveDpr=Ee.AdaptiveDpr,exports.AdaptiveEvents=Le.AdaptiveEvents,exports.RenderTexture=Ae.RenderTexture;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Text3D.cjs.js"),a=require("./Effects.cjs.js"),n=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),p=require("./Edges.cjs.js"),c=require("./Trail.cjs.js"),x=require("./Sampler.cjs.js"),l=require("./ComputedAttribute.cjs.js"),q=require("./Clone.cjs.js"),d=require("./OrthographicCamera.cjs.js"),m=require("./PerspectiveCamera.cjs.js"),C=require("./CubeCamera.cjs.js"),h=require("./DeviceOrientationControls.cjs.js"),b=require("./FlyControls.cjs.js"),S=require("./MapControls.cjs.js"),B=require("./OrbitControls.cjs.js"),T=require("./TrackballControls.cjs.js"),P=require("./ArcballControls.cjs.js"),M=require("./TransformControls.cjs.js"),f=require("./PointerLockControls.cjs.js"),g=require("./FirstPersonControls.cjs.js"),v=require("./GizmoHelper.cjs.js"),E=require("./GizmoViewcube.cjs.js"),L=require("./GizmoViewport.cjs.js"),A=require("./useCubeTexture.cjs.js"),k=require("./useFBX.cjs.js"),D=require("./useGLTF.cjs.js"),G=require("./useProgress.cjs.js"),F=require("./useTexture.cjs.js"),O=require("./useKTX2.cjs.js"),w=require("./Stats.cjs.js"),z=require("./useDepthBuffer.cjs.js"),I=require("./useAspect.cjs.js"),R=require("./useCamera.cjs.js"),y=require("./useDetectGPU.cjs.js"),H=require("./useHelper.cjs.js"),V=require("./useBVH.cjs.js"),Q=require("./useContextBridge.cjs.js"),X=require("./useAnimations.cjs.js"),K=require("./useFBO.cjs.js"),W=require("./useIntersect.cjs.js"),N=require("./useBoxProjectedEnv.cjs.js"),U=require("./CurveModifier.cjs.js"),_=require("./MeshDistortMaterial.cjs.js"),J=require("./MeshWobbleMaterial.cjs.js"),Y=require("./MeshReflectorMaterial.cjs.js"),Z=require("./PointMaterial.cjs.js"),$=require("./shaderMaterial.cjs.js"),ee=require("./softShadows.cjs.js"),re=require("./shapes.cjs.js"),se=require("./RoundedBox.cjs.js"),te=require("./ScreenQuad.cjs.js"),oe=require("./Center.cjs.js"),ie=require("./Bounds.cjs.js"),ue=require("./CameraShake.cjs.js"),ae=require("./Float.cjs.js"),ne=require("./Stage.cjs.js"),je=require("./Backdrop.cjs.js"),pe=require("./Shadow.cjs.js"),ce=require("./ContactShadows.cjs.js"),xe=require("./Reflector.cjs.js"),le=require("./SpotLight.cjs.js"),qe=require("./Environment.cjs.js"),de=require("./Lightformer.cjs.js"),me=require("./Sky.cjs.js"),Ce=require("./Stars.cjs.js"),he=require("./Cloud.cjs.js"),be=require("./Sparkles.cjs.js"),Se=require("./useMatcapTexture.cjs.js"),Be=require("./useNormalTexture.cjs.js"),Te=require("./Points.cjs.js"),Pe=require("./Instances.cjs.js"),Me=require("./Segments.cjs.js"),fe=require("./Detailed.cjs.js"),ge=require("./Preload.cjs.js"),ve=require("./BakeShadows.cjs.js"),Ee=require("./meshBounds.cjs.js"),Le=require("./AdaptiveDpr.cjs.js"),Ae=require("./AdaptiveEvents.cjs.js"),ke=require("./RenderTexture.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Text3D=u.Text3D,exports.Effects=a.Effects,exports.isWebGL2Available=a.isWebGL2Available,exports.GradientTexture=n.GradientTexture,exports.Image=j.Image,exports.Edges=p.Edges,exports.Trail=c.Trail,exports.useTrail=c.useTrail,exports.Sampler=x.Sampler,exports.ComputedAttribute=l.ComputedAttribute,exports.Clone=q.Clone,exports.OrthographicCamera=d.OrthographicCamera,exports.PerspectiveCamera=m.PerspectiveCamera,exports.CubeCamera=C.CubeCamera,exports.DeviceOrientationControls=h.DeviceOrientationControls,exports.FlyControls=b.FlyControls,exports.MapControls=S.MapControls,exports.OrbitControls=B.OrbitControls,exports.TrackballControls=T.TrackballControls,exports.ArcballControls=P.ArcballControls,exports.TransformControls=M.TransformControls,exports.PointerLockControls=f.PointerLockControls,exports.FirstPersonControls=g.FirstPersonControls,exports.GizmoHelper=v.GizmoHelper,exports.useGizmoContext=v.useGizmoContext,exports.GizmoViewcube=E.GizmoViewcube,exports.GizmoViewport=L.GizmoViewport,exports.useCubeTexture=A.useCubeTexture,exports.useFBX=k.useFBX,exports.useGLTF=D.useGLTF,exports.useProgress=G.useProgress,exports.IsObject=F.IsObject,exports.useTexture=F.useTexture,exports.useKTX2=O.useKTX2,exports.Stats=w.Stats,exports.useDepthBuffer=z.useDepthBuffer,exports.useAspect=I.useAspect,exports.useCamera=R.useCamera,exports.useDetectGPU=y.useDetectGPU,exports.useHelper=H.useHelper,exports.useBVH=V.useBVH,exports.useContextBridge=Q.useContextBridge,exports.useAnimations=X.useAnimations,exports.useFBO=K.useFBO,exports.useIntersect=W.useIntersect,exports.useBoxProjectedEnv=N.useBoxProjectedEnv,exports.CurveModifier=U.CurveModifier,exports.MeshDistortMaterial=_.MeshDistortMaterial,exports.MeshWobbleMaterial=J.MeshWobbleMaterial,exports.MeshReflectorMaterial=Y.MeshReflectorMaterial,exports.PointMaterial=Z.PointMaterial,exports.PointMaterialImpl=Z.PointMaterialImpl,exports.shaderMaterial=$.shaderMaterial,exports.softShadows=ee.softShadows,exports.Box=re.Box,exports.Circle=re.Circle,exports.Cone=re.Cone,exports.Cylinder=re.Cylinder,exports.Dodecahedron=re.Dodecahedron,exports.Extrude=re.Extrude,exports.Icosahedron=re.Icosahedron,exports.Lathe=re.Lathe,exports.Octahedron=re.Octahedron,exports.Plane=re.Plane,exports.Polyhedron=re.Polyhedron,exports.Ring=re.Ring,exports.Sphere=re.Sphere,exports.Tetrahedron=re.Tetrahedron,exports.Torus=re.Torus,exports.TorusKnot=re.TorusKnot,exports.Tube=re.Tube,exports.RoundedBox=se.RoundedBox,exports.ScreenQuad=te.ScreenQuad,exports.Center=oe.Center,exports.Bounds=ie.Bounds,exports.useBounds=ie.useBounds,exports.CameraShake=ue.CameraShake,exports.Float=ae.Float,exports.Stage=ne.Stage,exports.Backdrop=je.Backdrop,exports.Shadow=pe.Shadow,exports.ContactShadows=ce.ContactShadows,exports.Reflector=xe.Reflector,exports.SpotLight=le.SpotLight,exports.Environment=qe.Environment,exports.EnvironmentCube=qe.EnvironmentCube,exports.EnvironmentMap=qe.EnvironmentMap,exports.EnvironmentPortal=qe.EnvironmentPortal,exports.useEnvironment=qe.useEnvironment,exports.Lightformer=de.Lightformer,exports.Sky=me.Sky,exports.calcPosFromAngles=me.calcPosFromAngles,exports.Stars=Ce.Stars,exports.Cloud=he.Cloud,exports.Sparkles=be.Sparkles,exports.useMatcapTexture=Se.useMatcapTexture,exports.useNormalTexture=Be.useNormalTexture,exports.Point=Te.Point,exports.Points=Te.Points,exports.PointsBuffer=Te.PointsBuffer,exports.Instance=Pe.Instance,exports.Instances=Pe.Instances,exports.Merged=Pe.Merged,exports.Segment=Me.Segment,exports.SegmentObject=Me.SegmentObject,exports.Segments=Me.Segments,exports.Detailed=fe.Detailed,exports.Preload=ge.Preload,exports.BakeShadows=ve.BakeShadows,exports.meshBounds=Ee.meshBounds,exports.AdaptiveDpr=Le.AdaptiveDpr,exports.AdaptiveEvents=Ae.AdaptiveEvents,exports.RenderTexture=ke.RenderTexture;

package/core/index.d.ts

@@ -4,6 +4,7 @@ export * from './CubicBezierLine';
 export * from './Line';
 export * from './PositionalAudio';
 export * from './Text';
+export * from './Text3D';
 export * from './Effects';
 export * from './GradientTexture';
 export * from './Image';

package/core/index.js

@@ -4,6 +4,7 @@ export { CubicBezierLine } from './CubicBezierLine.js';
 export { Line } from './Line.js';
 export { PositionalAudio } from './PositionalAudio.js';
 export { Text } from './Text.js';
+export { Text3D } from './Text3D.js';
 export { Effects, isWebGL2Available } from './Effects.js';
 export { GradientTexture } from './GradientTexture.js';
 export { Image } from './Image.js';

package/core/useMatcapTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("suspend-react");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 s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var u=s(e);exports.useMatcapTexture=function(e=0,s=1024){const n=r.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json").then((e=>e.json()))),["matcapList"]),c=n[0],a=u.useMemo((()=>Object.keys(n).length),[]),i=`${u.useMemo((()=>"string"==typeof e?e:"number"==typeof e?n[e]:null),[e])||c}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(s)}.png`,p=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${s}/${i}`;return[t.useTexture(p),p,a]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("suspend-react");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 s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var u=s(e);exports.useMatcapTexture=function(e=0,s=1024,n){const c=r.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json").then((e=>e.json()))),["matcapList"]),a=c[0],i=u.useMemo((()=>Object.keys(c).length),[]),p=`${u.useMemo((()=>"string"==typeof e?e:"number"==typeof e?c[e]:null),[e])||a}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(s)}.png`,o=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${s}/${p}`;return[t.useTexture(o,n),o,i]};

package/core/useMatcapTexture.d.ts

@@ -1 +1,2 @@
-export declare function useMatcapTexture(id?: number | string, format?: number): [THREE.Texture, string, number];
+import { Texture } from 'three';
+export declare function useMatcapTexture(id?: number | string, format?: number, onLoad?: (texture: Texture | Texture[]) => void): [THREE.Texture, string, number];

package/core/useMatcapTexture.js

@@ -23,7 +23,7 @@ function getFormatString(format) {
 
 const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
 const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
-function useMatcapTexture(id = 0, format = 1024) {
+function useMatcapTexture(id = 0, format = 1024, onLoad) {
   const matcapList = suspend(() => fetch(LIST_URL).then(res => res.json()), ['matcapList']);
   const DEFAULT_MATCAP = matcapList[0];
   const numTot = React.useMemo(() => Object.keys(matcapList).length, []);
@@ -38,7 +38,7 @@ function useMatcapTexture(id = 0, format = 1024) {
   }, [id]);
   const fileName = `${fileHash || DEFAULT_MATCAP}${getFormatString(format)}.png`;
   const url = `${MATCAP_ROOT}/${format}/${fileName}`;
-  const matcapTexture = useTexture(url);
+  const matcapTexture = useTexture(url, onLoad);
   return [matcapTexture, url, numTot];
 }
 

package/core/useNormalTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("suspend-react");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 s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var a=n(e);exports.useNormalTexture=function(e=0,n={}){const{repeat:o=[1,1],anisotropy:u=1,offset:c=[0,0]}=n,i=s.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json").then((e=>e.json()))),["normalsList"]),f=a.useMemo((()=>Object.keys(i).length),[]),p=i[0],d=`https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb/normals/${i[e]||p}`,l=r.useTexture(d);return a.useLayoutEffect((()=>{l&&(l.wrapS=l.wrapT=t.RepeatWrapping,l.repeat=new t.Vector2(o[0],o[1]),l.offset=new t.Vector2(c[0],c[1]),l.anisotropy=u)}),[l,u,o,c]),[l,d,f]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("suspend-react");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 s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var a=n(e);exports.useNormalTexture=function(e=0,n={},o){const{repeat:u=[1,1],anisotropy:c=1,offset:i=[0,0]}=n,f=s.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json").then((e=>e.json()))),["normalsList"]),p=a.useMemo((()=>Object.keys(f).length),[]),d=f[0],l=`https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb/normals/${f[e]||d}`,b=r.useTexture(l,o);return a.useLayoutEffect((()=>{b&&(b.wrapS=b.wrapT=t.RepeatWrapping,b.repeat=new t.Vector2(u[0],u[1]),b.offset=new t.Vector2(i[0],i[1]),b.anisotropy=c)}),[b,c,u,i]),[b,l,p]};

package/core/useNormalTexture.d.ts

@@ -4,5 +4,5 @@ declare type Settings = {
     anisotropy?: number;
     offset?: number[];
 };
-export declare function useNormalTexture(id?: number, settings?: Settings): [Texture, string, number];
+export declare function useNormalTexture(id?: number, settings?: Settings, onLoad?: (texture: Texture | Texture[]) => void): [Texture, string, number];
 export {};

package/core/useNormalTexture.js

@@ -5,7 +5,7 @@ import { suspend } from 'suspend-react';
 
 const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
 const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
-function useNormalTexture(id = 0, settings = {}) {
+function useNormalTexture(id = 0, settings = {}, onLoad) {
   const {
     repeat = [1, 1],
     anisotropy = 1,
@@ -16,7 +16,7 @@ function useNormalTexture(id = 0, settings = {}) {
   const DEFAULT_NORMAL = normalsList[0];
   const imageName = normalsList[id] || DEFAULT_NORMAL;
   const url = `${NORMAL_ROOT}/normals/${imageName}`;
-  const normalTexture = useTexture(url);
+  const normalTexture = useTexture(url, onLoad);
   React.useLayoutEffect(() => {
     if (!normalTexture) return;
     normalTexture.wrapS = normalTexture.wrapT = RepeatWrapping;

package/core/useTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const a=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function s(s){const u=r.useThree((e=>e.gl)),o=r.useLoader(e.TextureLoader,a(s)?Object.values(s):s);if(t.useEffect((()=>{(Array.isArray(o)?o:[o]).forEach(u.initTexture)}),[u,o]),a(s)){const e=Object.keys(s),r={};return e.forEach((t=>Object.assign(r,{[t]:o[e.indexOf(t)]}))),r}return o}s.preload=t=>r.useLoader.preload(e.TextureLoader,t),s.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=a,exports.useTexture=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");const u=e=>e===Object(e)&&!Array.isArray(e)&&"function"!=typeof e;function a(a,s){const o=r.useThree((e=>e.gl)),c=r.useLoader(e.TextureLoader,u(a)?Object.values(a):a);if(t.useLayoutEffect((()=>{null==s||s(c)}),[s]),t.useEffect((()=>{(Array.isArray(c)?c:[c]).forEach(o.initTexture)}),[o,c]),u(a)){const e=Object.keys(a),r={};return e.forEach((t=>Object.assign(r,{[t]:c[e.indexOf(t)]}))),r}return c}a.preload=t=>r.useLoader.preload(e.TextureLoader,t),a.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.IsObject=u,exports.useTexture=a;

package/core/useTexture.d.ts

@@ -1,6 +1,6 @@
 import { Texture } from 'three';
 export declare const IsObject: (url: any) => url is Record<string, string>;
-export declare function useTexture<Url extends string[] | string | Record<string, string>>(input: Url): Url extends any[] ? Texture[] : Url extends object ? {
+export declare function useTexture<Url extends string[] | string | Record<string, string>>(input: Url, onLoad?: (texture: Texture | Texture[]) => void): Url extends any[] ? Texture[] : Url extends object ? {
     [key in keyof Url]: Texture;
 } : Texture;
 export declare namespace useTexture {

package/core/useTexture.js

@@ -1,11 +1,14 @@
 import { TextureLoader } from 'three';
 import { useThree, useLoader } from '@react-three/fiber';
-import { useEffect } from 'react';
+import { useLayoutEffect, useEffect } from 'react';
 
 const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
-function useTexture(input) {
+function useTexture(input, onLoad) {
   const gl = useThree(state => state.gl);
-  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input); // https://github.com/mrdoob/three.js/issues/22696
+  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input);
+  useLayoutEffect(() => {
+    onLoad == null ? void 0 : onLoad(textures);
+  }, [onLoad]); // https://github.com/mrdoob/three.js/issues/22696
   // Upload the texture to the GPU immediately instead of waiting for the first render
 
   useEffect(() => {