wawa-vfx/dist/index.umd.js

A simple and easy-to-use library for creating visual effects in React Three Fiber.

(function(p,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("@react-three/fiber"),require("wawa-vfx-vanilla"),require("leva"),require("three")):typeof define=="function"&&define.amd?define(["exports","react","@react-three/fiber","wawa-vfx-vanilla","leva","three"],c):(p=typeof globalThis<"u"?globalThis:p||self,c(p.WawaVFX={},p.React,p.ReactThreeFiber,p.WawaVFXVanilla,p.Leva,p.THREE))})(this,(function(p,c,X,O,P,K){"use strict";function q(t){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const u in t)if(u!=="default"){const o=Object.getOwnPropertyDescriptor(t,u);Object.defineProperty(f,u,o.get?o:{enumerable:!0,get:()=>t[u]})}}return f.default=t,Object.freeze(f)}const L=q(K);var w={exports:{}},g={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var W;function $(){if(W)return g;W=1;var t=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function u(o,a,d){var R=null;if(d!==void 0&&(R=""+d),a.key!==void 0&&(R=""+a.key),"key"in a){d={};for(var m in a)m!=="key"&&(d[m]=a[m])}else d=a;return a=d.ref,{$$typeof:t,type:o,key:R,ref:a!==void 0?a:null,props:d}}return g.Fragment=f,g.jsx=u,g.jsxs=u,g}var k={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var V;function ee(){return V||(V=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===de?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case y:return"Profiler";case T:return"StrictMode";case le:return"Suspense";case ue:return"SuspenseList";case fe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case M:return"Portal";case ce:return(e.displayName||"Context")+".Provider";case ae:return(e._context.displayName||"Context")+".Consumer";case se:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case U:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function f(e){return""+e}function u(e){try{f(e);var r=!1}catch{r=!0}if(r){r=console;var l=r.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),f(e)}}function o(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===U)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=N.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function R(e){if(G.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function l(){J||(J=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function v(){var e=t(this.type);return B[e]||(B[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,r,l,b,j,S,I,Y){return l=S.ref,e={$$typeof:i,type:e,key:r,props:S,_owner:j},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function n(e,r,l,b,j,S,I,Y){var E=r.children;if(E!==void 0)if(b)if(me(E)){for(b=0;b<E.length;b++)x(E[b]);Object.freeze&&Object.freeze(E)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else x(E);if(G.call(r,"key")){E=t(e);var h=Object.keys(r).filter(function(be){return be!=="key"});b=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",Q[E+b]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,b,E,h,E),Q[E+b]=!0)}if(E=null,l!==void 0&&(u(l),E=""+l),R(r)&&(u(r.key),E=""+r.key),"key"in r){l={};for(var D in r)D!=="key"&&(l[D]=r[D])}else l=r;return E&&m(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,E,S,j,a(),l,I,Y)}function x(e){typeof e=="object"&&e!==null&&e.$$typeof===i&&e._store&&(e._store.validated=1)}var s=c,i=Symbol.for("react.transitional.element"),M=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),ae=Symbol.for("react.consumer"),ce=Symbol.for("react.context"),se=Symbol.for("react.forward_ref"),le=Symbol.for("react.suspense"),ue=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),N=s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Object.prototype.hasOwnProperty,me=Array.isArray,F=console.createTask?console.createTask:function(){return null};s={react_stack_bottom_frame:function(e){return e()}};var J,B={},H=s.react_stack_bottom_frame.bind(s,d)(),Z=F(o(d)),Q={};k.Fragment=C,k.jsx=function(e,r,l,b,j){var S=1e4>N.recentlyCreatedOwnerStacks++;return n(e,r,l,!1,b,j,S?Error("react-stack-top-frame"):H,S?F(o(e)):Z)},k.jsxs=function(e,r,l,b,j){var S=1e4>N.recentlyCreatedOwnerStacks++;return n(e,r,l,!0,b,j,S?Error("react-stack-top-frame"):H,S?F(o(e)):Z)}})()),k}var z;function re(){return z||(z=1,process.env.NODE_ENV==="production"?w.exports=$():w.exports=ee()),w.exports}var A=re();const te=({settings:t,onChange:f,onRestart:u})=>{P.useControls("⚙️ Emitter Settings",{Restart:P.button(()=>u()),Export:P.button(()=>{const s=JSON.stringify(x.current);console.log("📋 Values saved to clipboard: ",s),navigator.clipboard.writeText(s)})});const[{...o},a]=P.useControls(()=>({"🪄 Emitter":P.folder({duration:4,delay:0,nbParticles:2e3,spawnMode:{options:["time","burst"],value:"time"},loop:!1,startPositionMin:{value:[-1,-1,-1],min:-10,max:10,step:.1,label:"startPositionMin"},startPositionMax:{value:[1,1,1],min:-10,max:10,step:.1,label:"startPositionMax"},startRotationMin:{value:[0,0,0],min:-Math.PI*2,max:Math.PI*2,step:.1,label:"startRotationMin"},startRotationMax:{value:[0,0,0],min:-Math.PI*2,max:Math.PI*2,step:.1,label:"startRotationMax"}}),"✨ Particles":P.folder({particlesLifetime:{value:[.1,1],min:0,max:10,step:.1,label:"lifetime"}}),"🌪 Forces":P.folder({speed:{value:[5,20],min:-100,max:100},directionMin:{value:[-1,-1,-1],min:-1,max:1,step:.1},directionMax:{value:[1,1,1],min:-1,max:1,step:.1},rotationSpeedMin:{value:[0,0,0],min:0,max:10,step:.1},rotationSpeedMax:{value:[0,0,0],min:0,max:10,step:.1}}),"🎨 Appearance":P.folder({nbColors:{options:[1,2,3]},colorStart:"#ffffff",colorEnd:"#ffffff",colorStart2:{value:"#ff0000",render:s=>s("🎨 Appearance.nbColors")>1},colorEnd2:{value:"#ffffff",render:s=>s("🎨 Appearance.nbColors")>1},colorStart3:{value:"#ff0000",render:s=>s("🎨 Appearance.nbColors")>2},colorEnd3:{value:"#ff0000",render:s=>s("🎨 Appearance.nbColors")>2},size:{value:[.01,1],min:0,max:5,step:.01,label:"size"}})})),{nbColors:d,colorStart2:R,colorEnd2:m,colorStart3:v,colorEnd3:_,...n}={...o,colorStart:[o.colorStart],colorEnd:[o.colorEnd]};o.nbColors>1&&n.colorStart.push(o.colorStart2),o.nbColors>1&&n.colorEnd.push(o.colorEnd2),o.nbColors>2&&n.colorStart.push(o.colorStart3),o.nbColors>2&&n.colorEnd.push(o.colorEnd3);const x=c.useRef(n);return x.current=n,c.useEffect(()=>{if(t){const s={...t};for(let i=0;i<2;i++)t.colorStart&&t.colorStart.length>i&&(s[i===0?"colorStart":`colorStart${i+1}`]=t.colorStart[i],s.nbColors=i+1),t.colorEnd&&t.colorEnd.length>i&&(s[i===0?"colorEnd":`colorEnd${i+1}`]=t.colorEnd[i]);a({...s})}},[t]),f(n),null},ne=c.forwardRef(({debug:t,emitter:f,settings:u={},localDirection:o=!1,autoStart:a=!0,...d},R)=>{const[m,v]=c.useState(u),_=c.useRef(null),n=c.useRef(null);c.useEffect(()=>(!n.current&&_.current&&(n.current=new O.VFXEmitterCore(f,m,void 0,o,a),_.current.add(n.current)),()=>{n.current&&_.current&&(_.current.remove(n.current),n.current=null)}),[]),c.useEffect(()=>{n.current&&n.current.updateSettings(m)},[m]);const x=c.useCallback(()=>{n.current&&n.current.stopEmitting()},[]),s=c.useCallback((T=!1)=>{n.current&&n.current.startEmitting(T)},[]),i=c.useCallback((T,y=!1)=>{n.current&&n.current.emitAtPos(T,y)},[]);c.useImperativeHandle(R,()=>{const T=_.current;return Object.assign(T,{stopEmitting:x,startEmitting:s,emitAtPos:i})},[x,s,i]),X.useFrame(({clock:T},y)=>{n.current&&n.current.update(T.getElapsedTime(),y)});const M=c.useCallback(()=>{n.current&&n.current.restart()},[]),C=c.useMemo(()=>t?A.jsx(te,{settings:u,onChange:v,onRestart:M}):null,[t]);return A.jsxs(A.Fragment,{children:[C,A.jsx("object3D",{...d,ref:_})]})}),oe=({name:t,settings:f={},alphaMap:u,geometry:o})=>{const a=c.useRef(null),[d,R]=c.useState(null);return c.useEffect(()=>{if(!a.current){let m;if(o&&"props"in o){const v=o.props;v!=null&&v.object&&v.object instanceof L.BufferGeometry?m=v.object:v!=null&&v.args&&Array.isArray(v.args)&&(m=new L.PlaneGeometry(...v.args))}a.current=new O.VFXParticlesCore(t,f,void 0,u,m),R(a.current.getMesh())}return()=>{a.current&&(a.current.dispose(),a.current=null,R(null))}},[t,u]),c.useEffect(()=>{a.current&&a.current.updateSettings(f)},[f]),X.useFrame(({clock:m})=>{a.current&&a.current.update(m.getElapsedTime())}),d?A.jsx("primitive",{object:d}):null};Object.defineProperty(p,"AppearanceMode",{enumerable:!0,get:()=>O.AppearanceMode}),Object.defineProperty(p,"RenderMode",{enumerable:!0,get:()=>O.RenderMode}),Object.defineProperty(p,"vfxStore",{enumerable:!0,get:()=>O.vfxStore}),p.VFXEmitter=ne,p.VFXParticles=oe,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));