wawa-vfx
Version:
A simple and easy-to-use library for creating visual effects in React Three Fiber.
537 lines (536 loc) • 15.3 kB
JavaScript
import ie, { useRef as y, useEffect as j, forwardRef as fe, useState as Q, useCallback as O, useImperativeHandle as me, useMemo as de } from "react";
import { useFrame as K } from "@react-three/fiber";
import { VFXEmitterCore as Ee, VFXParticlesCore as pe } from "wawa-vfx-vanilla";
import { AppearanceMode as je, RenderMode as Oe, vfxStore as we } from "wawa-vfx-vanilla";
import { useControls as G, button as J, folder as w } from "leva";
import * as q from "three";
var C = { 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 B;
function be() {
if (B) return g;
B = 1;
var o = Symbol.for("react.transitional.element"), p = Symbol.for("react.fragment");
function E(a, n, u) {
var b = null;
if (u !== void 0 && (b = "" + u), n.key !== void 0 && (b = "" + n.key), "key" in n) {
u = {};
for (var i in n)
i !== "key" && (u[i] = n[i]);
} else u = n;
return n = u.ref, {
$$typeof: o,
type: a,
key: b,
ref: n !== void 0 ? n : null,
props: u
};
}
return g.Fragment = p, g.jsx = E, g.jsxs = E, 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 H;
function ve() {
return H || (H = 1, process.env.NODE_ENV !== "production" && (function() {
function o(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === se ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case P:
return "Fragment";
case A:
return "Profiler";
case S:
return "StrictMode";
case ne:
return "Suspense";
case oe:
return "SuspenseList";
case le:
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 re:
return (e.displayName || "Context") + ".Provider";
case ee:
return (e._context.displayName || "Context") + ".Consumer";
case te:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case ae:
return r = e.displayName || null, r !== null ? r : o(e.type) || "Memo";
case D:
r = e._payload, e = e._init;
try {
return o(e(r));
} catch {
}
}
return null;
}
function p(e) {
return "" + e;
}
function E(e) {
try {
p(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var s = r.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return s.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
f
), p(e);
}
}
function a(e) {
if (e === P) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === D)
return "<...>";
try {
var r = o(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var e = N.A;
return e === null ? null : e.getOwner();
}
function u() {
return Error("react-stack-top-frame");
}
function b(e) {
if (V.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function i(e, r) {
function s() {
L || (L = !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
));
}
s.isReactWarning = !0, Object.defineProperty(e, "key", {
get: s,
configurable: !0
});
}
function d() {
var e = o(this.type);
return W[e] || (W[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 R(e, r, s, f, x, v, I, Y) {
return s = v.ref, e = {
$$typeof: c,
type: e,
key: r,
props: v,
_owner: x
}, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: d
}) : 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 t(e, r, s, f, x, v, I, Y) {
var m = r.children;
if (m !== void 0)
if (f)
if (ce(m)) {
for (f = 0; f < m.length; f++)
_(m[f]);
Object.freeze && Object.freeze(m);
} 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 _(m);
if (V.call(r, "key")) {
m = o(e);
var T = Object.keys(r).filter(function(ue) {
return ue !== "key";
});
f = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", z[m + f] || (T = 0 < T.length ? "{" + T.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} />`,
f,
m,
T,
m
), z[m + f] = !0);
}
if (m = null, s !== void 0 && (E(s), m = "" + s), b(r) && (E(r.key), m = "" + r.key), "key" in r) {
s = {};
for (var $ in r)
$ !== "key" && (s[$] = r[$]);
} else s = r;
return m && i(
s,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), R(
e,
m,
v,
x,
n(),
s,
I,
Y
);
}
function _(e) {
typeof e == "object" && e !== null && e.$$typeof === c && e._store && (e._store.validated = 1);
}
var l = ie, c = Symbol.for("react.transitional.element"), M = Symbol.for("react.portal"), P = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), ee = Symbol.for("react.consumer"), re = Symbol.for("react.context"), te = Symbol.for("react.forward_ref"), ne = Symbol.for("react.suspense"), oe = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), le = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), N = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ce = Array.isArray, F = console.createTask ? console.createTask : function() {
return null;
};
l = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var L, W = {}, U = l.react_stack_bottom_frame.bind(
l,
u
)(), X = F(a(u)), z = {};
k.Fragment = P, k.jsx = function(e, r, s, f, x) {
var v = 1e4 > N.recentlyCreatedOwnerStacks++;
return t(
e,
r,
s,
!1,
f,
x,
v ? Error("react-stack-top-frame") : U,
v ? F(a(e)) : X
);
}, k.jsxs = function(e, r, s, f, x) {
var v = 1e4 > N.recentlyCreatedOwnerStacks++;
return t(
e,
r,
s,
!0,
f,
x,
v ? Error("react-stack-top-frame") : U,
v ? F(a(e)) : X
);
};
})()), k;
}
var Z;
function Re() {
return Z || (Z = 1, process.env.NODE_ENV === "production" ? C.exports = be() : C.exports = ve()), C.exports;
}
var h = Re();
const Se = ({
settings: o,
onChange: p,
onRestart: E
}) => {
G("⚙️ Emitter Settings", {
Restart: J(() => E()),
Export: J(() => {
const l = JSON.stringify(_.current);
console.log("📋 Values saved to clipboard: ", l), navigator.clipboard.writeText(l);
})
});
const [{ ...a }, n] = G(() => ({
"🪄 Emitter": w({
duration: 4,
delay: 0,
nbParticles: 2e3,
spawnMode: {
options: ["time", "burst"],
value: "time"
},
loop: !1,
startPositionMin: {
value: [-1, -1, -1],
min: -10,
max: 10,
step: 0.1,
label: "startPositionMin"
},
startPositionMax: {
value: [1, 1, 1],
min: -10,
max: 10,
step: 0.1,
label: "startPositionMax"
},
startRotationMin: {
value: [0, 0, 0],
min: -Math.PI * 2,
max: Math.PI * 2,
step: 0.1,
label: "startRotationMin"
},
startRotationMax: {
value: [0, 0, 0],
min: -Math.PI * 2,
max: Math.PI * 2,
step: 0.1,
label: "startRotationMax"
}
}),
"✨ Particles": w({
particlesLifetime: {
value: [0.1, 1],
min: 0,
max: 10,
step: 0.1,
label: "lifetime"
}
}),
"🌪 Forces": w({
speed: {
value: [5, 20],
min: -100,
max: 100
},
directionMin: {
value: [-1, -1, -1],
min: -1,
max: 1,
step: 0.1
},
directionMax: {
value: [1, 1, 1],
min: -1,
max: 1,
step: 0.1
},
rotationSpeedMin: {
value: [0, 0, 0],
min: 0,
max: 10,
step: 0.1
},
rotationSpeedMax: {
value: [0, 0, 0],
min: 0,
max: 10,
step: 0.1
}
}),
"🎨 Appearance": w({
nbColors: {
options: [1, 2, 3]
},
colorStart: "#ffffff",
colorEnd: "#ffffff",
colorStart2: {
value: "#ff0000",
render: (l) => l("🎨 Appearance.nbColors") > 1
},
colorEnd2: {
value: "#ffffff",
render: (l) => l("🎨 Appearance.nbColors") > 1
},
colorStart3: {
value: "#ff0000",
render: (l) => l("🎨 Appearance.nbColors") > 2
},
colorEnd3: {
value: "#ff0000",
render: (l) => l("🎨 Appearance.nbColors") > 2
},
size: {
value: [0.01, 1],
min: 0,
max: 5,
step: 0.01,
label: "size"
}
})
})), {
nbColors: u,
colorStart2: b,
colorEnd2: i,
colorStart3: d,
colorEnd3: R,
...t
} = {
...a,
colorStart: [a.colorStart],
colorEnd: [a.colorEnd]
};
a.nbColors > 1 && t.colorStart.push(a.colorStart2), a.nbColors > 1 && t.colorEnd.push(a.colorEnd2), a.nbColors > 2 && t.colorStart.push(a.colorStart3), a.nbColors > 2 && t.colorEnd.push(a.colorEnd3);
const _ = y(t);
return _.current = t, j(() => {
if (o) {
const l = {
...o
};
for (let c = 0; c < 2; c++)
o.colorStart && o.colorStart.length > c && (l[c === 0 ? "colorStart" : `colorStart${c + 1}`] = o.colorStart[c], l.nbColors = c + 1), o.colorEnd && o.colorEnd.length > c && (l[c === 0 ? "colorEnd" : `colorEnd${c + 1}`] = o.colorEnd[c]);
n({
...l
});
}
}, [o]), p(t), null;
}, Ae = fe(
({
debug: o,
emitter: p,
settings: E = {},
localDirection: a = !1,
autoStart: n = !0,
...u
}, b) => {
const [i, d] = Q(E), R = y(null), t = y(null);
j(() => (!t.current && R.current && (t.current = new Ee(
p,
i,
void 0,
// Will use the global store
a,
n
), R.current.add(t.current)), () => {
t.current && R.current && (R.current.remove(t.current), t.current = null);
}), []), j(() => {
t.current && t.current.updateSettings(i);
}, [i]);
const _ = O(() => {
t.current && t.current.stopEmitting();
}, []), l = O((S = !1) => {
t.current && t.current.startEmitting(S);
}, []), c = O(
(S, A = !1) => {
t.current && t.current.emitAtPos(S, A);
},
[]
);
me(
b,
() => {
const S = R.current;
return Object.assign(S, {
stopEmitting: _,
startEmitting: l,
emitAtPos: c
});
},
[_, l, c]
), K(({ clock: S }, A) => {
t.current && t.current.update(S.getElapsedTime(), A);
});
const M = O(() => {
t.current && t.current.restart();
}, []), P = de(
() => o ? /* @__PURE__ */ h.jsx(
Se,
{
settings: E,
onChange: d,
onRestart: M
}
) : null,
[o]
);
return /* @__PURE__ */ h.jsxs(h.Fragment, { children: [
P,
/* @__PURE__ */ h.jsx("object3D", { ...u, ref: R })
] });
}
), ge = ({
name: o,
settings: p = {},
alphaMap: E,
geometry: a
}) => {
const n = y(null), [u, b] = Q(null);
return j(() => {
if (!n.current) {
let i;
if (a && "props" in a) {
const d = a.props;
d != null && d.object && d.object instanceof q.BufferGeometry ? i = d.object : d != null && d.args && Array.isArray(d.args) && (i = new q.PlaneGeometry(...d.args));
}
n.current = new pe(
o,
p,
void 0,
// Will use the global store
E,
i
), b(n.current.getMesh());
}
return () => {
n.current && (n.current.dispose(), n.current = null, b(null));
};
}, [o, E]), j(() => {
n.current && n.current.updateSettings(p);
}, [p]), K(({ clock: i }) => {
n.current && n.current.update(i.getElapsedTime());
}), u ? /* @__PURE__ */ h.jsx("primitive", { object: u }) : null;
};
export {
je as AppearanceMode,
Oe as RenderMode,
Ae as VFXEmitter,
ge as VFXParticles,
we as vfxStore
};