@react-three/drei 9.85.2 → 9.86.1

package/README.md

@@ -4471,7 +4471,9 @@ attribute vec3 color;
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-cloud--cloud-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
 <p>
+  <a href="https://codesandbox.io/s/gwthnh"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/gwthnh/screenshot.png" alt="Demo"/></a>
   <a href="https://codesandbox.io/s/mbfzf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/mbfzf/screenshot.png" alt="Demo"/></a>
+  
 </p>
 
 Particle based cloud.
@@ -4495,6 +4497,8 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
   segments?: number
   /** The box3 bounds of the cloud, default: [5, 1, 1] */
   bounds?: ReactThreeFiber.Vector3
+  /** How to arrange segments inside the bounds, default: inside (cloud are smaller are the edges) */
+  concentrate?: 'inside' | 'outside'
   /** The general scale of the segments */
   scale?: ReactThreeFiber.Vector3
   /** The volume/thickness of the segments, default: 6 */

package/core/Cloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),a=require("./useTexture.cjs.js"),o=require("uuid");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 i=u(e),s=c(t);const l=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,p=new r.Vector3,m=new r.Quaternion,g=new r.Vector3,h=s.createContext(null),y=s.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:u,limit:c=200,...y},x)=>{var b,M;const v=s.useMemo((()=>class extends t{constructor(){super(),this.onBeforeCompile=e=>{e.vertexShader="attribute float opacity;\n               varying float vOpacity;\n              "+e.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = opacity;\n                "),e.fragmentShader="varying float vOpacity;\n              "+e.fragmentShader.replace("#include <opaque_fragment>","#include <opaque_fragment>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                ")}}}),[t]);n.extend({CloudMaterial:v});const w=s.useRef(null),C=s.useRef([]),E=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>1)))),[c]),A=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>[1,1,1])).flat())),[c]),O=a.useTexture(o);let j,R=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1);n.useFrame(((e,t)=>{for(R=e.clock.getElapsedTime(),l.copy(w.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(p,m,g),_=0;_<C.current.length;_++)j=C.current[_],j.ref.current.matrixWorld.decompose(d,f,g),d.add(j.position).applyQuaternion(f),f.copy(m).multiply(q.setFromAxisAngle(F,j.rotation+=t*j.rotationFactor)),g.addScalar(j.volume+(1+Math.sin(R*j.density*j.speed))/2*j.growth),j.matrix.compose(d,f,g).premultiply(l),j.dist=d.distanceTo(p);for(C.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<C.current.length;_++)j=C.current[_],E[_]=j.opacity*(j.dist<j.fade-1?j.dist/j.fade:1),w.current.setMatrixAt(_,j.matrix),w.current.setColorAt(_,j.color);w.current.geometry.attributes.opacity.needsUpdate=!0,w.current.instanceMatrix.needsUpdate=!0,w.current.instanceColor&&(w.current.instanceColor.needsUpdate=!0)})),s.useLayoutEffect((()=>{const e=Math.min(c,void 0!==u?u:c,C.current.length);w.current.count=e,w.current.instanceMatrix.updateRange.count=16*e,w.current.instanceColor&&(w.current.instanceColor.updateRange.count=3*e),w.current.geometry.attributes.opacity.updateRange.count=e}));let P=[null!==(b=O.image.width)&&void 0!==b?b:1,null!==(M=O.image.height)&&void 0!==M?M:1],S=Math.max(P[0],P[1]);return P=[P[0]/S,P[1]/S],s.createElement("group",i.default({ref:x},y),s.createElement(h.Provider,{value:C},e,s.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:w,args:[null,null,c]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[A,3]}),s.createElement("planeGeometry",{args:[...P]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-opacity",args:[E,1]})),s.createElement("cloudMaterial",{key:t.name,map:O,transparent:!0,depthWrite:!1}))))})),x=s.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:c="#ffffff",fade:l=10,volume:d=6,growth:f=4,seed:p=Math.random(),...m},g)=>{function y(){const e=1e4*Math.sin(p++);return e-Math.floor(e)}const x=s.useContext(h),b=s.useRef(null),[M]=s.useState((()=>o.v4())),v=s.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:M,index:t,ref:b,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,M]);return s.useLayoutEffect((()=>{v.forEach(((r,o)=>{n.applyProps(r,{color:c,speed:t,growth:f,opacity:e,fade:l,bounds:a,density:Math.max(.5,y()),rotationFactor:Math.max(.2,.5*y())*t}),u>1&&r.position.copy(r.bounds).multiply({x:2*y()-1,y:2*y()-1,z:2*y()-1});const i=Math.abs(r.position.x),s=Math.abs(r.position.y),p=Math.abs(r.position.z),m=Math.max(i,s,p);r.length=1,i===m&&(r.length-=i/r.bounds.x),s===m&&(r.length-=s/r.bounds.y),p===m&&(r.length-=p/r.bounds.z),r.volume=Math.max(.25,r.length)*d}))}),[a,l,c,e,f,d,p,u,t]),s.useLayoutEffect((()=>{const e=v;return x.current=[...x.current,...e],()=>{x.current=x.current.filter((e=>e.uuid!==M))}}),[v]),s.useImperativeHandle(g,(()=>b.current),[]),s.createElement("group",i.default({ref:b},m))})),b=s.forwardRef(((e,t)=>s.useContext(h)?s.createElement(x,i.default({ref:t},e)):s.createElement(y,null,s.createElement(x,i.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=x,exports.Clouds=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),a=require("./useTexture.cjs.js"),o=require("uuid");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 i=u(e),s=c(t);const l=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,p=new r.Vector3,m=new r.Quaternion,g=new r.Vector3,h=s.createContext(null),y=s.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:u,limit:c=200,...y},x)=>{var b,M;const v=s.useMemo((()=>class extends t{constructor(){super(),this.onBeforeCompile=e=>{e.vertexShader="attribute float opacity;\n               varying float vOpacity;\n              "+e.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = opacity;\n                "),e.fragmentShader="varying float vOpacity;\n              "+e.fragmentShader.replace("#include <opaque_fragment>","#include <opaque_fragment>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                ")}}}),[t]);n.extend({CloudMaterial:v});const w=s.useRef(null),C=s.useRef([]),E=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>1)))),[c]),A=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>[1,1,1])).flat())),[c]),O=a.useTexture(o);let j,R=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),V=new r.Vector3;n.useFrame(((e,t)=>{for(R=e.clock.getElapsedTime(),l.copy(w.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(p,m,g),_=0;_<C.current.length;_++)j=C.current[_],j.ref.current.matrixWorld.decompose(d,f,g),d.add(V.copy(j.position).applyQuaternion(f)),f.copy(m).multiply(q.setFromAxisAngle(F,j.rotation+=t*j.rotationFactor)),g.addScalar(j.volume+(1+Math.sin(R*j.density*j.speed))/2*j.growth),j.matrix.compose(d,f,g).premultiply(l),j.dist=d.distanceTo(p);for(C.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<C.current.length;_++)j=C.current[_],E[_]=j.opacity*(j.dist<j.fade-1?j.dist/j.fade:1),w.current.setMatrixAt(_,j.matrix),w.current.setColorAt(_,j.color);w.current.geometry.attributes.opacity.needsUpdate=!0,w.current.instanceMatrix.needsUpdate=!0,w.current.instanceColor&&(w.current.instanceColor.needsUpdate=!0)})),s.useLayoutEffect((()=>{const e=Math.min(c,void 0!==u?u:c,C.current.length);w.current.count=e,w.current.instanceMatrix.updateRange.count=16*e,w.current.instanceColor&&(w.current.instanceColor.updateRange.count=3*e),w.current.geometry.attributes.opacity.updateRange.count=e}));let P=[null!==(b=O.image.width)&&void 0!==b?b:1,null!==(M=O.image.height)&&void 0!==M?M:1],S=Math.max(P[0],P[1]);return P=[P[0]/S,P[1]/S],s.createElement("group",i.default({ref:x},y),s.createElement(h.Provider,{value:C},e,s.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:w,args:[null,null,c]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[A,3]}),s.createElement("planeGeometry",{args:[...P]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-opacity",args:[E,1]})),s.createElement("cloudMaterial",{key:t.name,map:O,transparent:!0,depthWrite:!1}))))})),x=s.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:c="#ffffff",fade:l=10,volume:d=6,growth:f=4,concentrate:p="inside",seed:m=Math.random(),...g},y)=>{function x(){const e=1e4*Math.sin(m++);return e-Math.floor(e)}const b=s.useContext(h),M=s.useRef(null),[v]=s.useState((()=>o.v4())),w=s.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:v,index:t,ref:M,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,v]);return s.useLayoutEffect((()=>{w.forEach(((r,o)=>{n.applyProps(r,{color:c,speed:t,growth:f,opacity:e,fade:l,bounds:a,density:Math.max(.5,x()),rotationFactor:Math.max(.2,.5*x())*t}),u>1&&r.position.copy(r.bounds).multiply({x:2*x()-1,y:2*x()-1,z:2*x()-1});const i=Math.abs(r.position.x),s=Math.abs(r.position.y),m=Math.abs(r.position.z),g=Math.max(i,s,m);r.length="inside"===p?1:-1,i===g&&(r.length-=i/r.bounds.x),s===g&&(r.length-=s/r.bounds.y),m===g&&(r.length-=m/r.bounds.z),r.volume=Math.max(.25,r.length)*d}))}),[p,a,l,c,e,f,d,m,u,t]),s.useLayoutEffect((()=>{const e=w;return b.current=[...b.current,...e],()=>{b.current=b.current.filter((e=>e.uuid!==v))}}),[w]),s.useImperativeHandle(y,(()=>M.current),[]),s.createElement("group",i.default({ref:M},g))})),b=s.forwardRef(((e,t)=>s.useContext(h)?s.createElement(x,i.default({ref:t},e)):s.createElement(y,null,s.createElement(x,i.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=x,exports.Clouds=y;

package/core/Cloud.d.ts

@@ -18,6 +18,7 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
     seed?: number;
     segments?: number;
     bounds?: ReactThreeFiber.Vector3;
+    concentrate?: 'inside' | 'outside';
     scale?: ReactThreeFiber.Vector3;
     volume?: number;
     growth?: number;

package/core/Cloud.js

@@ -75,6 +75,7 @@ const Clouds = /*@__PURE__*/React.forwardRef(({
   let config;
   const qat = new Quaternion();
   const dir = new Vector3(0, 0, 1);
+  const pos = new Vector3();
   useFrame((state, delta) => {
     t = state.clock.getElapsedTime();
     parentMatrix.copy(instance.current.matrixWorld).invert();
@@ -82,7 +83,7 @@ const Clouds = /*@__PURE__*/React.forwardRef(({
     for (index = 0; index < clouds.current.length; index++) {
       config = clouds.current[index];
       config.ref.current.matrixWorld.decompose(translation, rotation, scale);
-      translation.add(config.position).applyQuaternion(rotation);
+      translation.add(pos.copy(config.position).applyQuaternion(rotation));
       rotation.copy(cquat).multiply(qat.setFromAxisAngle(dir, config.rotation += delta * config.rotationFactor));
       scale.addScalar(config.volume + (1 + Math.sin(t * config.density * config.speed)) / 2 * config.growth);
       config.matrix.compose(translation, rotation, scale).premultiply(parentMatrix);
@@ -147,6 +148,7 @@ const CloudInstance = /*@__PURE__*/React.forwardRef(({
   fade = 10,
   volume = 6,
   growth = 4,
+  concentrate = 'inside',
   seed = Math.random(),
   ...props
 }, fref) => {
@@ -193,13 +195,13 @@ const CloudInstance = /*@__PURE__*/React.forwardRef(({
       const yDiff = Math.abs(cloud.position.y);
       const zDiff = Math.abs(cloud.position.z);
       const max = Math.max(xDiff, yDiff, zDiff);
-      cloud.length = 1;
+      cloud.length = concentrate === 'inside' ? 1 : -1;
       if (xDiff === max) cloud.length -= xDiff / cloud.bounds.x;
       if (yDiff === max) cloud.length -= yDiff / cloud.bounds.y;
       if (zDiff === max) cloud.length -= zDiff / cloud.bounds.z;
       cloud.volume = Math.max(0.25, cloud.length) * volume;
     });
-  }, [bounds, fade, color, opacity, growth, volume, seed, segments, speed]);
+  }, [concentrate, bounds, fade, color, opacity, growth, volume, seed, segments, speed]);
   React.useLayoutEffect(() => {
     const temp = clouds;
     parent.current = [...parent.current, ...temp];