@react-three/drei 9.7.1 → 9.8.1

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)
@@ -1770,7 +1801,7 @@ return (
   <a href="https://codesandbox.io/s/0z8i2c"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/0z8i2c/screenshot.png" alt="Demo"/></a>  
 </p>
 
-This component allows you to render a live scene into a texture which you can then apply to a material. The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, events, environment maps, etc.
+This component allows you to render a live scene into a texture which you can then apply to a material. The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.
 
 ```tsx
 <RenderTexture
@@ -1793,7 +1824,7 @@ This component allows you to render a live scene into a texture which you can th
 <mesh>
   <planeGeometry />
   <meshStandardMaterial>
-    <RenderTexture attach="map" encoding={THREE.sRGBEncoding}>
+    <RenderTexture attach="map">
       <mesh />
 ```
 

package/core/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("nanoid");var s=c(e),l=i(r),u=i(t);const f=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:u,toneMapped:m,transparent:v,...d},g)=>{n.extend({ImageMaterial:f});const p=n.useThree((e=>e.gl)),y=Array.isArray(a)?[a[0],a[1]]:[a,a],x=[u.image.width,u.image.height];return l.createElement("mesh",s.default({ref:g,scale:a},d),l.createElement("planeGeometry",{args:[1,1,t,t]}),l.createElement("imageMaterial",{color:r,map:u,"map-encoding":p.outputEncoding,zoom:o,grayscale:c,opacity:i,scale:y,imageBounds:x,toneMapped:m,transparent:v}),e)})),v=l.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return l.createElement(m,s.default({},r,{texture:n,ref:t}))})),d=l.forwardRef((({url:e,...r},t)=>l.createElement(m,s.default({},r,{ref:t})))),g=l.forwardRef(((e,r)=>{if(e.url)return l.createElement(v,s.default({},e,{ref:r}));if(e.texture)return l.createElement(d,s.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(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 s=c(e),l=i(r),u=i(t);const f=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:u,toneMapped:m,transparent:v,...d},g)=>{n.extend({ImageMaterial:f});const p=n.useThree((e=>e.gl)),y=Array.isArray(a)?[a[0],a[1]]:[a,a],x=[u.image.width,u.image.height];return l.createElement("mesh",s.default({ref:g,scale:a},d),l.createElement("planeGeometry",{args:[1,1,t,t]}),l.createElement("imageMaterial",{color:r,map:u,"map-encoding":p.outputEncoding,zoom:o,grayscale:c,opacity:i,scale:y,imageBounds:x,toneMapped:m,transparent:v}),e)})),v=l.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return l.createElement(m,s.default({},r,{texture:n,ref:t}))})),d=l.forwardRef((({url:e,...r},t)=>l.createElement(m,s.default({},r,{ref:t})))),g=l.forwardRef(((e,r)=>{if(e.url)return l.createElement(v,s.default({},e,{ref:r}));if(e.texture)return l.createElement(d,s.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;

package/core/RenderTexture.js

@@ -33,10 +33,13 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
       parent = parent.__r3f.parent;
     }
 
-    if (!parent) return false;
-    if (!previous.raycaster.camera) previous.events.compute(event, previous, (_previous$previousRoo = previous.previousRoot) == null ? void 0 : _previous$previousRoo.getState());
+    if (!parent) return false; // First we call the previous state-onion-layers compute, this is what makes it possible to nest portals
+
+    if (!previous.raycaster.camera) previous.events.compute(event, previous, (_previous$previousRoo = previous.previousRoot) == null ? void 0 : _previous$previousRoo.getState()); // We run a quick check against the parent, if it isn't hit there's no need to raycast at all
+
     const [intersection] = previous.raycaster.intersectObject(parent);
-    if (!intersection) return false;
+    if (!intersection) return false; // We take that hits uv coords, set up this layers raycaster, et voilà, we have raycasting on arbitrary surfaces
+
     const uv = intersection.uv;
     state.raycaster.setFromCamera(state.pointer.set(uv.x * 2 - 1, uv.y * 2 - 1), state.camera);
   }, []);
@@ -53,7 +56,9 @@ const RenderTexture = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React.createElement("primitive", _extends({
     object: fbo.texture
   }, props)));
-});
+}); // The container component has to be separate, it can not be inlined because "useFrame(state" when run inside createPortal will return
+// the portals own state which includes user-land overrides (custom cameras etc), but if it is executed in <RenderTexture>'s render function
+// it would return the default state.
 
 function Container({
   frames,

package/core/Sparkles.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"),o=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js");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 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)}require("nanoid");var s=a(e),l=n(t),c=n(r);const u=i.shaderMaterial({time:0,pixelRatio:1},"#define GLSLIFY 1\nuniform float pixelRatio;uniform float time;attribute float size;attribute float speed;attribute float opacity;attribute vec3 noise;attribute vec3 color;varying vec3 vColor;varying float vOpacity;void main(){vec4 modelPosition=modelMatrix*vec4(position,1.0);modelPosition.y+=sin(time*speed+modelPosition.x*noise.x*100.0)*0.2;modelPosition.z+=cos(time*speed+modelPosition.x*noise.y*100.0)*0.2;modelPosition.x+=cos(time*speed+modelPosition.x*noise.z*100.0)*0.2;vec4 viewPosition=viewMatrix*modelPosition;vec4 projectionPostion=projectionMatrix*viewPosition;gl_Position=projectionPostion;gl_PointSize=size*25.*pixelRatio;gl_PointSize*=(1.0/-viewPosition.z);vColor=color;vOpacity=opacity;}","#define GLSLIFY 1\nvarying vec3 vColor;varying float vOpacity;void main(){float distanceToCenter=distance(gl_PointCoord,vec2(0.5));float strength=0.05/distanceToCenter-0.1;gl_FragColor=vec4(vColor,strength*vOpacity);}"),f=e=>e&&e.constructor===Float32Array,m=e=>e instanceof c.Vector2||e instanceof c.Vector3||e instanceof c.Vector4,d=e=>Array.isArray(e)?e:m(e)?e.toArray():[e,e,e];function p(e,t,r){return l.useMemo((()=>{if(void 0!==t){if(f(t))return t;if(t instanceof c.Color){const r=Array.from({length:3*e},(()=>{return[(e=t).r,e.g,e.b];var e})).flat();return Float32Array.from(r)}if(m(t)||Array.isArray(t)){const r=Array.from({length:3*e},(()=>d(t))).flat();return Float32Array.from(r)}return Float32Array.from({length:e},(()=>t))}return Float32Array.from({length:e},r)}),[t])}const v=l.forwardRef((({noise:e=1,count:t=100,speed:r=1,opacity:i=1,scale:a=1,size:n,color:m,...v},b)=>{l.useMemo((()=>o.extend({SparklesMaterial:u})),[]);const y=l.useRef(),g=o.useThree((e=>e.viewport.dpr)),h=l.useMemo((()=>Float32Array.from(Array.from({length:t},(()=>d(a).map(c.MathUtils.randFloatSpread))).flat())),[t,a]),A=p(t,n,Math.random),P=p(t,i),x=p(t,r),M=p(3*t,e),j=p(void 0===m?3*t:t,f(m)?m:new c.Color(m),(()=>1));return o.useFrame((e=>y.current.uniforms.time.value=e.clock.elapsedTime)),l.createElement("points",s.default({key:`particle-${t}-${JSON.stringify(a)}`},v,{ref:b}),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",args:[h,3]}),l.createElement("bufferAttribute",{attach:"attributes-size",args:[A,1]}),l.createElement("bufferAttribute",{attach:"attributes-opacity",args:[P,1]}),l.createElement("bufferAttribute",{attach:"attributes-speed",args:[x,1]}),l.createElement("bufferAttribute",{attach:"attributes-color",args:[j,3]}),l.createElement("bufferAttribute",{attach:"attributes-noise",args:[M,3]})),l.createElement("sparklesMaterial",{ref:y,transparent:!0,pixelRatio:g,depthWrite:!1}))}));exports.Sparkles=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js");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 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 s=a(e),l=n(t),c=n(r);const u=i.shaderMaterial({time:0,pixelRatio:1},"#define GLSLIFY 1\nuniform float pixelRatio;uniform float time;attribute float size;attribute float speed;attribute float opacity;attribute vec3 noise;attribute vec3 color;varying vec3 vColor;varying float vOpacity;void main(){vec4 modelPosition=modelMatrix*vec4(position,1.0);modelPosition.y+=sin(time*speed+modelPosition.x*noise.x*100.0)*0.2;modelPosition.z+=cos(time*speed+modelPosition.x*noise.y*100.0)*0.2;modelPosition.x+=cos(time*speed+modelPosition.x*noise.z*100.0)*0.2;vec4 viewPosition=viewMatrix*modelPosition;vec4 projectionPostion=projectionMatrix*viewPosition;gl_Position=projectionPostion;gl_PointSize=size*25.*pixelRatio;gl_PointSize*=(1.0/-viewPosition.z);vColor=color;vOpacity=opacity;}","#define GLSLIFY 1\nvarying vec3 vColor;varying float vOpacity;void main(){float distanceToCenter=distance(gl_PointCoord,vec2(0.5));float strength=0.05/distanceToCenter-0.1;gl_FragColor=vec4(vColor,strength*vOpacity);}"),f=e=>e&&e.constructor===Float32Array,m=e=>e instanceof c.Vector2||e instanceof c.Vector3||e instanceof c.Vector4,d=e=>Array.isArray(e)?e:m(e)?e.toArray():[e,e,e];function p(e,t,r){return l.useMemo((()=>{if(void 0!==t){if(f(t))return t;if(t instanceof c.Color){const r=Array.from({length:3*e},(()=>{return[(e=t).r,e.g,e.b];var e})).flat();return Float32Array.from(r)}if(m(t)||Array.isArray(t)){const r=Array.from({length:3*e},(()=>d(t))).flat();return Float32Array.from(r)}return Float32Array.from({length:e},(()=>t))}return Float32Array.from({length:e},r)}),[t])}const v=l.forwardRef((({noise:e=1,count:t=100,speed:r=1,opacity:i=1,scale:a=1,size:n,color:m,...v},b)=>{l.useMemo((()=>o.extend({SparklesMaterial:u})),[]);const y=l.useRef(),g=o.useThree((e=>e.viewport.dpr)),h=l.useMemo((()=>Float32Array.from(Array.from({length:t},(()=>d(a).map(c.MathUtils.randFloatSpread))).flat())),[t,a]),A=p(t,n,Math.random),P=p(t,i),x=p(t,r),M=p(3*t,e),j=p(void 0===m?3*t:t,f(m)?m:new c.Color(m),(()=>1));return o.useFrame((e=>y.current.uniforms.time.value=e.clock.elapsedTime)),l.createElement("points",s.default({key:`particle-${t}-${JSON.stringify(a)}`},v,{ref:b}),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",args:[h,3]}),l.createElement("bufferAttribute",{attach:"attributes-size",args:[A,1]}),l.createElement("bufferAttribute",{attach:"attributes-opacity",args:[P,1]}),l.createElement("bufferAttribute",{attach:"attributes-speed",args:[x,1]}),l.createElement("bufferAttribute",{attach:"attributes-color",args:[j,3]}),l.createElement("bufferAttribute",{attach:"attributes-noise",args:[M,3]})),l.createElement("sparklesMaterial",{ref:y,transparent:!0,pixelRatio:g,depthWrite:!1}))}));exports.Sparkles=v;

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("nanoid"),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';
@@ -91,7 +92,6 @@ import 'three';
 import 'three-stdlib';
 import 'troika-three-text';
 import 'suspend-react';
-import 'nanoid';
 import 'meshline';
 import 'lodash.pick';
 import 'lodash.omit';

package/core/shaderMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("nanoid");function t(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 n=t(e);exports.shaderMaterial=function(e,t,i,s){const u=class extends n.ShaderMaterial{constructor(){const r=Object.entries(e);super({uniforms:r.reduce(((e,[r,t])=>({...e,...n.UniformsUtils.clone({[r]:{value:t}})})),{}),vertexShader:t,fragmentShader:i}),this.key="",r.forEach((([e])=>Object.defineProperty(this,e,{get:()=>this.uniforms[e].value,set:r=>this.uniforms[e].value=r}))),s&&s(this)}};return u.key=r.nanoid(),u};
+"use strict";function e(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)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("three"));exports.shaderMaterial=function(e,r,n,s){const i=class extends t.ShaderMaterial{constructor(){const i=Object.entries(e);super({uniforms:i.reduce(((e,[r,n])=>({...e,...t.UniformsUtils.clone({[r]:{value:n}})})),{}),vertexShader:r,fragmentShader:n}),this.key="",i.forEach((([e])=>Object.defineProperty(this,e,{get:()=>this.uniforms[e].value,set:t=>this.uniforms[e].value=t}))),s&&s(this)}};return i.key=t.MathUtils.generateUUID(),i};

package/core/shaderMaterial.js

@@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import { nanoid } from 'nanoid';
 
 function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
   const material = class material extends THREE.ShaderMaterial {
@@ -30,7 +29,7 @@ function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
     }
 
   };
-  material.key = nanoid();
+  material.key = THREE.MathUtils.generateUUID();
   return material;
 }
 

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(() => {