react-audio-visualizers
Version:
<h1 align="center">React Audio Visualizers</h1>
47 lines (46 loc) • 2.58 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SquaredBar = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var three_1 = require("three");
var ColorUtils_1 = require("../ColorUtils");
var SpectrumVisualizer_1 = require("../../SpectrumVisualizer/SpectrumVisualizer");
var SquaredBar = function (_a) {
var _b = _a.position, x = _b[0], y = _b[1], height = _a.height, width = _a.width, _c = _a.rotation, rotation = _c === void 0 ? 0 : _c, meshRef = _a.meshRef, _d = _a.colors, colors = _d === void 0 ? [SpectrumVisualizer_1.DEFAULT_COLOR] : _d;
var zAxis = (0, react_1.useMemo)(function () { return new three_1.Vector3(0, 0, 1); }, []);
var planeRef = (0, react_1.useMemo)(function () { return meshRef || (0, react_1.createRef)(); }, [meshRef]);
var gradient = (0, react_1.useMemo)(function () { return ColorUtils_1.ColorUtils.getColorGradientTexture(colors); }, [colors]);
var mesh = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsxs)("mesh", __assign({ ref: planeRef }, { children: [(0, jsx_runtime_1.jsx)("planeBufferGeometry", {}, void 0), (0, jsx_runtime_1.jsx)("meshBasicMaterial", { map: gradient }, void 0)] }), void 0)); }, [gradient, planeRef]);
(0, react_1.useEffect)(function () {
var _a, _b;
(_a = planeRef.current) === null || _a === void 0 ? void 0 : _a.position.setX(x);
(_b = planeRef.current) === null || _b === void 0 ? void 0 : _b.position.setY(y);
}, [planeRef, x, y]);
(0, react_1.useEffect)(function () {
var _a;
var meshPosition = (_a = planeRef.current) === null || _a === void 0 ? void 0 : _a.geometry.attributes.position;
meshPosition.setY(0, height);
meshPosition.setY(1, height);
meshPosition.setX(1, width);
meshPosition.setX(3, width);
meshPosition.needsUpdate = true;
}, [planeRef, height, width]);
(0, react_1.useEffect)(function () {
var _a;
(_a = planeRef.current) === null || _a === void 0 ? void 0 : _a.setRotationFromAxisAngle(zAxis, rotation);
}, [planeRef, zAxis, rotation]);
return mesh;
};
exports.SquaredBar = SquaredBar;