Next3D 是一个面向场景搭建、材质编辑、后处理调优和交互配置的 Web 3D 编辑器。项目以 Babylon.js 7 为渲染核心，外层结合 React + Ant Design 构建编辑器界面，并在 src/3D/EditorSrc 中实现了完整的编辑器内核、资源管理、渲染插件和场景序列化能力。

从当前代码来看，它不是一个简单的模型查看器，而是一套可持续扩展的 3D 编辑框架：既能加载场景并编辑内容，也能配置渲染效果、管理材质资产、组织场景树、导出结果，并通过插件机制继续扩展功能。

• 在线访问地址：https://blueraining.github.io/Next3DOnLine/home.html#/home
• 哔哩哔哩视频：https://www.bilibili.com/video/BV1S7u7zTE7b/

当前编辑器界面预览如下：

• 编辑器核心通过 Viewer + Editor + AViewerPlugin 组织，渲染、交互、UI、后处理都以插件形式挂载。
• src/3D/EditorSrc/Editor.ts 中已经将场景、材质、拾取、环境、动画、路径、贴花、交互材质等能力按模块注册，后续扩展成本低。
• Viewer 负责渲染循环、事件分发、场景切换、插件生命周期管理，整体结构清晰，适合继续做行业场景定制。

项目内已经集成多套渲染效果插件，不是只停留在基础 PBR：

• Bloom 辉光
• Outline 描边高亮
• GTAO 屏幕空间环境光遮蔽
• SSR 屏幕空间反射
• TAA / FXAA / MSAA 抗锯齿
• Height Fog 高度雾
• Rain / Snow 天气效果
• Sketch 素描风格
• Color Correction 色彩校正
• Chromatic Aberration 色差
• Vignette 暗角
• Sub Surface Scattering 次表面散射
• Refraction 折射
• Deferred Light 延迟光照
• Diffusion Wave 扩散波

这些能力主要集中在 src/3D/EditorSrc/plugins/pipeline。

从代码实现看，当前编辑器已经覆盖了较完整的场景编辑流程：

• 场景树管理与节点选择
• Gizmo 平移、旋转、缩放
• 拖拽导入模型
• 环境球、背景、相机参数调整
• 灯光生成与管理
• 撤销 / 重做
• 截图输出
• 场景配置序列化与回读

这部分能力主要由 PickerPlugin、SceneTreePlugin、ViewerSerializer、undo-redo.ts 等模块支撑。

项目不只是“换贴图”，而是已经实现了可编辑、可扩展的材质体系：

• 自定义 PBRMaterialExtend
• Node Material 扩展节点
• 纹理动画能力
• 材质缩略图渲染
• 材质库与纹理库管理
• 场景材质替换
• 交互材质切换配置

MaterialInteractivePlugin 还能把多个材质绑定到同一对象上，支持做“点击切换材质”这类业务交互。

除了通用渲染能力，项目里还有一些很适合数字孪生、园区、展厅类场景的工具：

• 路径 / 管道生成插件 PathPlugin
• 贴花系统 DecalPlugin
• 扩散波 / 雷达波效果 DiffusionWavePlugin
• 体积效果 VolumePlugin
• 材质信息渲染、深度法线预通道、MRT 支持

这类模块说明项目已经开始往“可视化业务编辑器”而不是纯演示引擎的方向演进。

• AssetManager 负责模型、材质、纹理的统一管理。
• 内置 glTF / GLB 处理链路，并接入 Draco 压缩解码。
• GLTFExporter3 支持导出场景结果。
• ViewerSerializer 会保存环境、相机、插件配置等编辑结果。

这意味着 Next3D 不只是运行时预览器，也具备“编辑后保存 / 再加载”的基础能力。

• 3D 场景加载与预览
• 场景树编辑
• 模型选择与变换控制
• 灯光、环境、背景、相机配置
• 材质库、纹理库、材质缩略图
• 自定义 PBR / Node Material 扩展
• 动画组播放与进度控制
• 路径、管道、贴花、扩散波编辑
• 多种后处理与天气特效
• 场景配置序列化
• 模型导出与截图输出

• React 18
• TypeScript
• Vite 4
• Ant Design 5
• Babylon.js 7
• GLTF / Draco 资源链路

src
├─ 3D
│  ├─ Editor.ts                # 对外暴露的编辑器入口
│  └─ EditorSrc
│     ├─ viewer                # 渲染器、序列化、场景生命周期
│     ├─ assetmanager          # 模型/材质/纹理导入导出
│     ├─ plugins               # 渲染、交互、UI、后处理插件
│     ├─ scene                 # 场景与灯光扩展
│     └─ tools                 # 撤销重做、工具函数、配置辅助
├─ page                        # React 页面与编辑器界面
└─ assets                      # 前端静态资源

• Node.js 16+
• npm / yarn

npm install

npm run start

npm run build

npm run preview

• 群号：535983056

• 微信昵称：蓝色的雨

• 仓库内的静态资源仅限学习、研究、测试和非商业演示使用，不得直接或间接用于商业用途。
• 仓库内的开源代码仅限学习与技术交流使用，不得直接用于商业项目、商业产品或收费服务。
• 任何形式的商业使用、二次商业分发、商业集成或基于本项目开展营利行为，均需提前取得作者单独书面授权。

• LICENSE
• NOTICE
• LEGAL.md