@react-three/drei 9.80.10 → 9.82.0

package/README.md

@@ -73,6 +73,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#effects">Effects</a></li>
           <li><a href="#gradienttexture">GradientTexture</a></li>
           <li><a href="#edges">Edges</a></li>
+          <li><a href="#outlines">Outlines</a></li>
           <li><a href="#trail">Trail</a></li>
           <li><a href="#sampler">Sampler</a></li>
           <li><a href="#computedattribute">Computed Attribute</a></li>
@@ -968,6 +969,7 @@ A box buffer geometry with rounded corners, done with extrusion.
   args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]
   radius={0.05} // Radius of the rounded corners. Default is 0.05
   smoothness={4} // The number of curve segments. Default is 4
+  bevelSegments={4} // The number of bevel segments. Default is 4, setting it to 0 removes the bevel, as a result the texture is applied to the whole geometry.
   creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle
   {...meshProps} // All THREE.Mesh props are valid
 >
@@ -1395,6 +1397,37 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
 </mesh>
 ```
 
+#### Outlines
+
+<p>
+  <a href="https://codesandbox.io/s/2gh6jf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2gh6jf/screenshot.png" alt="Demo"/></a>
+</p>
+
+An ornamental component that extracts the geometry from its parent and displays an [inverted-hull outline](https://bnpr.gitbook.io/bnpr/outline/inverse-hull-method).
+
+```tsx
+type OutlinesProps = JSX.IntrinsicElements['group'] & {
+  /** Outline color, default: black */
+  color: ReactThreeFiber.Color
+  /** Outline opacity, default: 1 */
+  opacity: number
+  /** Outline transparency, default: false */
+  transparent: boolean
+  /** Outline thickness, default 0.05 */
+  thickness: number
+  /** Geometry crease angle (0 === no crease), default: Math.PI */
+  angle: number
+}
+```
+
+```jsx
+<mesh>
+  <boxGeometry />
+  <meshBasicMaterial />
+  <Outlines thickness={0.05} color="hotpink" />
+</mesh>
+```
+
 #### Trail
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail--use-trail-st)
@@ -3268,7 +3301,7 @@ function App() {
   const [dpr, setDpr] = useState(1.5)
   return (
     <Canvas dpr={dpr}>
-      <PerformanceMonitor onIncline={() => setDpr(2)} onDecline={() => setDpr(1)} >
+      <PerformanceMonitor onIncline={() => setDpr(2)} onDecline={() => setDpr(1)} />
 ```
 
 You can also use the `onChange` callback to get notified when the average changes in whichever direction. This allows you to make gradual changes. It gives you a `factor` between 0 and 1, which is increased by incline and decreased by decline. The `factor` is initially 0.5 by default. If your app starts with lowest defaults and gradually increases quality set `factor` to 0. If it starts with highest defaults and decreases quality, set it to 1. If it starts in the middle and can either increase or decrease, set it to 0.5.
@@ -3278,16 +3311,16 @@ The following starts at the highest dpr (2) and clamps the gradual dpr between 0
 ```jsx
 import round from 'lodash/round'
 
-const [dpr, set] = useState(2)
+const [dpr, setDpr] = useState(2)
 return (
  <Canvas dpr={dpr}>
-  <PerformanceMonitor factor={1} onChange={({ factor }) => setDpr(round(0.5 + 1.5 * factor, 1))} >
+  <PerformanceMonitor factor={1} onChange={({ factor }) => setDpr(round(0.5 + 1.5 * factor, 1))} />
 ```
 
 If you still experience flip flops despite the bounds you can define a limit of `flipflops`. If it is met `onFallback` will be triggered which typically sets a lowest possible baseline for the app. After the fallback has been called PerformanceMonitor will shut down.
 
 ```jsx
-<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)}>
+<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)}/>
 ```
 
 PerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.

package/core/Outlines.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),r=require("react"),t=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var l=a(e),s=c(n),u=c(r);const d=t.shaderMaterial({color:new s.Color("black"),opacity:1,thickness:.05},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   void main() {\n     #if defined (USE_SKINNING)\n\t   #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec3 newPosition = transformed + normal * thickness;\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(s.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:r=!1,thickness:t=.05,angle:a=Math.PI,...c}){const f=u.useRef(null);return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=f.current,n=e.parent;if(n&&n.geometry){let r;return n.skeleton?(r=new s.SkinnedMesh,r.material=new d({side:s.BackSide}),r.bind(n.skeleton,n.bindMatrix),e.add(r)):(r=new s.Mesh,r.material=new d({side:s.BackSide}),e.add(r)),r.geometry=a?o.toCreasedNormals(n.geometry,a):n.geometry,()=>{i.dispose(r),e.clear()}}}),[a]),u.useLayoutEffect((()=>{const o=f.current.children[0];o&&i.applyProps(o.material,{transparent:r,thickness:t,color:e,opacity:n})}),[a,r,t,e,n]),u.createElement("group",l.default({ref:f},c))};

package/core/Outlines.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function Outlines({ color, opacity, transparent, thickness, angle, ...props }: {
+    [x: string]: any;
+    color?: string | undefined;
+    opacity?: number | undefined;
+    transparent?: boolean | undefined;
+    thickness?: number | undefined;
+    angle?: number | undefined;
+}): JSX.Element;

package/core/Outlines.js

@@ -0,0 +1,96 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { shaderMaterial } from './shaderMaterial.js';
+import { extend, dispose, applyProps } from '@react-three/fiber';
+import { toCreasedNormals } from 'three-stdlib';
+
+const OutlinesMaterial = shaderMaterial({
+  color: new THREE.Color('black'),
+  opacity: 1,
+  thickness: 0.05
+}, `#include <common>
+   #include <morphtarget_pars_vertex>
+   #include <skinning_pars_vertex>
+   uniform float thickness;
+   void main() {
+     #if defined (USE_SKINNING)
+	   #include <beginnormal_vertex>
+       #include <morphnormal_vertex>
+       #include <skinbase_vertex>
+       #include <skinnormal_vertex>
+       #include <defaultnormal_vertex>
+     #endif
+     #include <begin_vertex>
+	   #include <morphtarget_vertex>
+	   #include <skinning_vertex>
+     #include <project_vertex>
+     vec3 newPosition = transformed + normal * thickness;
+     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
+   }`, `uniform vec3 color;
+   uniform float opacity;
+   void main(){
+     gl_FragColor = vec4(color, opacity);
+     #include <tonemapping_fragment>
+     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+   }`);
+function Outlines({
+  color = 'black',
+  opacity = 1,
+  transparent = false,
+  thickness = 0.05,
+  angle = Math.PI,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  React.useMemo(() => extend({
+    OutlinesMaterial
+  }), []);
+  React.useLayoutEffect(() => {
+    const group = ref.current;
+    const parent = group.parent;
+
+    if (parent && parent.geometry) {
+      let mesh;
+
+      if (parent.skeleton) {
+        mesh = new THREE.SkinnedMesh();
+        mesh.material = new OutlinesMaterial({
+          side: THREE.BackSide
+        });
+        mesh.bind(parent.skeleton, parent.bindMatrix);
+        group.add(mesh);
+      } else {
+        mesh = new THREE.Mesh();
+        mesh.material = new OutlinesMaterial({
+          side: THREE.BackSide
+        });
+        group.add(mesh);
+      }
+
+      mesh.geometry = angle ? toCreasedNormals(parent.geometry, angle) : parent.geometry;
+      return () => {
+        dispose(mesh);
+        group.clear();
+      };
+    }
+  }, [angle]);
+  React.useLayoutEffect(() => {
+    const group = ref.current;
+    const mesh = group.children[0];
+
+    if (mesh) {
+      applyProps(mesh.material, {
+        transparent,
+        thickness,
+        color,
+        opacity
+      });
+    }
+  }, [angle, transparent, thickness, color, opacity]);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props));
+}
+
+export { Outlines };

package/core/RoundedBox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=a(e),c=s(t);const o=1e-5;const f=c.forwardRef((function({args:[e=1,t=1,a=1]=[],radius:s=.05,steps:f=1,smoothness:l=4,creaseAngle:i=.4,children:b,...d},h){const m=c.useMemo((()=>function(e,t,n){const a=new r.Shape,s=n-o;return a.absarc(o,o,o,-Math.PI/2,-Math.PI,!0),a.absarc(o,t-2*s,o,Math.PI,Math.PI/2,!0),a.absarc(e-2*s,t-2*s,o,Math.PI/2,0,!0),a.absarc(e-2*s,o,o,0,-Math.PI/2,!0),a}(e,t,s)),[e,t,s]),p=c.useMemo((()=>({depth:a-2*s,bevelEnabled:!0,bevelSegments:2*l,steps:f,bevelSize:s-o,bevelThickness:s,curveSegments:l})),[a,s,l]),v=c.useRef();return c.useLayoutEffect((()=>{v.current&&(v.current.center(),n.toCreasedNormals(v.current,i))}),[m,p]),c.createElement("mesh",u.default({ref:h},d),c.createElement("extrudeGeometry",{ref:v,args:[m,p]}),b)}));exports.RoundedBox=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 u=s(e),c=a(t);const o=1e-5;const f=c.forwardRef((function({args:[e=1,t=1,s=1]=[],radius:a=.05,steps:f=1,smoothness:l=4,bevelSegments:i=4,creaseAngle:b=.4,children:d,...h},m){const p=c.useMemo((()=>function(e,t,n){const s=new r.Shape,a=n-o;return s.absarc(o,o,o,-Math.PI/2,-Math.PI,!0),s.absarc(o,t-2*a,o,Math.PI,Math.PI/2,!0),s.absarc(e-2*a,t-2*a,o,Math.PI/2,0,!0),s.absarc(e-2*a,o,o,0,-Math.PI/2,!0),s}(e,t,a)),[e,t,a]),v=c.useMemo((()=>({depth:s-2*a,bevelEnabled:!0,bevelSegments:2*i,steps:f,bevelSize:a-o,bevelThickness:a,curveSegments:l})),[s,a,l]),M=c.useRef();return c.useLayoutEffect((()=>{M.current&&(M.current.center(),n.toCreasedNormals(M.current,b))}),[p,v]),c.createElement("mesh",u.default({ref:m},h),c.createElement("extrudeGeometry",{ref:M,args:[p,v]}),d)}));exports.RoundedBox=f;

package/core/RoundedBox.d.ts

@@ -4,6 +4,7 @@ declare type Props = {
     args?: NamedArrayTuple<(width?: number, height?: number, depth?: number) => void>;
     radius?: number;
     smoothness?: number;
+    bevelSegments?: number;
     steps?: number;
     creaseAngle?: number;
 } & Omit<JSX.IntrinsicElements['mesh'], 'args'>;

package/core/RoundedBox.js

@@ -20,6 +20,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
   radius = 0.05,
   steps = 1,
   smoothness = 4,
+  bevelSegments = 4,
   creaseAngle = 0.4,
   children,
   ...rest
@@ -28,7 +29,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
   const params = React.useMemo(() => ({
     depth: depth - radius * 2,
     bevelEnabled: true,
-    bevelSegments: smoothness * 2,
+    bevelSegments: bevelSegments * 2,
     steps,
     bevelSize: radius - eps,
     bevelThickness: radius,

package/core/SpriteAnimator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=n(e),u=n(t);exports.SpriteAnimator=({startFrame:e,endFrame:t,fps:n,frameName:s,textureDataURL:c,textureImageURL:o,loop:f,numberOfFrames:i,autoPlay:m,animationNames:l,onStart:p,onEnd:h,onLoopEnd:w,onFrame:y,play:d,pause:S,flipX:x,alphaTest:g,children:b,...z},F)=>{r.useThree((e=>e.viewport));const A=a.useRef(null),[E,O]=a.useState(!1),R=a.useRef(),j=a.useRef(),v=a.useRef(window.performance.now()),L=a.useRef(),P=a.useRef(e||0),T=a.useRef(s||""),N=1e3/(n||30),[M,k]=a.useState(new u.Texture),_=a.useRef(0),[q,C]=a.useState([1,1,1]),D=x?-1:1;const I=(e,r)=>{const t=r/e;return j.current.scale.set(1,t,1),[1,t,1]};a.useEffect((()=>{if(c&&o)!function(e,r,t){const n=new u.TextureLoader,a=fetch(e).then((e=>e.json())),s=new Promise((e=>{n.load(r,e)}));Promise.all([a,s]).then((e=>{t(e[0],e[1])}))}(c,o,U);else if(o){const e=new u.TextureLoader;new Promise((r=>{e.load(o,r)})).then((e=>{U(null,e)}))}}),[]),a.useLayoutEffect((()=>{X()}),[M,x]),a.useEffect((()=>{}),[S]),a.useEffect((()=>{T.current!==s&&s&&(P.current=0,T.current=s)}),[s]);const U=(e,r)=>{if(null===e){if(r&&i){const e=r.image.width,t=r.image.height,n=e/i,a=t;if(L.current=r,_.current=i,A.current={frames:[],meta:{version:"1.0",size:{w:e,h:t},scale:"1"}},parseInt(n.toString(),10)===n)for(let e=0;e<i;e++)A.current.frames.push({frame:{x:e*n,y:0,w:n,h:a},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:n,h:a},sourceSize:{w:n,h:t}})}}else if(r){A.current=e,A.current.frames=Array.isArray(e.frames)?e.frames:W(),_.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length,L.current=r;const{w:t,h:n}=B(e.frames).sourceSize,a=I(t,n);C(a),R.current&&(R.current.map=r)}r.premultiplyAlpha=!1,k(r)},W=()=>{const e={},r=A.current,t=l;if(t)for(let n=0;n<t.length;n++){e[t[n]]=[];for(let a in r.frames){const u=r.frames[a],s=u.frame,c=s.x,o=s.y,f=s.w,i=s.h,m=u.sourceSize.w,l=u.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:c,y:o,w:f,h:i,frame:s,sourceSize:{w:m,h:l}})}}return e},X=()=>{if(!A.current)return;const{meta:{size:e},frames:r}=A.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:s&&r[s]?r[s][0].sourceSize:{w:0,h:0};R.current.map.wrapS=R.current.map.wrapT=u.RepeatWrapping,R.current.map.center.set(0,0),R.current.map.repeat.set(1*D/(e.w/t),1/(e.h/n));const a=1/((e.h-1)/n);R.current.map.offset.x=0,R.current.map.offset.y=1-a,O(!0),p&&p({currentFrameName:s,currentFrame:P.current})};r.useFrame(((r,n)=>{var a,u;null!=(a=A.current)&&a.frames&&null!=(u=R.current)&&u.map&&(S||(m||d)&&((()=>{const r=window.performance.now(),n=r-v.current,{meta:{size:a},frames:u}=A.current,{w:c,h:o}=B(u).sourceSize,i=Array.isArray(u)?u:s?u[s]:[];let m=0,l=0;const p=t||i.length-1;if(P.current>p&&(P.current=f&&null!=e?e:0,f?null==w||w({currentFrameName:s,currentFrame:P.current}):null==h||h({currentFrameName:s,currentFrame:P.current}),!f))return;if(n<=N)return;v.current=r-n%N,I(c,o);const y=(a.w-1)/c,d=(a.h-1)/o,{frame:{x:S,y:x},sourceSize:{w:g,h:b}}=i[P.current],z=1/y,F=1/d;m=D>0?z*(S/g):z*(S/g)-R.current.map.repeat.x,l=Math.abs(1-F)-F*(x/b),R.current.map.offset.x=m,R.current.map.offset.y=l,P.current+=1})(),y&&y({currentFrameName:T.current,currentFrame:P.current})))}));const B=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){return e[Object.keys(e)[0]][0]}return{w:0,h:0}};return a.createElement("group",z,a.createElement(a.Suspense,{fallback:null},a.createElement("sprite",{ref:j,scale:q},a.createElement("spriteMaterial",{toneMapped:!1,ref:R,map:M,transparent:!0,alphaTest:null!=g?g:0}))),b)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=n(e),u=n(t);exports.SpriteAnimator=({startFrame:e,endFrame:t,fps:n,frameName:c,textureDataURL:s,textureImageURL:o,loop:f,numberOfFrames:i,autoPlay:m,animationNames:l,onStart:p,onEnd:h,onLoopEnd:w,onFrame:y,play:d,pause:S,flipX:x,alphaTest:g,children:b,...z},F)=>{r.useThree((e=>e.viewport));const A=a.useRef(null),[R,E]=a.useState(!1),O=a.useRef(!1),j=a.useRef(),v=a.useRef(),L=a.useRef(window.performance.now()),P=a.useRef(),T=a.useRef(e||0),N=a.useRef(c||""),M=1e3/(n||30),[k,_]=a.useState(new u.Texture),q=a.useRef(0),[C,D]=a.useState([1,1,1]),I=x?-1:1;const U=(e,r)=>{const t=r/e;return v.current.scale.set(1,t,1),[1,t,1]};a.useEffect((()=>{if(s&&o)!function(e,r,t){const n=new u.TextureLoader,a=fetch(e).then((e=>e.json())),c=new Promise((e=>{n.load(r,e)}));Promise.all([a,c]).then((e=>{t(e[0],e[1])}))}(s,o,W);else if(o){const e=new u.TextureLoader;new Promise((r=>{e.load(o,r)})).then((e=>{W(null,e)}))}}),[]),a.useLayoutEffect((()=>{B()}),[k,x]),a.useEffect((()=>{}),[S]),a.useEffect((()=>{N.current!==c&&c&&(T.current=0,N.current=c,O.current=!1)}),[c]);const W=(e,r)=>{if(null===e){if(r&&i){const e=r.image.width,t=r.image.height,n=e/i,a=t;if(P.current=r,q.current=i,A.current={frames:[],meta:{version:"1.0",size:{w:e,h:t},scale:"1"}},parseInt(n.toString(),10)===n)for(let e=0;e<i;e++)A.current.frames.push({frame:{x:e*n,y:0,w:n,h:a},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:n,h:a},sourceSize:{w:n,h:t}})}}else if(r){A.current=e,A.current.frames=Array.isArray(e.frames)?e.frames:X(),q.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length,P.current=r;const{w:t,h:n}=G(e.frames).sourceSize,a=U(t,n);D(a),j.current&&(j.current.map=r)}r.premultiplyAlpha=!1,_(r)},X=()=>{const e={},r=A.current,t=l;if(t)for(let n=0;n<t.length;n++){e[t[n]]=[];for(let a in r.frames){const u=r.frames[a],c=u.frame,s=c.x,o=c.y,f=c.w,i=c.h,m=u.sourceSize.w,l=u.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:s,y:o,w:f,h:i,frame:c,sourceSize:{w:m,h:l}})}}return e},B=()=>{if(!A.current)return;const{meta:{size:e},frames:r}=A.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:c&&r[c]?r[c][0].sourceSize:{w:0,h:0};j.current.map.wrapS=j.current.map.wrapT=u.RepeatWrapping,j.current.map.center.set(0,0),j.current.map.repeat.set(1*I/(e.w/t),1/(e.h/n));const a=1/((e.h-1)/n);j.current.map.offset.x=0,j.current.map.offset.y=1-a,E(!0),p&&p({currentFrameName:c,currentFrame:T.current})};r.useFrame(((r,n)=>{var a,u;null!=(a=A.current)&&a.frames&&null!=(u=j.current)&&u.map&&(S||O.current||!m&&!d||((()=>{const r=window.performance.now(),n=r-L.current,{meta:{size:a},frames:u}=A.current,{w:s,h:o}=G(u).sourceSize,i=Array.isArray(u)?u:c?u[c]:[];let m=0,l=0;const p=t||i.length-1;if(T.current>p&&(T.current=f&&null!=e?e:0,f?null==w||w({currentFrameName:c,currentFrame:T.current}):(null==h||h({currentFrameName:c,currentFrame:T.current}),O.current=!0),!f))return;if(n<=M)return;L.current=r-n%M,U(s,o);const y=(a.w-1)/s,d=(a.h-1)/o,{frame:{x:S,y:x},sourceSize:{w:g,h:b}}=i[T.current],z=1/y,F=1/d;m=I>0?z*(S/g):z*(S/g)-j.current.map.repeat.x,l=Math.abs(1-F)-F*(x/b),j.current.map.offset.x=m,j.current.map.offset.y=l,T.current+=1})(),y&&y({currentFrameName:N.current,currentFrame:T.current})))}));const G=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){return e[Object.keys(e)[0]][0]}return{w:0,h:0}};return a.createElement("group",z,a.createElement(a.Suspense,{fallback:null},a.createElement("sprite",{ref:v,scale:C},a.createElement("spriteMaterial",{toneMapped:!1,ref:j,map:k,transparent:!0,alphaTest:null!=g?g:0}))),b)};

package/core/SpriteAnimator.js

@@ -27,6 +27,7 @@ const SpriteAnimator = ({
   useThree(state => state.viewport);
   const spriteData = React.useRef(null);
   const [isJsonReady, setJsonReady] = React.useState(false);
+  const hasEnded = React.useRef(false);
   const matRef = React.useRef();
   const spriteRef = React.useRef();
   const timerOffset = React.useRef(window.performance.now());
@@ -79,6 +80,7 @@ const SpriteAnimator = ({
     if (currentFrameName.current !== frameName && frameName) {
       currentFrame.current = 0;
       currentFrameName.current = frameName;
+      hasEnded.current = false;
     }
   }, [frameName]);
 
@@ -261,6 +263,7 @@ const SpriteAnimator = ({
           currentFrameName: frameName,
           currentFrame: currentFrame.current
         });
+        hasEnded.current = true;
       }
 
       if (!loop) return;
@@ -302,7 +305,7 @@ const SpriteAnimator = ({
       return;
     }
 
-    if (autoPlay || play) {
+    if (!hasEnded.current && (autoPlay || play)) {
       runAnimation();
       onFrame && onFrame({
         currentFrameName: currentFrameName.current,

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),q=require("./Sampler.cjs.js"),m=require("./ComputedAttribute.cjs.js"),d=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),M=require("./Svg.cjs.js"),S=require("./Gltf.cjs.js"),f=require("./AsciiRenderer.cjs.js"),T=require("./OrthographicCamera.cjs.js"),P=require("./PerspectiveCamera.cjs.js"),b=require("./CubeCamera.cjs.js"),B=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),F=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),A=require("./ArcballControls.cjs.js"),k=require("./TransformControls.cjs.js"),D=require("./PointerLockControls.cjs.js"),E=require("./FirstPersonControls.cjs.js"),G=require("./CameraControls.cjs.js"),R=require("./FaceControls.cjs.js"),w=require("./GizmoHelper.cjs.js"),z=require("./GizmoViewcube.cjs.js"),O=require("./GizmoViewport.cjs.js"),y=require("./Grid.cjs.js"),I=require("./useCubeTexture.cjs.js"),H=require("./useFBX.cjs.js"),V=require("./useGLTF.cjs.js"),W=require("./useKTX2.cjs.js"),Q=require("./useProgress.cjs.js"),X=require("./useTexture.cjs.js"),K=require("./useVideoTexture.cjs.js"),N=require("./useFont.cjs.js"),U=require("./Stats.cjs.js"),_=require("./StatsGl.cjs.js"),J=require("./useDepthBuffer.cjs.js"),Y=require("./useAspect.cjs.js"),Z=require("./useCamera.cjs.js"),$=require("./useDetectGPU.cjs.js"),ee=require("./useHelper.cjs.js"),re=require("./useBVH.cjs.js"),se=require("./useContextBridge.cjs.js"),te=require("./useAnimations.cjs.js"),oe=require("./useFBO.cjs.js"),ie=require("./useIntersect.cjs.js"),ae=require("./useBoxProjectedEnv.cjs.js"),ue=require("./BBAnchor.cjs.js"),ce=require("./useTrailTexture.cjs.js"),ne=require("./useCubeCamera.cjs.js"),je=require("./Example.cjs.js"),pe=require("./SpriteAnimator.cjs.js"),xe=require("./FaceLandmarker.cjs.js"),le=require("./CurveModifier.cjs.js"),qe=require("./MeshDistortMaterial.cjs.js"),me=require("./MeshWobbleMaterial.cjs.js"),de=require("./MeshReflectorMaterial.cjs.js"),he=require("./MeshRefractionMaterial.cjs.js"),Ce=require("./MeshTransmissionMaterial.cjs.js"),Me=require("./MeshDiscardMaterial.cjs.js"),Se=require("./PointMaterial.cjs.js"),fe=require("./shaderMaterial.cjs.js"),Te=require("./softShadows.cjs.js"),Pe=require("./shapes.cjs.js"),be=require("./Facemesh.cjs.js"),Be=require("./RoundedBox.cjs.js"),ge=require("./ScreenQuad.cjs.js"),ve=require("./Center.cjs.js"),Fe=require("./Resize.cjs.js"),Le=require("./Bounds.cjs.js"),Ae=require("./CameraShake.cjs.js"),ke=require("./Float.cjs.js"),De=require("./Stage.cjs.js"),Ee=require("./Backdrop.cjs.js"),Ge=require("./Shadow.cjs.js"),Re=require("./Caustics.cjs.js"),we=require("./ContactShadows.cjs.js"),ze=require("./AccumulativeShadows.cjs.js"),Oe=require("./Reflector.cjs.js"),ye=require("./SpotLight.cjs.js"),Ie=require("./Environment.cjs.js"),He=require("./Lightformer.cjs.js"),Ve=require("./Sky.cjs.js"),We=require("./Stars.cjs.js"),Qe=require("./Cloud.cjs.js"),Xe=require("./Sparkles.cjs.js"),Ke=require("./useEnvironment.cjs.js"),Ne=require("./useMatcapTexture.cjs.js"),Ue=require("./useNormalTexture.cjs.js"),_e=require("./Wireframe.cjs.js"),Je=require("./Points.cjs.js"),Ye=require("./Instances.cjs.js"),Ze=require("./Segments.cjs.js"),$e=require("./Detailed.cjs.js"),er=require("./Preload.cjs.js"),rr=require("./BakeShadows.cjs.js"),sr=require("./meshBounds.cjs.js"),tr=require("./AdaptiveDpr.cjs.js"),or=require("./AdaptiveEvents.cjs.js"),ir=require("./PerformanceMonitor.cjs.js"),ar=require("./RenderTexture.cjs.js"),ur=require("./Mask.cjs.js"),cr=require("./Hud.cjs.js"),nr=require("./MeshPortalMaterial.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("camera-controls"),require("maath"),require("@mediapipe/tasks-vision"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../materials/WireframeMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.GradientType=j.GradientType,exports.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=q.Sampler,exports.useSurfaceSampler=q.useSurfaceSampler,exports.ComputedAttribute=m.ComputedAttribute,exports.Clone=d.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=M.Svg,exports.Gltf=S.Gltf,exports.AsciiRenderer=f.AsciiRenderer,exports.OrthographicCamera=T.OrthographicCamera,exports.PerspectiveCamera=P.PerspectiveCamera,exports.CubeCamera=b.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=F.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=A.ArcballControls,exports.TransformControls=k.TransformControls,exports.PointerLockControls=D.PointerLockControls,exports.FirstPersonControls=E.FirstPersonControls,exports.CameraControls=G.CameraControls,exports.FaceControls=R.FaceControls,exports.useFaceControls=R.useFaceControls,exports.GizmoHelper=w.GizmoHelper,exports.useGizmoContext=w.useGizmoContext,exports.GizmoViewcube=z.GizmoViewcube,exports.GizmoViewport=O.GizmoViewport,exports.Grid=y.Grid,exports.useCubeTexture=I.useCubeTexture,exports.useFBX=H.useFBX,exports.useGLTF=V.useGLTF,exports.useKTX2=W.useKTX2,exports.useProgress=Q.useProgress,exports.IsObject=X.IsObject,exports.useTexture=X.useTexture,exports.useVideoTexture=K.useVideoTexture,exports.useFont=N.useFont,exports.Stats=U.Stats,exports.StatsGl=_.StatsGl,exports.useDepthBuffer=J.useDepthBuffer,exports.useAspect=Y.useAspect,exports.useCamera=Z.useCamera,exports.useDetectGPU=$.useDetectGPU,exports.useHelper=ee.useHelper,exports.Bvh=re.Bvh,exports.useBVH=re.useBVH,exports.useContextBridge=se.useContextBridge,exports.useAnimations=te.useAnimations,exports.useFBO=oe.useFBO,exports.useIntersect=ie.useIntersect,exports.useBoxProjectedEnv=ae.useBoxProjectedEnv,exports.BBAnchor=ue.BBAnchor,exports.useTrailTexture=ce.useTrailTexture,exports.useCubeCamera=ne.useCubeCamera,exports.Example=je.Example,exports.SpriteAnimator=pe.SpriteAnimator,exports.FaceLandmarker=xe.FaceLandmarker,exports.FaceLandmarkerDefaults=xe.FaceLandmarkerDefaults,exports.useFaceLandmarker=xe.useFaceLandmarker,exports.CurveModifier=le.CurveModifier,exports.MeshDistortMaterial=qe.MeshDistortMaterial,exports.MeshWobbleMaterial=me.MeshWobbleMaterial,exports.MeshReflectorMaterial=de.MeshReflectorMaterial,exports.MeshRefractionMaterial=he.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Ce.MeshTransmissionMaterial,exports.MeshDiscardMaterial=Me.MeshDiscardMaterial,exports.PointMaterial=Se.PointMaterial,exports.PointMaterialImpl=Se.PointMaterialImpl,exports.shaderMaterial=fe.shaderMaterial,exports.SoftShadows=Te.SoftShadows,exports.Box=Pe.Box,exports.Capsule=Pe.Capsule,exports.Circle=Pe.Circle,exports.Cone=Pe.Cone,exports.Cylinder=Pe.Cylinder,exports.Dodecahedron=Pe.Dodecahedron,exports.Extrude=Pe.Extrude,exports.Icosahedron=Pe.Icosahedron,exports.Lathe=Pe.Lathe,exports.Octahedron=Pe.Octahedron,exports.Plane=Pe.Plane,exports.Polyhedron=Pe.Polyhedron,exports.Ring=Pe.Ring,exports.Shape=Pe.Shape,exports.Sphere=Pe.Sphere,exports.Tetrahedron=Pe.Tetrahedron,exports.Torus=Pe.Torus,exports.TorusKnot=Pe.TorusKnot,exports.Tube=Pe.Tube,exports.Facemesh=be.Facemesh,exports.FacemeshDatas=be.FacemeshDatas,exports.FacemeshEye=be.FacemeshEye,exports.FacemeshEyeDefaults=be.FacemeshEyeDefaults,exports.RoundedBox=Be.RoundedBox,exports.ScreenQuad=ge.ScreenQuad,exports.Center=ve.Center,exports.Resize=Fe.Resize,exports.Bounds=Le.Bounds,exports.useBounds=Le.useBounds,exports.CameraShake=Ae.CameraShake,exports.Float=ke.Float,exports.Stage=De.Stage,exports.Backdrop=Ee.Backdrop,exports.Shadow=Ge.Shadow,exports.Caustics=Re.Caustics,exports.ContactShadows=we.ContactShadows,exports.AccumulativeShadows=ze.AccumulativeShadows,exports.RandomizedLight=ze.RandomizedLight,exports.accumulativeContext=ze.accumulativeContext,exports.Reflector=Oe.Reflector,exports.SpotLight=ye.SpotLight,exports.SpotLightShadow=ye.SpotLightShadow,exports.Environment=Ie.Environment,exports.EnvironmentCube=Ie.EnvironmentCube,exports.EnvironmentMap=Ie.EnvironmentMap,exports.EnvironmentPortal=Ie.EnvironmentPortal,exports.Lightformer=He.Lightformer,exports.Sky=Ve.Sky,exports.calcPosFromAngles=Ve.calcPosFromAngles,exports.Stars=We.Stars,exports.Cloud=Qe.Cloud,exports.Sparkles=Xe.Sparkles,exports.useEnvironment=Ke.useEnvironment,exports.useMatcapTexture=Ne.useMatcapTexture,exports.useNormalTexture=Ue.useNormalTexture,exports.Wireframe=_e.Wireframe,exports.Point=Je.Point,exports.Points=Je.Points,exports.PointsBuffer=Je.PointsBuffer,exports.PositionPoint=Je.PositionPoint,exports.Instance=Ye.Instance,exports.Instances=Ye.Instances,exports.Merged=Ye.Merged,exports.Segment=Ze.Segment,exports.SegmentObject=Ze.SegmentObject,exports.Segments=Ze.Segments,exports.Detailed=$e.Detailed,exports.Preload=er.Preload,exports.BakeShadows=rr.BakeShadows,exports.meshBounds=sr.meshBounds,exports.AdaptiveDpr=tr.AdaptiveDpr,exports.AdaptiveEvents=or.AdaptiveEvents,exports.PerformanceMonitor=ir.PerformanceMonitor,exports.usePerformanceMonitor=ir.usePerformanceMonitor,exports.RenderTexture=ar.RenderTexture,exports.Mask=ur.Mask,exports.useMask=ur.useMask,exports.Hud=cr.Hud,exports.MeshPortalMaterial=nr.MeshPortalMaterial;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),l=require("./Edges.cjs.js"),x=require("./Outlines.cjs.js"),q=require("./Trail.cjs.js"),m=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),h=require("./Clone.cjs.js"),C=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),f=require("./Gltf.cjs.js"),T=require("./AsciiRenderer.cjs.js"),P=require("./OrthographicCamera.cjs.js"),b=require("./PerspectiveCamera.cjs.js"),B=require("./CubeCamera.cjs.js"),g=require("./DeviceOrientationControls.cjs.js"),v=require("./FlyControls.cjs.js"),F=require("./MapControls.cjs.js"),L=require("./OrbitControls.cjs.js"),A=require("./TrackballControls.cjs.js"),k=require("./ArcballControls.cjs.js"),D=require("./TransformControls.cjs.js"),E=require("./PointerLockControls.cjs.js"),G=require("./FirstPersonControls.cjs.js"),R=require("./CameraControls.cjs.js"),w=require("./FaceControls.cjs.js"),z=require("./GizmoHelper.cjs.js"),O=require("./GizmoViewcube.cjs.js"),y=require("./GizmoViewport.cjs.js"),I=require("./Grid.cjs.js"),H=require("./useCubeTexture.cjs.js"),V=require("./useFBX.cjs.js"),W=require("./useGLTF.cjs.js"),Q=require("./useKTX2.cjs.js"),X=require("./useProgress.cjs.js"),K=require("./useTexture.cjs.js"),N=require("./useVideoTexture.cjs.js"),U=require("./useFont.cjs.js"),_=require("./Stats.cjs.js"),J=require("./StatsGl.cjs.js"),Y=require("./useDepthBuffer.cjs.js"),Z=require("./useAspect.cjs.js"),$=require("./useCamera.cjs.js"),ee=require("./useDetectGPU.cjs.js"),re=require("./useHelper.cjs.js"),se=require("./useBVH.cjs.js"),te=require("./useContextBridge.cjs.js"),oe=require("./useAnimations.cjs.js"),ie=require("./useFBO.cjs.js"),ae=require("./useIntersect.cjs.js"),ue=require("./useBoxProjectedEnv.cjs.js"),ce=require("./BBAnchor.cjs.js"),ne=require("./useTrailTexture.cjs.js"),je=require("./useCubeCamera.cjs.js"),pe=require("./Example.cjs.js"),le=require("./SpriteAnimator.cjs.js"),xe=require("./FaceLandmarker.cjs.js"),qe=require("./CurveModifier.cjs.js"),me=require("./MeshDistortMaterial.cjs.js"),de=require("./MeshWobbleMaterial.cjs.js"),he=require("./MeshReflectorMaterial.cjs.js"),Ce=require("./MeshRefractionMaterial.cjs.js"),Me=require("./MeshTransmissionMaterial.cjs.js"),Se=require("./MeshDiscardMaterial.cjs.js"),fe=require("./PointMaterial.cjs.js"),Te=require("./shaderMaterial.cjs.js"),Pe=require("./softShadows.cjs.js"),be=require("./shapes.cjs.js"),Be=require("./Facemesh.cjs.js"),ge=require("./RoundedBox.cjs.js"),ve=require("./ScreenQuad.cjs.js"),Fe=require("./Center.cjs.js"),Le=require("./Resize.cjs.js"),Ae=require("./Bounds.cjs.js"),ke=require("./CameraShake.cjs.js"),De=require("./Float.cjs.js"),Ee=require("./Stage.cjs.js"),Ge=require("./Backdrop.cjs.js"),Re=require("./Shadow.cjs.js"),we=require("./Caustics.cjs.js"),ze=require("./ContactShadows.cjs.js"),Oe=require("./AccumulativeShadows.cjs.js"),ye=require("./Reflector.cjs.js"),Ie=require("./SpotLight.cjs.js"),He=require("./Environment.cjs.js"),Ve=require("./Lightformer.cjs.js"),We=require("./Sky.cjs.js"),Qe=require("./Stars.cjs.js"),Xe=require("./Cloud.cjs.js"),Ke=require("./Sparkles.cjs.js"),Ne=require("./useEnvironment.cjs.js"),Ue=require("./useMatcapTexture.cjs.js"),_e=require("./useNormalTexture.cjs.js"),Je=require("./Wireframe.cjs.js"),Ye=require("./Points.cjs.js"),Ze=require("./Instances.cjs.js"),$e=require("./Segments.cjs.js"),er=require("./Detailed.cjs.js"),rr=require("./Preload.cjs.js"),sr=require("./BakeShadows.cjs.js"),tr=require("./meshBounds.cjs.js"),or=require("./AdaptiveDpr.cjs.js"),ir=require("./AdaptiveEvents.cjs.js"),ar=require("./PerformanceMonitor.cjs.js"),ur=require("./RenderTexture.cjs.js"),cr=require("./Mask.cjs.js"),nr=require("./Hud.cjs.js"),jr=require("./MeshPortalMaterial.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("camera-controls"),require("maath"),require("@mediapipe/tasks-vision"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../materials/WireframeMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.GradientType=j.GradientType,exports.Image=p.Image,exports.Edges=l.Edges,exports.Outlines=x.Outlines,exports.Trail=q.Trail,exports.useTrail=q.useTrail,exports.Sampler=m.Sampler,exports.useSurfaceSampler=m.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=h.Clone,exports.MarchingCube=C.MarchingCube,exports.MarchingCubes=C.MarchingCubes,exports.MarchingPlane=C.MarchingPlane,exports.Decal=M.Decal,exports.Svg=S.Svg,exports.Gltf=f.Gltf,exports.AsciiRenderer=T.AsciiRenderer,exports.OrthographicCamera=P.OrthographicCamera,exports.PerspectiveCamera=b.PerspectiveCamera,exports.CubeCamera=B.CubeCamera,exports.DeviceOrientationControls=g.DeviceOrientationControls,exports.FlyControls=v.FlyControls,exports.MapControls=F.MapControls,exports.OrbitControls=L.OrbitControls,exports.TrackballControls=A.TrackballControls,exports.ArcballControls=k.ArcballControls,exports.TransformControls=D.TransformControls,exports.PointerLockControls=E.PointerLockControls,exports.FirstPersonControls=G.FirstPersonControls,exports.CameraControls=R.CameraControls,exports.FaceControls=w.FaceControls,exports.useFaceControls=w.useFaceControls,exports.GizmoHelper=z.GizmoHelper,exports.useGizmoContext=z.useGizmoContext,exports.GizmoViewcube=O.GizmoViewcube,exports.GizmoViewport=y.GizmoViewport,exports.Grid=I.Grid,exports.useCubeTexture=H.useCubeTexture,exports.useFBX=V.useFBX,exports.useGLTF=W.useGLTF,exports.useKTX2=Q.useKTX2,exports.useProgress=X.useProgress,exports.IsObject=K.IsObject,exports.useTexture=K.useTexture,exports.useVideoTexture=N.useVideoTexture,exports.useFont=U.useFont,exports.Stats=_.Stats,exports.StatsGl=J.StatsGl,exports.useDepthBuffer=Y.useDepthBuffer,exports.useAspect=Z.useAspect,exports.useCamera=$.useCamera,exports.useDetectGPU=ee.useDetectGPU,exports.useHelper=re.useHelper,exports.Bvh=se.Bvh,exports.useBVH=se.useBVH,exports.useContextBridge=te.useContextBridge,exports.useAnimations=oe.useAnimations,exports.useFBO=ie.useFBO,exports.useIntersect=ae.useIntersect,exports.useBoxProjectedEnv=ue.useBoxProjectedEnv,exports.BBAnchor=ce.BBAnchor,exports.useTrailTexture=ne.useTrailTexture,exports.useCubeCamera=je.useCubeCamera,exports.Example=pe.Example,exports.SpriteAnimator=le.SpriteAnimator,exports.FaceLandmarker=xe.FaceLandmarker,exports.FaceLandmarkerDefaults=xe.FaceLandmarkerDefaults,exports.useFaceLandmarker=xe.useFaceLandmarker,exports.CurveModifier=qe.CurveModifier,exports.MeshDistortMaterial=me.MeshDistortMaterial,exports.MeshWobbleMaterial=de.MeshWobbleMaterial,exports.MeshReflectorMaterial=he.MeshReflectorMaterial,exports.MeshRefractionMaterial=Ce.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Me.MeshTransmissionMaterial,exports.MeshDiscardMaterial=Se.MeshDiscardMaterial,exports.PointMaterial=fe.PointMaterial,exports.PointMaterialImpl=fe.PointMaterialImpl,exports.shaderMaterial=Te.shaderMaterial,exports.SoftShadows=Pe.SoftShadows,exports.Box=be.Box,exports.Capsule=be.Capsule,exports.Circle=be.Circle,exports.Cone=be.Cone,exports.Cylinder=be.Cylinder,exports.Dodecahedron=be.Dodecahedron,exports.Extrude=be.Extrude,exports.Icosahedron=be.Icosahedron,exports.Lathe=be.Lathe,exports.Octahedron=be.Octahedron,exports.Plane=be.Plane,exports.Polyhedron=be.Polyhedron,exports.Ring=be.Ring,exports.Shape=be.Shape,exports.Sphere=be.Sphere,exports.Tetrahedron=be.Tetrahedron,exports.Torus=be.Torus,exports.TorusKnot=be.TorusKnot,exports.Tube=be.Tube,exports.Facemesh=Be.Facemesh,exports.FacemeshDatas=Be.FacemeshDatas,exports.FacemeshEye=Be.FacemeshEye,exports.FacemeshEyeDefaults=Be.FacemeshEyeDefaults,exports.RoundedBox=ge.RoundedBox,exports.ScreenQuad=ve.ScreenQuad,exports.Center=Fe.Center,exports.Resize=Le.Resize,exports.Bounds=Ae.Bounds,exports.useBounds=Ae.useBounds,exports.CameraShake=ke.CameraShake,exports.Float=De.Float,exports.Stage=Ee.Stage,exports.Backdrop=Ge.Backdrop,exports.Shadow=Re.Shadow,exports.Caustics=we.Caustics,exports.ContactShadows=ze.ContactShadows,exports.AccumulativeShadows=Oe.AccumulativeShadows,exports.RandomizedLight=Oe.RandomizedLight,exports.accumulativeContext=Oe.accumulativeContext,exports.Reflector=ye.Reflector,exports.SpotLight=Ie.SpotLight,exports.SpotLightShadow=Ie.SpotLightShadow,exports.Environment=He.Environment,exports.EnvironmentCube=He.EnvironmentCube,exports.EnvironmentMap=He.EnvironmentMap,exports.EnvironmentPortal=He.EnvironmentPortal,exports.Lightformer=Ve.Lightformer,exports.Sky=We.Sky,exports.calcPosFromAngles=We.calcPosFromAngles,exports.Stars=Qe.Stars,exports.Cloud=Xe.Cloud,exports.Sparkles=Ke.Sparkles,exports.useEnvironment=Ne.useEnvironment,exports.useMatcapTexture=Ue.useMatcapTexture,exports.useNormalTexture=_e.useNormalTexture,exports.Wireframe=Je.Wireframe,exports.Point=Ye.Point,exports.Points=Ye.Points,exports.PointsBuffer=Ye.PointsBuffer,exports.PositionPoint=Ye.PositionPoint,exports.Instance=Ze.Instance,exports.Instances=Ze.Instances,exports.Merged=Ze.Merged,exports.Segment=$e.Segment,exports.SegmentObject=$e.SegmentObject,exports.Segments=$e.Segments,exports.Detailed=er.Detailed,exports.Preload=rr.Preload,exports.BakeShadows=sr.BakeShadows,exports.meshBounds=tr.meshBounds,exports.AdaptiveDpr=or.AdaptiveDpr,exports.AdaptiveEvents=ir.AdaptiveEvents,exports.PerformanceMonitor=ar.PerformanceMonitor,exports.usePerformanceMonitor=ar.usePerformanceMonitor,exports.RenderTexture=ur.RenderTexture,exports.Mask=cr.Mask,exports.useMask=cr.useMask,exports.Hud=nr.Hud,exports.MeshPortalMaterial=jr.MeshPortalMaterial;

package/core/index.d.ts

@@ -11,6 +11,7 @@ export * from './Effects';
 export * from './GradientTexture';
 export * from './Image';
 export * from './Edges';
+export * from './Outlines';
 export * from './Trail';
 export * from './Sampler';
 export * from './ComputedAttribute';

package/core/index.js

@@ -11,6 +11,7 @@ export { Effects, isWebGL2Available } from './Effects.js';
 export { GradientTexture, GradientType } from './GradientTexture.js';
 export { Image } from './Image.js';
 export { Edges } from './Edges.js';
+export { Outlines } from './Outlines.js';
 export { Trail, useTrail } from './Trail.js';
 export { Sampler, useSurfaceSampler } from './Sampler.js';
 export { ComputedAttribute } from './ComputedAttribute.js';