插件介绍
视频预览:
清晰版跳转 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 的团队
- 希望保留源码控制权与二次开发能力的商业项目
🚀 快速接入
- 安装本插件 → 自动获得
flameFireComponent+flame4RealComponent两个组件 - 在 tvt.js 基座或编辑器中拖入场景
- 通过参数面板实时调整效果
- 需要定制?打开源码即改
