@react-three/drei 9.82.1 → 9.83.1

package/README.md

@@ -1403,7 +1403,7 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
   <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).
+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). Supported parents are `<mesh>`, `<skinnedMesh>` and `<instancedMesh>`.
 
 ```tsx
 type OutlinesProps = JSX.IntrinsicElements['group'] & {
@@ -2358,6 +2358,8 @@ type Props = {
   flipX?: boolean
   /** Sets the alpha value to be used when running an alpha test. https://threejs.org/docs/#api/en/materials/Material.alphaTest */
   alphaTest?: number
+  /** Displays the texture on a SpriteGeometry always facing the camera, if set to false, it renders on a PlaneGeometry */
+  asSprite?: boolean
 }
 ```
 

package/core/Outlines.cjs.js

@@ -1 +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))};
+"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 s=a(e),l=c(n),d=c(r);const u=t.shaderMaterial({color:new l.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     vec4 transformedNormal = vec4(normal, 0.0);\n     vec4 transformedPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       transformedNormal = instanceMatrix * transformedNormal;\n       transformedPosition = instanceMatrix * transformedPosition;\n     #endif\n     vec3 newPosition = transformedPosition.xyz + transformedNormal.xyz * 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(l.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=d.useRef(null);return d.useMemo((()=>i.extend({OutlinesMaterial:u})),[]),d.useLayoutEffect((()=>{const e=f.current,n=e.parent;if(n&&n.geometry){let r;return n.skeleton?(r=new l.SkinnedMesh,r.material=new u({side:l.BackSide}),r.bind(n.skeleton,n.bindMatrix),e.add(r)):n.isInstancedMesh?(r=new l.InstancedMesh(n.geometry,new u({side:l.BackSide}),n.count),r.instanceMatrix=n.instanceMatrix,e.add(r)):(r=new l.Mesh,r.material=new u({side:l.BackSide}),e.add(r)),r.geometry=a?o.toCreasedNormals(n.geometry,a):n.geometry,()=>{i.dispose(r),e.clear()}}}),[a]),d.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]),d.createElement("group",s.default({ref:f},c))};

package/core/Outlines.d.ts

@@ -1,9 +1,11 @@
 /// <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;
+import { ReactThreeFiber } from '@react-three/fiber';
+declare type OutlinesProps = JSX.IntrinsicElements['group'] & {
+    color: ReactThreeFiber.Color;
+    opacity: number;
+    transparent: boolean;
+    thickness: number;
+    angle: number;
+};
+export declare function Outlines({ color, opacity, transparent, thickness, angle, ...props }: OutlinesProps): JSX.Element;
+export {};

package/core/Outlines.js

@@ -25,7 +25,13 @@ const OutlinesMaterial = shaderMaterial({
 	   #include <morphtarget_vertex>
 	   #include <skinning_vertex>
      #include <project_vertex>
-     vec3 newPosition = transformed + normal * thickness;
+     vec4 transformedNormal = vec4(normal, 0.0);
+     vec4 transformedPosition = vec4(transformed, 1.0);
+     #ifdef USE_INSTANCING
+       transformedNormal = instanceMatrix * transformedNormal;
+       transformedPosition = instanceMatrix * transformedPosition;
+     #endif
+     vec3 newPosition = transformedPosition.xyz + transformedNormal.xyz * thickness;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
    }`, `uniform vec3 color;
    uniform float opacity;
@@ -60,6 +66,12 @@ function Outlines({
         });
         mesh.bind(parent.skeleton, parent.bindMatrix);
         group.add(mesh);
+      } else if (parent.isInstancedMesh) {
+        mesh = new THREE.InstancedMesh(parent.geometry, new OutlinesMaterial({
+          side: THREE.BackSide
+        }), parent.count);
+        mesh.instanceMatrix = parent.instanceMatrix;
+        group.add(mesh);
       } else {
         mesh = new THREE.Mesh();
         mesh.material = new OutlinesMaterial({

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: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)};
+"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:f,loop:o,numberOfFrames:m,autoPlay:l,animationNames:i,onStart:p,onEnd:h,onLoopEnd:w,onFrame:y,play:d,pause:S,flipX:g,alphaTest:x,children:b,asSprite:E,...z},F)=>{r.useThree((e=>e.viewport));const A=a.useRef(null),[R,O]=a.useState(!1),j=a.useRef(!1),v=a.useRef(),L=a.useRef(),T=a.useRef(window.performance.now()),M=a.useRef(),P=a.useRef(e||0),N=a.useRef(s||""),k=1e3/(n||30),[_,q]=a.useState(new u.Texture),D=a.useRef(0),[C,I]=a.useState([1,1,1]),U=g?-1:1,[B,G]=a.useState(null==E||E);const W=(e,r)=>{const t=r/e;return L.current.scale.set(1,t,1),[1,t,1]};a.useEffect((()=>{if(c&&f)!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,f,X);else if(f){const e=new u.TextureLoader;new Promise((r=>{e.load(f,r)})).then((e=>{X(null,e)}))}}),[]),a.useEffect((()=>{G(null==E||E)}),[E]),a.useLayoutEffect((()=>{J()}),[_,g]),a.useEffect((()=>{}),[S]),a.useEffect((()=>{N.current!==s&&s&&(P.current=0,N.current=s,j.current=!1)}),[s]);const X=(e,r)=>{if(null===e){if(r&&m){const e=r.image.width,t=r.image.height,n=e/m,a=t;if(M.current=r,D.current=m,A.current={frames:[],meta:{version:"1.0",size:{w:e,h:t},scale:"1"}},parseInt(n.toString(),10)===n)for(let e=0;e<m;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:H(),D.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length,M.current=r;const{w:t,h:n}=K(e.frames).sourceSize,a=W(t,n);I(a),v.current&&(v.current.map=r)}r.premultiplyAlpha=!1,q(r)},H=()=>{const e={},r=A.current,t=i;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,f=s.y,o=s.w,m=s.h,l=u.sourceSize.w,i=u.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:c,y:f,w:o,h:m,frame:s,sourceSize:{w:l,h:i}})}}return e},J=()=>{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};v.current.map.wrapS=v.current.map.wrapT=u.RepeatWrapping,v.current.map.center.set(0,0),v.current.map.repeat.set(1*U/(e.w/t),1/(e.h/n));const a=1/((e.h-1)/n);v.current.map.offset.x=0,v.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=v.current)&&u.map&&(S||j.current||!l&&!d||((()=>{const r=window.performance.now(),n=r-T.current,{meta:{size:a},frames:u}=A.current,{w:c,h:f}=K(u).sourceSize,m=Array.isArray(u)?u:s?u[s]:[];let l=0,i=0;const p=t||m.length-1;if(P.current>p&&(P.current=o&&null!=e?e:0,o?null==w||w({currentFrameName:s,currentFrame:P.current}):(null==h||h({currentFrameName:s,currentFrame:P.current}),j.current=!0),!o))return;if(n<=k)return;T.current=r-n%k,W(c,f);const y=(a.w-1)/c,d=(a.h-1)/f,{frame:{x:S,y:g},sourceSize:{w:x,h:b}}=m[P.current],E=1/y,z=1/d;l=U>0?E*(S/x):E*(S/x)-v.current.map.repeat.x,i=Math.abs(1-z)-z*(g/b),v.current.map.offset.x=l,v.current.map.offset.y=i,P.current+=1})(),y&&y({currentFrameName:N.current,currentFrame:P.current})))}));const K=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},B&&a.createElement("sprite",{ref:L,scale:C},a.createElement("spriteMaterial",{toneMapped:!1,ref:v,map:_,transparent:!0,alphaTest:null!=x?x:0})),!B&&a.createElement("mesh",{ref:L,scale:C},a.createElement("planeGeometry",{args:[1,1]}),a.createElement("meshBasicMaterial",{toneMapped:!1,side:u.DoubleSide,ref:v,map:_,transparent:!0,alphaTest:null!=x?x:0}))),b)};

package/core/SpriteAnimator.d.ts

@@ -19,5 +19,6 @@ export declare type SpriteAnimatorProps = {
     flipX?: boolean;
     position?: Array<number>;
     alphaTest?: number;
+    asSprite?: boolean;
 } & JSX.IntrinsicElements['group'];
 export declare const SpriteAnimator: React.FC<SpriteAnimatorProps>;

package/core/SpriteAnimator.js

@@ -22,6 +22,7 @@ const SpriteAnimator = ({
   flipX,
   alphaTest,
   children,
+  asSprite,
   ...props
 }, fref) => {
   useThree(state => state.viewport);
@@ -39,6 +40,7 @@ const SpriteAnimator = ({
   const totalFrames = React.useRef(0);
   const [aspect, setAspect] = React.useState([1, 1, 1]);
   const flipOffset = flipX ? -1 : 1;
+  const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite !== null && asSprite !== void 0 ? asSprite : true);
 
   function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
     const textureLoader = new THREE.TextureLoader();
@@ -71,6 +73,9 @@ const SpriteAnimator = ({
       });
     }
   }, []);
+  React.useEffect(() => {
+    setDisplayAsSprite(asSprite !== null && asSprite !== void 0 ? asSprite : true);
+  }, [asSprite]);
   React.useLayoutEffect(() => {
     modifySpritePosition();
   }, [spriteTexture, flipX]);
@@ -330,7 +335,7 @@ const SpriteAnimator = ({
 
   return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
-  }, /*#__PURE__*/React.createElement("sprite", {
+  }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {
     ref: spriteRef,
     scale: aspect
   }, /*#__PURE__*/React.createElement("spriteMaterial", {
@@ -339,6 +344,18 @@ const SpriteAnimator = ({
     map: spriteTexture,
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
+  })), !displayAsSprite && /*#__PURE__*/React.createElement("mesh", {
+    ref: spriteRef,
+    scale: aspect
+  }, /*#__PURE__*/React.createElement("planeGeometry", {
+    args: [1, 1]
+  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    toneMapped: false,
+    side: THREE.DoubleSide,
+    ref: matRef,
+    map: spriteTexture,
+    transparent: true,
+    alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
   }))), children);
 };