项目介绍

three-vue-tres（简称 TvT.js）是一个基于 Vue3 + Three.js + TresJS 的三维可视化开发框架，由 ICEGL 图形学社区开源。它把 Three.js 的 3D 渲染能力封装成 Vue 声明式组件，让前端开发者可以像写普通 Vue 页面一样构建三维场景。支持 Web、小程序、App 全端部署，内置可视化编辑器。

看一段代码就明白了：

<template>
  <TresCanvas clear-color="#202022">
    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
    <OrbitControls :auto-rotate="true" />
    <TresAmbientLight />
    <TresMesh :position="[0, 0, -1]">
      <TresPlaneGeometry :args="[5, 2]" />
      <TresMeshBasicMaterial color="#1f86e6" />
    </TresMesh>
    <TresGridHelper :position="[0, -1, 0]" />
  </TresCanvas>
</template>

对比传统 Three.js 的写法，差距一目了然。不需要手动管理渲染循环，不需要处理相机更新，不需要关心内存回收——Vue 的响应式系统全部帮你搞定。

数据变了，场景自动更新。组件拆好了，代码天然可维护。

能做什么

TvT.js 的定位是面向生产环境的三维可视化。

数字孪生：工厂、园区、机房、仓库……把物理世界的场景在浏览器里 1:1 还原，接入实时数据做监控和可视化。

数据可视化：三维柱状图、立体拓扑图、数据地球……让数据展示不再局限于 2D 平面。

在线配置平台：利用编辑器的导出能力，搭建让用户自助配置 3D 场景的 SaaS 平台。

GIS 地理信息：支持倾斜摄影模型叠加，构建城市级别的三维可视化平台。

项目提供了 20+ 个在线案例，涵盖智慧机房、炼化智能工厂、智能仓储管理、无人机组可视化、海洋船运、智能办公空间、低像素风格场景、财报三维图表、GIS 地图空间等主流场景。每个案例都可以在线预览，也可以直接通过编辑器导出源码使用。

核心特性

自带可视化编辑器。项目内置了一套在线三维场景编辑器（zone3Deditor），支持拖拽式添加模型、灯光、特效，实时预览场景效果，数据源绑定，天气和日照环境配置。最关键的是——搭完的场景可以直接导出源码。不是导出什么 JSON 配置再解析，而是直接生成可用的 Vue 组件代码。拿到代码之后，开发者只需要关注业务逻辑的接入，场景搭建的工作量直接归零。

除了三维编辑器，还有一个 GoView UI 编辑器，用于做 2D 数据面板。3D 场景 + 2D 面板，一套组合拳打下来，数字孪生大屏的前端部分基本就齐了。

全端覆盖。同一个项目，可以同时部署到 Web、微信小程序、App。框架集成了 uni-app 小程序生态，真正做到了一套代码多端运行。对于需要同时做 PC 端和移动端的团队来说，开发成本直接砍半。

插件化架构。每个案例/功能模块都是一个独立的插件，可以单独开发、单独打包，通过插件管理工具统一调度。团队可以分工协作——A 负责机房模块，B 负责仓储模块，C 负责 GIS 地图，各自开发互不干扰，最后组装到一起。

国产化适配。明确支持国产化硬件（飞腾、鲲鹏等）、国产操作系统（统信 UOS、银河麒麟等）、国产浏览器（360、奇安信等）。所有依赖完全开源，拥有自主软件知识产权和软件著作权。在信创项目中使用，不存在任何合规风险。

永久免费商用。Apache 2.0 协议，拿来接项目完全没有后顾之忧。

竞品对比

做三维可视化，市面上可选的方案其实不少。简单横向对比一下：

快速入门

环境要求：Node.js >= 20.18（推荐 22.x LTS）、Yarn、Git

# 克隆项目
git clone https://gitee.com/ice-gl/icegl-three-vue-tres.git

# 进入目录
cd icegl-three-vue-tres

# 安装依赖
yarn install

# 启动开发模式（含所有示例案例）
yarn pre.dev

常用命令速查：

项目结构采用清晰的插件化架构：

• • src/：核心框架代码
• • public/plugins/：所有案例和插件的存放目录
• • preview/：预览相关资源
• • openspec/：AI 能力扩展相关
• • pluginMaker/：插件生成器工具

每个插件都是独立的模块，可以单独开发、单独打包、单独部署。

总结

icegl-three-vue-tres 是目前国内 Vue 生态中，最完整的三维可视化开发框架。

它不是 Three.js 的简单封装，而是一个从开发工具到部署方案都考虑周全的生产级解决方案。编辑器降低了入门门槛，组件化保证了工程质量，全端部署覆盖了更多场景，国产化适配解决了信创需求。

关键是——永久免费商用，Apache 2.0 协议，拿来接项目没有任何授权风险。

如果你的团队正在做数字孪生、智慧园区、3D 可视化相关的项目，值得花点时间了解一下这个框架。

项目地址：

• • Gitee：https://gitee.com/ice-gl/icegl-three-vue-tres
• • GitHub：https://github.com/hawk86104/three-vue-tres

官方文档：

• • 官方文档：https://docs.icegl.cn
• • 在线预览：https://opensource.icegl.cn
• • 插件市场：https://www.icegl.cn/tvtstore
• • ICEGL 社区：https://www.icegl.cn

这篇文章如果对你有帮助，不妨点个赞感谢支持。