材质编辑器

面向 TvT.js / icegl 生态的材质编辑器插件。支持素材服务即时上传、材质资源、材质通道、贴图系统、轻量参数动画、项目配置导入导出与 JSON 材质资产包。配合区域场景编辑器和gis地图编辑器达到工业级编辑器生产能力

材质编辑器

面向 TvT.js / icegl 生态的材质编辑器插件。支持素材服务即时上传、材质资源、材质通道、贴图系统、轻量参数动画、项目配置导入导出与 JSON 材质资产包。配合区域场景编辑器和gis地图编辑器达到工业级编辑器生产能力

预览截图

插件安装

本插件为TVT.js平台深度定制开发的源码包,如需在其他平台集成使用,建议进行适配性调整以实现最佳兼容效果。

1、点击右侧插件包下载,得到: 'materialEditor.zip' , 并放在 `icegl-three-vue-tres/pluginMaker/install/`

2、请使用命令终端,自行定位到您电脑的目录

cd /icegl-three-vue-tres/

3、输入命里,安装插件

yarn plugin.marker install materialEditor

4、启动预览模式即可:

yarn pre.dev

插件介绍

在线使用地址: https://materialeditor.icegl.cn/#/plugins/materialEditor/index

材质编辑器配套文档: https://docs.icegl.cn/docs/three-vue-tres/material-editor/introduction.html

materialEditor 材质编辑器整体界面

为什么需要独立的材质编辑器?

在三维项目中,模型加载只是第一步。真正影响视觉品质与交付效率的,往往是材质通道组织、贴图映射、参数调试、资源复用以及后续动画表现。传统代码调试需要频繁修改参数、刷新页面和重复定位模型节点,难以形成稳定的资产生产流程。

materialEditor 将这些工作转换为可观察、可操作、可回退的编辑流程:选中模型节点即可定位材质,在同一界面中完成材质层搭建、贴图绑定、效果预览和项目配置保存,让美术效果调整与开发集成之间的沟通成本更低。

核心能力

1. 模型与材质节点定位
通过模型服务载入模型,并利用节点树快速查看模型层级、材质槽位和当前选中状态。
2. 材质通道与材质层
将材质效果组织为清晰的通道和层级,方便叠加、调整顺序、切换状态与持续迭代。
3. 可视化材质参数
集中调整颜色、透明、发光、粗糙度、金属度、法线、环境效果及高级渲染属性。
4. 完整贴图工作流
支持素材贴图、纯色、渐变与线框等来源,并提供目标通道、混合、UV 和空间映射设置。
5. 材质资源复用
将常用材质、通道或贴图组织为资源,减少同类模型反复配置的工作量。
6. 轻量参数动画
为材质颜色、数值与贴图变换添加时间、缓动、循环和结束行为,快速制作动态材质表现。
7. 素材服务即时上传
在编辑过程中管理纹理、图片、视频、环境资源和 JSON 资产,缩短素材准备与验证路径。
8. 历史记录与项目配置
支持操作回退、项目配置导入导出、清空重建和独立预览,便于反复调试与交付确认。

从模型节点到材质资产

左侧工作区负责模型服务、节点树与素材服务。载入模型后,可以沿模型层级快速定位需要处理的材质节点;纹理、环境图、视频和 JSON 等素材则可以在同一编辑流程中进行检索和管理。

模型服务与节点树

用通道和层级组织复杂材质

材质效果不再是散落在代码中的参数。编辑器通过材质通道和材质层组织效果,既能保留模型原有材质,也能按项目需求添加新的颜色、PBR、发光或调节效果,使结构更容易理解和维护。

材质通道与材质层

材质通道与材质层管理

材质参数编辑

可视化材质参数

贴图、映射与资源复用

贴图不仅可以绑定到不同材质目标,还可以继续设置混合方式、重复与裁切、偏移缩放、旋转以及多种空间映射。完成后的材质资源可以在不同节点之间复用,适合持续积累团队自己的材质资产。

材质资源

材质资源管理

贴图 UV 与空间映射

贴图 UV 与空间映射

让材质具备轻量动态表现

无需单独编写时间轴代码,即可为材质参数配置持续时间、缓动、循环和结束行为。它适用于贴图流动、旋转、脉冲、颜色变化等常见动态效果,也可以作为后续业务动画开发的直观原型。

材质参数动画

推荐工作流程

  1. 从模型服务载入待处理模型,在节点树中选择目标材质。
  2. 建立材质通道和材质层,完成基础视觉效果。
  3. 从素材服务选择贴图,并配置目标通道与映射方式。
  4. 将成熟效果保存为材质资源,供其他节点复用。
  5. 按需要添加参数动画,在主视口中持续预览。
  6. 导出项目配置或 JSON 材质资产包,进入后续集成和交付流程。
项目状态可保存、可恢复、可预览

编辑器提供项目配置导入导出与历史记录能力,适合在不同时间继续编辑,也方便将当前模型和材质配置交给独立预览页进行效果确认。

项目配置与历史记录

与 TvT.js 编辑器生态协同

materialEditor 专注于材质资产生产和模型材质绑定,可与区域场景编辑器、地图空间 GIS 编辑器组合使用:

  • 在材质编辑器中制作并验证材质、贴图和参数动画。
  • 在区域场景编辑器中完成园区、工厂、仓储和数字孪生场景编排。
  • 在地图空间 GIS 编辑器中完成投影地图、区域数据和空间场景搭建。
  • 通过配置与资源衔接,形成从材质资产到完整三维项目的生产链路。

查看区域场景编辑器   |   查看地图空间 GIS 编辑器

适用场景

  • 数字孪生、智慧园区、工业可视化项目的模型材质统一制作。
  • 产品展示、展厅大屏和 Web 3D 项目的材质快速调试。
  • 需要沉淀团队材质资源、贴图库和效果模板的项目。
  • 需要源码私有化部署,并继续扩展材质能力或接入自有资源服务的团队。
  • 希望先通过可视化原型确认效果,再进入业务代码二次开发的项目。

购买与集成说明

  • 支持源码交付和私有化部署,可按照项目需求扩展材质能力、资源服务和业务流程。
  • 如需集成到其他 Three.js、TresJS 或自研平台,建议根据目标工程进行适配。
  • 具体授权范围、更新周期与售后支持,以页面右侧所选授权说明为准。

常见问题

1、购买前可以先体验吗?

可以先访问在线编辑器了解整体工作流,并结合配套文档查看各功能面板的操作说明。

2、它与区域场景编辑器、GIS 编辑器是什么关系?

三者关注点不同:材质编辑器负责材质资产和模型材质,区域场景编辑器负责三维场景编排,GIS 编辑器负责地图空间场景。可以根据项目需求独立使用或组合使用。

3、导出的配置能否继续二次开发?

可以。项目配置和材质资产适合进入后续预览、集成与二次开发流程;具体字段与使用方式请以当前版本配套文档为准。

4、其他技术栈可以直接使用吗?

插件针对 TvT.js 工程进行了深度集成。在其他平台使用时,需要结合对方的模型加载、材质运行时、资源管理和状态系统进行适配。

1.5.0 最新

优化材质动画

采用独立动画时间轴,修复动画忽快忽慢、低帧率减速,以及暂停、切换后台和场景导出时的时间异常。

完善多层贴图效果

优化线条强度与混合比例计算,支持多条线、连续透明贴图及材质资源复用,修复多材质串层、重复混合和反相裁剪异常。

修复透明材质显示

修复普通颜色贴图被错误识别为透明材质,导致模型材质深度和遮挡关系异常的问题。

本次更新进一步提升了复杂材质、动态贴图和多层效果的显示稳定性。

本轮更新概览

本轮更新聚焦材质贴图系统:线框渲染支持真实混合方式,UV 的“重复”与“内容缩放”完全拆分,透明贴图可以只作用于相邻线框层,并补充“四边(精简)”网格与独立的预乘透明设置。

01 · WIREFRAME

线框渲染更干净,混合方式真正生效

修复了线框在 Shader 中被固定按“相加”处理的问题。现在“替换 / 相加 / 相乘”会按配置参与最终渲染,线框层也始终显示混合方式选项。

新增“四边(精简)”网格:自动隐藏共面的内部三角边,只保留更接近模型结构的轮廓线;新建线框默认使用该模式,同时保留“四边(近似)”和“三角”模式。

▲ 线框贴图可直接选择“四边(精简)”,并独立设置强度、模式、线宽和混合方式。

02 · UV CONTROL

UV 重复与内容缩放各司其职

此前“缩放”会与纹理重复频率互相影响,调整时不够直观。现在两类参数被明确拆分:

重复 X / Y:控制纹理单元的数量与间距。

内容缩放 X / Y:只改变每个单元内部的纹理大小。

同步优化了投影空间变换的字段命名、UV 动画更新,以及纹理边缘采样:内容缩小时采用平滑遮罩与半像素安全区,减少重复单元边缘的接缝、溢色和闪烁。

▲ 编辑器内已明确提示“重复”和“内容缩放”的差异,参数含义更直观。

03 · TRANSPARENCY

透明贴图支持层级遮罩,预乘透明独立控制

当单层透明贴图紧邻在线框贴图下方时,它现在只控制上一层线框的透明范围,不再改写整个材质的透明度。这使扫描线、局部线框和遮罩组合更容易叠加。

“高级材质”新增预乘透明开关,并与混合模式解耦、随通道配置持久化。基础色贴图或透明贴图存在时会自动保持透明渲染;动画刷新不会再次关闭透明状态。

透明贴图的默认颜色通道在后续兼容调整中最终统一为 RGB,避免对仅提供颜色数据的贴图产生 Alpha 通道假设。

▲ 预乘透明成为独立通道配置,不再由“相乘 / 减法”等混合模式隐式决定。

材质编辑器 v1.2.0

快速预览体验升级

新增多套材质模板与对应预览图,选中卡片即可载入配置并继续编辑。

更新日期:2026.08.10
10 套 新增立方体材质模板
13 个 图文快速预览入口
一键 载入材质配置

本次更新

快速预览由文字菜单升级为分组图卡,查找与试用材质更加直观。

图文选择

每套配置均显示对应效果图,选择前即可确认材质风格。

新增模板

涵盖渐变、扫描、扫光、径向线框、环绕、辉光与玻璃效果。

快速应用

点击预览卡片即可载入,并继续调整材质、贴图和动画参数。

新增材质预览

点击图片可查看原尺寸效果。

提示:模板载入后仍可继续调整材质资源、贴图与动画参数。
1、优化场景UI 以及 联动材质展示
2、打通 区域场景编辑器 生态
测试完毕,并上架插件
版本正持续更新和优化,期待更多功能吧