# 🧊 TvT.js 简体中文 | [English](./README.md) ## AI 协同的 Web 3D 开源生态 从需求 Spec、AI 协同开发，到图生 3D、场景编辑与插件化交付，TvT.js 让三维创意不只停留在 Demo，而是沿着一条清晰的工程路径走向真实项目。 TvT.js 是 ICEGL 开源的 Web 3D 工程生态，以 Three.js、Vue 3、TresJS 与 Fes.js 为技术底座，面向数字孪生、工业可视化、在线三维编辑器和项目插件化交付场景，永久开源且免费商用。 > **需求描述 → Spec 约束 → AI 协同实现 → 场景验证 → 插件或源码交付**

GitHub last commit AI Spec Driven gitee-starts gitcode-starts bilibili bilibili

## 项目信息 > 如果对您有帮助，欢迎点右上角 “Star⭐” 收藏一下，您的 star 就是我持续开发的动力，感谢！ > 从 2025 年 10 月中旬起，项目已全面升级依赖库，涉及 Vue3、Tres V5、Fes V4、Cientos V4 以及 Three.js (r17x → r18x) 等版本更新。 > 若您是从之前`tvt.js`的V4版本升级，我们有详细的升级方法，请跳转：[icegl.cn/ask/article/22769](https://icegl.cn/ask/article/22769.html) > 旧版V4:[所属分支：tres-v4_fes-v3 ](https://gitee.com/ice-gl/icegl-three-vue-tres/tree/tres-v4_fes-v3/)
tvt webgl tvt.js tvt webgl tvt.js

# 🤖 AI 协同：从一句需求走向可交付三维项目 TvT.js 与 AI 的结合已经进入内容生产和工程开发两条主线：AI 可以参与模型与场景的生成，也可以参与需求分析、插件开发和持续变更。场景配置、插件契约与版本化 Spec 将这两条主线连接起来，让人和 AI 在同一份上下文中协作。 | AI 参与环节 | TvT.js 生态实践 | 形成的结果 | | --- | --- | --- | | 需求与架构 | 通过 `openspec/` 沉淀框架基线、插件契约、运行模式与集成边界；复杂需求可继续拆分为 `proposal`、`spec`、`design` 和 `tasks` | 需求可追踪、行为可验证、变更有边界 | | 工程协同 | `tvt-js-plugin-builder` AI 技能封装插件目录、路由、资源、依赖和多端集成规则 | AI 按项目约定实现，而不是生成难以维护的一次性代码 | | 三维内容生产 | 腾讯混元 3D 开源实践支持本地部署，从图片生成三维模型并导入 TvT.js | 从图片快速获得可继续编辑和集成的三维资产 | | 场景创作 | 区域场景编辑器可承接 AI 生成资产，并持续探索 MCP + 大模型文字生成场景 | 从自然语言或资产雏形继续走向可视化场景 | | 复用与交付 | 统一的插件契约、动态组件服务、场景配置与源码导出链路 | AI 参与的成果仍然可审查、可复用、可维护、可交付 | 这不是在三维框架旁边简单增加一个 AI 入口。Spec 负责说明“结果必须满足什么”，AI 技能负责说明“在这个仓库里应该怎样完成”，插件与编辑器则承接生成结果，让需求、资产、场景和源码真正形成闭环。 - [了解 AI 协同与 Spec 工作流](https://docs.icegl.cn/docs/three-vue-tres/guide/ai-collaboration.html) - [查看 TvT.js OpenSpec 基线](./openspec/) - [查看 TvT.js 插件开发 AI 技能](./skills/tvt-js-plugin-builder/) - [在线体验：混元 3D 图生模型](https://opensource.icegl.cn/#/plugins/hunyuan3D/index) - [打开区域场景编辑器](https://zone3deditor.icegl.cn/#/plugins/zone3Deditor/index) > **能力边界：**图生 3D 需要单独部署模型服务、权重与相应硬件环境；MCP + 大模型文字生成场景仍属于持续探索方向。AI 可以加速生成、修改与检查，但业务语义、视觉质量、性能预算、授权边界和最终发布仍应由人确认。 ## 面向国产化 / 信创环境 Web三维可视化框架 🇨🇳 🚩 [查看国产化说明文档](https://docs.icegl.cn/docs/three-vue-tres/guide/localization.html) - 国产化硬件支持 - 国产操作系统 & 浏览器支持 - 国产化开发 / 部署环境 - 您完全可以把 tvt.js 作为国产化三维可视化项目、数字孪生平台的前端技术底座。 - 我们在所有依赖完全开源的基础上，拥有自主软件知识产权和软件著作权，开源且免费商用。 tres.js webgl three.js # 技术底座与生态 `@ThreeJS @Vue3.x @TresJS @FesJS` > ICEGL 出品，永久开源且免费商用，持续更新 ing。欢迎点击右上角 Star ⭐，共同见证一个面向 AI 时代持续演进的 Web 3D 开源生态。 本项目建立在四大开源技术底座之上，并通过插件、编辑器、动态组件与 AI 协同工作流，将渲染能力继续延伸到项目交付： | 生态 | 说明 | | --- | --- | | 🎲 [ThreeJS](https://threejs.org)
three npm | 大名鼎鼎的基于浏览器渲染、使用 JavaScript 语言的 3D 库。 | | 🍀 [Vue3.x](https://cn.vuejs.org)
vue npm | 易学易用，性能出色，适用场景丰富的 Web 前端框架。 | | ⚡ [TresJS](https://tresjs.org)
tresjs npm | 使用 Vue3.x 组件实现声明式 ThreeJS，做属于前端的三维项目。 | | 🌈 [Fes.js](https://fesjs.mumblefe.cn)
fesjs npm | 提供项目落地所需的路由、布局、数据模型、权限、多语言与 API 等工程能力。 | ## ✨ 动态组件发布与加载服务：[🌏 dcser.icegl.cn](https://dcser.icegl.cn/) > 基于 TvT.js 生态的动态组件发布与加载服务，用于构建更灵活的模块化应用体系。组件需求可通过 Spec 明确注册格式、参数协议、预览方式与编辑器兼容边界，让人工开发或 AI 协同生成的组件都能独立发布、在线加载、调参与持续演进。 tres.js webgl three.js ## 🏕 在线预览：[🌏 opensource.icegl.cn](https://opensource.icegl.cn) - 如果有条件，也可直接访问 github 的镜像站:[🌏 https://hawk86104.github.io](https://hawk86104.github.io/) - 全案例微信小程序生态：[🌏 微信内打开](#小程序://三维开源/456pgpJZBiTctdK) - 全案例微信小程序扫码：tres.js webgl three.js ### 精选在线案例
在线三维场景编辑器
免费导出源码 + 二次开发

在线三维场景编辑器 		智慧机房
编辑器直接落地项目

智慧机房
技术栈拓扑图
编辑器直接落地项目

技术栈拓扑图 		混元世界
编辑器直接落地项目

混元世界
炼化智能工厂可视化
编辑器直接落地项目

炼化智能工厂可视化 		智能办公空间
编辑器直接落地项目

智能办公空间
无人机组可视化
编辑器直接落地项目

无人机组可视化 		低像素炼油厂
免费案例

低像素炼油厂
低像素风格机房
编辑器直接落地项目

低像素风格机房 		塑料制品厂三维
编辑器直接落地项目

塑料制品厂三维
智能仓储管理
编辑器直接落地项目

智能仓储管理 		海洋船运可视化
免费案例

海洋船运可视化
财报分析之三维图
编辑器直接落地项目

财报分析之三维图 		草履虫动画编辑器
在线动画编辑器

草履虫动画编辑器
地图空间编辑器
面向投影地图场景的 GIS 编辑器

地图空间编辑器 		多套倾斜摄影3D
编辑器直接落地项目

多套倾斜摄影3D
> 因项目经常更新编译，如发现访问错误，请清空浏览器缓存。 three.js tres.js webgl tvt.js three.js tres.js webgl tvt.js 更多演示请进入预览页面 ### 敬请右上角一键三连: 关注 💛 点赞 ⭐ fork👣 # ✅ 快速开始 > 推荐使用 Node.js >= 20.18。 | 步骤 | 命令 / 操作 | 说明 | | --- | --- | --- | | 1 | `git clone` 或直接下载本项目 | 获取项目源码 | | 2 | `cd` 到项目根目录 | 进入项目目录 | | 3 | `yarn` | 安装依赖 | | 4 | `yarn pre.dev` | 预览目录下的调试模式 | | 5 | `yarn dev` | 自己项目下的调试模式 | | 6 | `yarn pre.build` | 预览目录下的编译打包 | | 7 | `yarn build` | 自己项目下的编译打包 | | 8 | `yarn pre.dev.one` | 只展示某一个案例 / 插件 | | 9 | `yarn pre.build.one` | 针对某一个案例 / 插件打包，会根据配置下的依赖插件项保留资源，其余资源删除 | | 10 | `yarn both` | 同时启动 `dev` 和 `pre.dev`，可以边调试自己的项目，边对照移植样例和插件 | ![展示](./preview/compileMode.png) # 📖 文档 ## 使用说明：[🌏docs.icegl.cn](https://docs.icegl.cn/) > 推荐先读：[🤖 AI 协同与 Spec 工作流](https://docs.icegl.cn/docs/three-vue-tres/guide/ai-collaboration.html)。它介绍了图生 3D、OpenSpec 基线、AI 插件开发技能，以及“需求先成为约束、实现再进入交付”的协作方式。
三维编辑器：[ 📊原生编辑器＋插件生成器 ] UI 编辑器：[ 📊GoView导出＋配置导入组件 ]
tres.js webgl tres.js webgl
uniapp小程序生态：[ 一码全端覆盖-解决方案 ] qiankun微前端：[ 快速接入您现有项目中 ]
tres.js webgl tres.js webgl
# 🧩 丰富的[插件应用市场🌏tvtstore](https://www.icegl.cn/tvtstore) #### [🌏www.icegl.cn/tvtstore](https://www.icegl.cn/tvtstore) 汇集各式各样的项目场景和功能。插件是 ICE 社区生态中重要的一环，也是连接 AI 协同开发、在线编辑器与项目交付的工程边界；无论是完整应用、普通组件、AI 辅助实现的功能，还是由场景编辑器导出的源码，在应用市场中统一称为插件。
插件应用市场 成为作者，加入我们
tres.js webgl tres.js webgl
# ❓ 问题反馈 在使用中有任何问题，请使用以下联系方式联系我们 ### 问答社区: [图形学社区 icegl.cn](https://www.icegl.cn/ask) 图形学问答社区 #### 社区贡献者以及达人: [向他们提问](https://icegl.cn/ask/experts) 图形学问答社区 ### 欢迎大家也加入微信群，QQ群，已有几个群已满，一起学习讨论 webgl。加微信我拉进群
微信小程序生态 微信群 QQ群: 795714357 公众号: ICE图形学社区

tres.js webgl

tres.js webgl

tres.js webgl

tres.js webgl

# ⭐ 点星历史 [![Star History Chart](https://api.star-history.com/svg?repos=hawk86104/three-vue-tres,hawk86104/vue3-ts-cesium-map-show&type=Date)](https://star-history.com/#hawk86104/three-vue-tres&hawk86104/vue3-ts-cesium-map-show&Date) # ™️ 版权信息 本项目遵循 **Apache License 2.0** 协议开源，永久免费使用，允许商业化。 > 如将本项目用于商业用途，请严格遵守 Apache License 2.0 协议，并保留作者署名及技术支持声明。 1. **二次开发与版权声明** * 在基于本项目进行二次开发（包括但不限于功能扩展、界面修改、适配定制）时，为了TvT.js开源项目的健康发展，无论用于商业还是非商业目的，均不得删除、修改或隐藏 TvT.js 源码文件头部的版权、作者声明及项目出处信息。 2. **允许的商业用途与限制** * 允许以本项目为基础，结合自身独立开发的核心功能或产品，形成以**自研内容为主体**的商业化项目（包括收费服务、软件产品等）。 * 不允许直接将本项目的源码或仅作少量改动后进行**重新开源并收费**，或以几乎未改动的形式包装成付费产品进行贩卖。 3. **第三方组件说明** * 本项目所包含的第三方源码及二进制文件，其版权信息及许可证另行标注，请遵循相应的开源协议。 版权所有 Copyright © 2022-2026 by 🧊icegl (https://www.icegl.cn) All rights reserved。