tsParticles 生物荧光（Bioluminescence）调色板：深色水底光效的粒子着色指南

tsParticles 生物荧光Bioluminescence调色板深色水底光效的粒子着色指南【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles本文以 tsParticles 仓库中的tsparticles/palette-bioluminescence调色板为线索讲解如何在 tsParticles 粒子系统中快速应用一套“深海生物荧光”配色深黑背景、从墨绿到莹绿的发光粒子配合screen混合模式呈现自发光质感。读完本文你将掌握该调色板的完整色彩构成、三种接入方式CDN / npm / 框架组件、其底层注册与解析机制以及如何在此基础上自由覆盖配置。调色板是什么它定义颜色不定义行为bioluminescence是 tsParticles 调色板Palette体系中的一员。与预设Preset不同调色板只负责提供一组配色粒子填充色、背景色、混合模式不包含粒子的数量、形状、运动等完整行为。正如该调色板的 README 所强调的palette 定义颜色而不是完整行为所以使用时要把它和一个运行时包如tsparticles/basic以及一份最小化的粒子配置组合起来。官方推荐的三步接入流程Quick checklist安装tsparticles/engine或使用下方的 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadBioluminescencePalette在配置中通过palette: bioluminescence应用调色板并补充粒子配置。色彩构成一览该调色板提供 7 个粒子填充色、1 个背景色并指定了screen混合模式与启用填充类型色值说明粒子填充色 1#001111接近黑色的墨绿用于暗部粒子粒子填充色 2#003322深绿粒子填充色 3#006644中绿粒子填充色 4#00AA77青绿粒子填充色 5#00FFAA亮绿主发光色粒子填充色 6#88FFDD浅青绿粒子填充色 7#CCFFEE近白淡绿用于高光粒子背景色#000505近乎纯黑的深底Blend mode混合模式screen滤色使粒子颜色与背景叠加后变亮模拟荧光自发光Fill填充true粒子以填充色绘制。以上数值并非散落在文档中的营销描述而是直接对应源码中的实际定义。查看 options.ts可以看到一份完整的IPalette对象import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Bioluminescence, background: #000505, blendMode: screen, colors: { fill: { enable: true, value: [ #001111, #003322, #006644, #00AA77, #00FFAA, #88FFDD, #CCFFEE, ], }, }, };颜色的渐变设计#001111 → #003322 → … → #CCFFEE从暗到亮逐步提亮配合深黑背景正是为了还原深海生物荧光的层次感。CDN 方式接入浏览器 / Vanilla JS / jQuery在浏览器中直接使用 CDN bundle 是最快的方式。该调色板依赖于基础运行时包因此需要同时引入两个脚本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-bioluminescence4/tsparticles.palette-coloredSmokeAmber.min.js/script注意README 中给出的 UMD 文件名tsparticles.palette-coloredSmokeAmber.min.js以及 npm 下载徽章中的coloredSmokeAmber字样与该包实际名称bioluminescence不一致可以推断是从其他调色板页面复制遗留的问题。真实的接入方式是通过browser.ts将全局函数注册为loadBioluminescencePalette见 browser.ts因此以脚本加载后全局可用的函数名为准。脚本加载完成后即可初始化引擎并加载调色板(async engine { await loadBasic(engine); await loadBioluminescencePalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: bioluminescence, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这段示例的配置要点number.value: 200控制粒子总量荧光氛围通常需要较多粒子shape.type: circle圆形粒子最贴合“光点”的意象size.value: { min: 10, max: 15 }粒子尺寸在 10~15 之间随机形成大小错落的发光点move.speed: 2缓慢漂移模拟水中的悬浮感palette: bioluminescence关键的调色板引用字段引擎据此在已注册的调色板中查找名为bioluminescence的色板。npm 原生 JavaScript 方式在基于打包工具Webpack / Vite / Rollup 等的项目中使用先安装依赖npm install tsparticles/engine tsparticles/basic tsparticles/palette-bioluminescence然后以 ESM 方式导入并初始化import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadBioluminescencePalette } from tsparticles/palette-bioluminescence; (async engine { await loadBasic(engine); await loadBioluminescencePalette(engine); await engine.load({ id: tsparticles, options: { fullScreen: { enable: true }, // 全屏铺底背景 background: { color: #000505 }, // 背景也可在选项中显式声明 particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: bioluminescence, }, }); })(tsParticles);由于 package.json 完整声明了exports映射import/require/browser/umd/types这套包可以无缝工作于 ESM、CommonJS 与直接 script 引入三种场景。集成到框架组件库如果你在使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 中的某个 tsParticles 官方组件库接入方式与原生流程一致在组件初始化阶段调用loadBioluminescencePalette然后在 options 中设置palette: bioluminescence。调色板的加载是全局注册行为engine.pluginManager.addPalette一旦注册对该引擎创建的所有实例都可用。源码解析一个调色板是如何生效的1. 数据契约IPalette接口引擎侧定义了调色板的数据契约见 IPalette.tsIPalettebackground背景色、blendMode画布混合模式类型为GlobalCompositeOperation、colors一组或多组颜色配置、name名称IPaletteColorsFillenable是否启用填充、opacity可选的不透明度范围、value单个或多个色值IPaletteColorsStrokeopacity、width描边宽度范围、value用于需要描边的粒子。bioluminescence只使用fill分支enable: true 7 个色值没有stroke也没有opacity因此粒子会以不透明填充绘制。2. 注册机制loadBioluminescencePalette入口函数位于 index.tsexport async function loadBioluminescencePalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它以bioluminescence为键将前面那份options注册进引擎的插件管理器。在 PluginManager.ts 中addPalette只是把键值对存入palettes这个Mapstring, IPalette并可通过getPalette(name)PluginManager.ts按名取回。3. 选项加载链路palette: bioluminescence发生了什么当配置中出现palette字段时引擎会在加载 Options 时执行#importPalette见 Options.ts 与 Options.ts#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, }); }也就是说设置palette: bioluminescence会被引擎自动展开为三层效果背景background.color被设置为#000505混合模式blend.enable置为trueblend.mode置为screen这正是文档表格中 “Blend mode: screen” 的引擎落地位置粒子颜色把调色板名传递给粒子层级的ParticlesOptions。4. 粒子层的颜色展开paint 绘制在粒子层级ParticlesOptions.ts 的#importPalette会取出colors.fill.value中的全部色值映射为粒子绘制paint的填充色列表如果调色板包含stroke分支则同步生成描边配置。这解释了为什么文档示例中不需要再手写particles.color——调色板已把颜色注入粒子的绘制流程且多个色值会自动让不同粒子随机取色形成同一色系内的明暗差异。5. 懒加载与浏览器全局懒加载变体import(tsparticles/palette-bioluminescence/lazy)对应 index.lazy.ts会延迟到注册时才动态import(./options.js)加载配色数据适合希望进一步拆分首屏 bundle 的场景浏览器全局browser.ts 将loadBioluminescencePalette挂到globalThis上供 CDN / Vanilla JS 场景直接调用。自定义与覆盖README 特别强调调色板中的所有配置都可以像标准 tsParticles 安装一样被覆盖。你无需修改包源码只需在 options 中显式声明想覆盖的字段例如const options { background: { color: #001010 }, // 覆盖调色板背景 particles: { number: { value: 400 }, // 增加粒子密度 shape: { type: circle }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 1, outModes: { default: out } }, opacity: { value: 0.8 }, // 叠加透明度动画 }, palette: bioluminescence, };由于#importPalette是通过this.load(...)以“合并加载”的方式注入配置的用户在 options 中显式书写的字段会按 tsParticles 的加载顺序覆盖调色板提供的默认值。这让你既可以“一键获得生物荧光配色”又可以在其基础上调整出符合自己产品气质的变体。小结bioluminescence调色板是一个“轻量配色插件”的典型范例用约 20 行的IPalette对象options.ts配合一个注册函数即可为任何 tsParticles 场景注入深海水下般的荧光配色。理解它的三个关键点——数据契约IPalette、注册入口addPalette、加载时的自动展开链路背景 screen混合 粒子 paint 取色你就掌握了 tsParticles 全部调色板的通用接入原理可以举一反三地使用仓库中其他 fantasy 系调色板。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考