材质编辑器

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

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

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

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

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

核心能力

从模型节点到材质资产

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

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

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

材质通道与材质层管理

可视化材质参数

贴图、映射与资源复用

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

材质资源管理

贴图 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 工程进行了深度集成。在其他平台使用时，需要结合对方的模型加载、材质运行时、资源管理和状态系统进行适配。