City-Lifeline-Cockpit

🧊 TvT.js

English | 简体中文

An AI-Collaborative Open-Source Web 3D Ecosystem

From requirements and Spec-driven AI development to image-to-3D generation, scene editing, and plugin-based delivery, TvT.js helps turn 3D ideas into real projects instead of one-off demos.

TvT.js is an open-source Web 3D engineering ecosystem by ICEGL. Built on Three.js, Vue 3, TresJS, and Fes.js, it is designed for digital twins, industrial visualization, online 3D editors, and plugin-based project delivery. It is permanently open-source and free for commercial use.

Requirement → Spec Constraints → AI-Assisted Implementation → Scene Validation → Plugin or Source-Code Delivery

Project Info

If this project helps you, please click the "Star⭐" button in the upper-right corner. Your support is what keeps this project moving forward. Thank you!

Since mid-October 2025, the project has fully upgraded its core dependencies, including Vue 3, Tres V5, Fes V4, Cientos V4, and Three.js (r17x → r18x).

If you are upgrading from tvt.js V4, please refer to the migration guide: icegl.cn/ask/article/22769

Legacy V4 branch: tres-v4_fes-v3

# 🤖 AI Collaboration: From a Requirement to a Deliverable 3D Project AI is now part of two connected workflows in TvT.js: 3D content creation and engineering development. It can help generate models and scene concepts, while also supporting requirements analysis, plugin implementation, and ongoing changes. Scene configuration, plugin contracts, and versioned Specs connect these workflows so that people and AI can work from the same project context. | Where AI Participates | TvT.js Practice | Outcome | | --- | --- | --- | | Requirements and architecture | The `openspec/` baseline captures framework rules, plugin contracts, runtime modes, and integration boundaries; larger changes can be described through `proposal`, `spec`, `design`, and `tasks` documents | Traceable requirements, verifiable behavior, and bounded changes | | Engineering collaboration | The `tvt-js-plugin-builder` AI skill captures conventions for plugin directories, routes, assets, dependencies, and cross-platform integrations | AI implements within project conventions instead of producing disposable code | | 3D content creation | The open-source Tencent Hunyuan3D workflow can be deployed locally to generate 3D models from images and bring them into TvT.js | 3D assets that remain editable and ready for scene integration | | Scene authoring | The zone scene editor can work with AI-generated assets and continues to explore MCP + LLM text-to-scene generation | A path from natural language or generated assets to editable visual scenes | | Reuse and delivery | A shared plugin contract, dynamic component service, scene configuration, and source export workflow | AI-assisted results that remain reviewable, reusable, maintainable, and deliverable | This is more than adding an AI button beside a 3D framework. Specs define **what the result must satisfy**; AI skills explain **how work should be completed in this repository**; plugins and editors then carry generated results into a maintainable delivery workflow. - [Explore the AI Collaboration and Spec Workflow](https://docs.icegl.cn/docs/three-vue-tres/guide/ai-collaboration.html) - [View the TvT.js OpenSpec Baseline](./openspec/) - [View the TvT.js Plugin Development AI Skill](./skills/tvt-js-plugin-builder/) - [Try Hunyuan3D Image-to-3D](https://opensource.icegl.cn/#/plugins/hunyuan3D/index) - [Open the Zone Scene Editor](https://zone3deditor.icegl.cn/#/plugins/zone3Deditor/index) > **Capability boundaries:** Image-to-3D requires a separately deployed model service, model weights, and suitable hardware. MCP + LLM text-to-scene generation remains an area of ongoing exploration. AI can accelerate generation, modification, and review, but business meaning, visual quality, performance budgets, licensing boundaries, and final releases still require human judgment. ## 🇨🇳 Web 3D Visualization Framework for Domestic / Xinchuang Environments 🚩 For full localization and compatibility details, see the documentation: [Details](https://docs.icegl.cn/docs/three-vue-tres/guide/localization.html) - Support for domestic hardware platforms - Support for domestic operating systems and browsers - Domestic-friendly development and deployment environments - You can confidently use tvt.js as the frontend foundation for localized 3D visualization projects and digital twin platforms. - Built on a fully open-source dependency stack, with independent software intellectual property and software copyright registration, open-source and free for commercial use. # Technical Foundations & Ecosystem `@ThreeJS @Vue3.x @TresJS @FesJS` > Built by ICEGL. Permanently open-source, free for commercial use, and continuously evolving. Star ⭐ the project to follow an open Web 3D ecosystem built for the AI era. The project is built on four open-source foundations. Plugins, editors, dynamic components, and an AI collaboration workflow extend this foundation from rendering into project delivery: | Ecosystem | Description | | --- | --- | | 🎲 [ThreeJS](https://threejs.org)
| A widely used JavaScript 3D library for browser rendering. | | 🍀 [Vue3.x](https://cn.vuejs.org)
| A modern frontend framework that is approachable, high-performance, and flexible across many Web use cases. | | ⚡ [TresJS](https://tresjs.org)
| A declarative Vue 3 way to build Three.js-powered 3D applications on the frontend. | | 🌈 [Fes.js](https://fesjs.mumblefe.cn)
| Provides the routing, layouts, data models, permissions, internationalization, and API conventions needed to deliver production applications. | ## ✨ Dynamic Component Publishing & Loading Service: [🌏 dcser.icegl.cn](https://dcser.icegl.cn/) > A dynamic component publishing and loading service built around the TvT.js ecosystem for flexible modular application delivery. Component requirements can use Specs to define registration formats, parameter contracts, previews, and editor compatibility, allowing both human-built and AI-assisted components to be published independently, loaded remotely, configured, and evolved over time. ## 🏕 Preview: [🌏 opensource.icegl.cn](https://opensource.icegl.cn) - If needed, you can also use the GitHub Pages mirror: [🌏 https://hawk86104.github.io](https://hawk86104.github.io/) - Full-case WeChat Mini Program ecosystem: [🌏 Open in WeChat](#小程序://三维开源/456pgpJZBiTctdK) - Scan the QR code to browse the full Mini Program demo set: ### Featured Online Cases

Online 3D Scene Editor Free source export + secondary development	Smart Server Room Project-ready output from the editor
Tech Stack Topology Project-ready output from the editor	Hunyuan World Project-ready output from the editor
Refining Smart Factory Visualization Project-ready output from the editor	Smart Office Space Project-ready output from the editor
UAV Fleet Visualization Project-ready output from the editor	Low-Poly Refinery Free case
Low-Poly Server Room Project-ready output from the editor	Plastic Products Factory 3D Project-ready output from the editor
Smart Warehouse Management Project-ready output from the editor	Ocean Shipping Visualization Free case
Financial Report Analysis 3D Chart Project-ready output from the editor	Paramecium Animation Editor Online animation editor
Map Space Editor A GIS editor for projected-map scenes	Multi-Set Oblique Photography 3D Project-ready output from the editor

Tech stack topology example with full project source: Source file

You can reopen this scene in the online editor and export the source again for secondary development: Open in zone3Deditor

Because the project is updated and rebuilt frequently, please clear your browser cache if you encounter access or asset-loading issues.

More demos are available on the preview site.

If you like the project, please support it with a quick three-step combo: Follow 💛 Like ⭐ Fork 👣

✅ Quick Start

Node.js >= 20.18 is recommended.

Step	Command / Action	Description
1	git clone this repository, or download it directly	Get the project source code
2	cd into the project root	Enter the project directory
3	yarn	Install dependencies
4	yarn pre.dev	Debug the preview workspace
5	yarn dev	Debug your own project workspace
6	yarn pre.build	Build the preview workspace
7	yarn build	Build your own project workspace
8	yarn pre.dev.one	Preview only one specific example or plugin
9	yarn pre.build.one	Build one specific example or plugin, keeping only configured dependency plugin assets and removing the rest
10	yarn both	Run dev and pre.dev at the same time so you can develop your project while comparing against examples and plugins

📖 Documentation

User Guide: 🌏 docs.icegl.cn

Recommended starting point: 🤖 AI Collaboration and Spec Workflow. It covers image-to-3D generation, the OpenSpec baseline, the AI plugin development skill, and a workflow in which requirements become constraints before implementation moves toward delivery.

3D Editor: [📊 Native editor + plugin generator]	UI Editor: [📊 GoView export + config import component]
uniapp Mini Program Ecosystem: [One codebase across platforms]	qiankun Micro Frontend: [Integrate quickly into your existing project]

🧩 Rich Plugin Marketplace: 🌏 tvtstore

🌏 www.icegl.cn/tvtstore brings together a wide range of project scenarios and capabilities. Plugins are a core part of the ICE community ecosystem and provide an engineering boundary between AI-assisted development, online editors, and project delivery. Complete applications, reusable components, AI-assisted features, and source exported from scene editors are all distributed through the marketplace as plugins.

Plugin Marketplace	Become an Author and Join Us

❓ Feedback & Support

If you run into any issues while using the project, feel free to reach out through the channels below.

Q&A Community: ICE Graphics Community icegl.cn

Community Contributors and Experts: Ask the experts

You are also welcome to join our WeChat and QQ groups. Some groups may already be full, but we are always happy to connect and discuss WebGL together.

WeChat Mini Program Ecosystem	WeChat Group	QQ Group: 795714357	Official Account: ICE Graphics Community

⭐ Star History

™️ Copyright Information

This project is open-sourced under the Apache License 2.0, is free to use permanently, and supports commercial use.

If you use this project commercially, please comply with the Apache License 2.0 and retain the author attribution and technical support statement.

1. Secondary Development and Copyright Notice

When building on top of this project, including but not limited to feature extensions, UI modifications, or custom adaptations, you must not remove, alter, or hide the copyright notice, author statement, or project source attribution in the header of TvT.js source files, whether your use is commercial or non-commercial.

1. Allowed Commercial Use and Restrictions

You may use this project as the foundation for commercial solutions that are primarily based on your own independently developed core features or products, including paid services and software products.

You may not simply re-open-source this project with only minor changes and charge for it, or package an almost unmodified version as a paid product for sale.

1. Third-Party Components

Copyright and license information for third-party source code and binary files included in this project are marked separately. Please comply with their respective open-source licenses.

Copyright © 2022-2026 by 🧊icegl (https://www.icegl.cn)

All rights reserved.

City-Lifeline-Cockpit

城市生命线驾驶舱可视化——基于开源项目TvT.js（icegl-three-vue-tres），使用Three.js、Vue 3、TresJS 和 Fes.js技术栈的Web 3D框架