火焰特效组件合集

一套面向三维场景与可视化项目的高品质火焰特效组件合集,基于 dynamic-component-service(loadDynamicComponent) 动态组件机制构建,深度融合到 tvt.js 生态,开箱即用、源码可控、可跨编辑器复用。

火焰特效组件合集

一套面向三维场景与可视化项目的高品质火焰特效组件合集,基于 dynamic-component-service(loadDynamicComponent) 动态组件机制构建,深度融合到 tvt.js 生态,开箱即用、源码可控、可跨编辑器复用。

预览截图

插件介绍

视频预览:

清晰版跳转 B站查看详情

📦 包含组件

1. 大型横向喷火(flameFireComponent)

横向大尺度喷射火焰,移植自 KMaterial 工业级火焰着色管线。

  • 10 stages 1 channel 自定义 shader,UV 矩阵动画 + 多层噪声叠加
  • 三种预设风格
    • flame1 — 暖橙黄色喷火
    • flame2 — 大尺度+底色渐变 tint
    • flame3 — 浓烟蓝色喷火
  • 完整暴露 10 项可调参数(动画速度 / 主彩色强度 / 细节强度 / 大噪声 / 二次噪声 / Tint 开关 / 基础发光色 / Alpha 阈值 等)

2. 仿真火焰B(flame4RealComponent)

立体圆台形仿真火焰,带主火苗 + 细节裂纹双层结构。

  • 长循环 mover 噪声 + 短循环细节遮罩,火苗不重复且自然
  • 主火苗、细节裂纹的颜色、强度、噪声、遮罩独立可调
  • 适合作为火炬、灶台、燃烧装置等定点火源

🔌 与 tvt.js 生态深度融合

  • 基于 @originjs/vite-plugin-federation 的动态组件机制,发布即生效
  • 配置好服务地址即可被以下 tvt.js 生态产品直接引用
    • tvt.js 开源基座
    • 区域三维场景编辑器
    • GIS 地理空间编辑器
  • 在编辑器中自动获得:
    • 参数可视化配置面板(颜色 / 滑动条 / 开关 / 下拉等)
    • 与 tvt.js 模型库 / 场景系统 / 高级组件联动
    • 在线预览、调试与导出

⚙️ 纯源码级别,掌控力拉满

不同于二进制黑盒,本插件全部源码开放,包括:

  • Vue 3 + TresJS 组件源码
  • 独立的顶点 / 片元着色器 (.vert / .frag)
  • 顶点几何数据
  • 配套贴图资源
  • dcsConfig 配置文件

你可以:

  • 直接修改源码 — 调整着色器、改写预设、新增材质
  • 二次开发 — 在 tvt.js 基座中以源码形式继续演进
  • 导出为独立包 — 通过编辑器一键导出整套源码

🤖 AI 友好,跨系统迁移零阻力

得益于规整的目录结构(组件 / shader / 贴图 / 配置完全解耦),可以直接交给国内 AI 工具(豆包、通义、Kimi、DeepSeek 等)操作源码包,把组件移植到任意 Three.js / Vue / React 项目,常见场景包括:

  • 移植到自研三维系统
  • 接入业务大屏 / 数字孪生平台
  • 改造为 React Three Fiber 版本
  • 抽离 shader 用于 Babylon.js / Cocos / 原生 WebGL 项目

🎯 适合谁

  • tvt.js / 三维场景编辑器用户
  • 数字孪生、可视化大屏、工业仿真项目开发者
  • 需要高质量火焰效果但不想从零写 shader 的团队
  • 希望保留源码控制权与二次开发能力的商业项目

🚀 快速接入

  1. 安装本插件 → 自动获得 flameFireComponent + flame4RealComponent 两个组件
  2. 在 tvt.js 基座或编辑器中拖入场景
  3. 通过参数面板实时调整效果
  4. 需要定制?打开源码即改

2026-05-21 17:16:25
测试完毕,并上架插件
版本正持续更新和优化,期待更多功能吧