Three-Vue-Tres 🧳🧳🧳 TvT.js 🧳🧳🧳

A Vue 3 wrapper for Three.js using TresJS for building interactive 3D scenes.

文档说明(语言)：简体中文 | English

🎉🎉🎊 An Open-Source Framework for Rapid 3D Visualization Project Development 🎊🎉🎉

If you find this project helpful, please click the "Star⭐" button on the top right corner. Your star is my motivation to keep developing. Thank you!

For video explanation of this project on Bilibili, click the link below 👇🏻

Ecosystem @ThreeJS @Vue3.x @TresJS

Produced by icegl. Permanently open-source and free for commercial use. Ongoing updates. Please click "star⭐" on the top right corner to follow.

This project integrates with three major ecosystems:

• 🎠 ThreeJS * Details A renowned browser-based 3D JavaScript library.

• 🍀 Vue3.x * Details Easy to learn and use, excellent performance, rich use cases as a web frontend framework.

• ⚡ TresJS * Details Declarative ThreeJS with Vue3 components for frontend 3D projects.

🏥 Preview: 🌏 opensource.icegl.cn

• If access is slow, use mirror: 🌏 oss.icegl.cn
• If VPN is available, use GitHub Pages mirror: 🌏 https://hawk86104.github.io
• Scan QR code for mini program:

相关技术栈拓扑图 【包含全套项目源码】: git项目源码地址

在线编辑器再次编辑后免费导出源码项目二开 : zone3Deditor页面跳转

在线三维场景编辑器：[🪅免费导出源码+二次开发 ]	智慧机房：[ 编辑器直接落地项目 ]
炼化智能工厂可视化：[ 编辑器直接落地项目 ]	智能办公空间：[ 编辑器直接落地项目 ]
无人机组可视化：[ 编辑器直接落地项目 ]	低像素炼油厂：[ 免费 ]

If access errors occur due to frequent project updates and builds, please clear browser cache.

More demos are available on the preview page.

Advantages

• 🌈 Frontend Fundamentals * FesJS Details Integrated libraries for icons, i18n, API calls, state management (Vuex/Pinia), layout/access/route management.

• 🌠 Write 3D visualization projects just like writing Vue3.x Details Fully supports latest ThreeJS. Use modern Vue3 syntax and TS/JS interchangeably.

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
  </TresCanvas>
</template>
<script setup lang="ts">
  import { useLoop } from '@tresjs/core'
	import { useTextures } from 'PLS/basic'
	const pTexture = await useTextures(['./**.jpg', './**.png'])
	const { onLoop } = useLoop()
	onBeforeRender(({ delta }) => {
			// render loop
	})
</script>

Please support with: Follow 💛 Like ⭐ Fork👣

✅ Quick Start

1. git clone or download this repo
2. cd to project root
3. yarn // install dependencies [node -v >= 20.18]
4. yarn pre.dev // preview debug mode
5. yarn dev // project debug mode
6. yarn pre.build // build preview
7. yarn build // build project
8. yarn pre.dev.one // preview a specific example/plugin
9. yarn pre.build.one // build a specific example/plugin
10. yarn both // start dev and pre.dev together

📖 Documentation

User Guide: 🌏docs.icegl.cn

3D Editor: [ 📊Native Editor + Plugin Generator ]	UI Editor: [ 📊GoView Export + Config Import Component ]
uniapp Mini Program Ecosystem: [ One Code, Full Platform Solution ]	Qiankun Micro Frontend: [ Seamless Integration into Existing Projects ]

🧩 Rich Plugin Marketplace 🌏tvtstore

🌏www.icegl.cn/tvtstore contains a variety of project scenarios and features. Plugins are a vital part of the ICE community ecosystem. In the marketplace, both complete applications and functional modules are referred to as plugins.

Plugin Marketplace	Become an Author & Join Us

❓ Feedback & Support

If you have any questions while using the platform, feel free to reach out through the following methods:

Q&A Community: ICE Graphics Community icegl.cn

Community Contributors & Experts: Ask the Experts

Feel free to join our WeChat and QQ groups. Some groups are already full, but we're always happy to connect and learn WebGL together! Add us on WeChat to join the groups.

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

⭐ Star History

™️ Copyright Information

This project is released under the Apache 2.0 open-source license, providing free lifetime use and allowing commercial applications.

If you use this project for commercial purposes, please comply with the Apache 2.0 license and retain the author’s technical support acknowledgment.

• For secondary development intended for commercial use or open-source competitors, please do not remove or modify the copyright, author statement, or source attribution at the top of the TvT.js source code.
• Commercial use is allowed, but secondary open-sourcing and charging for it are prohibited.

The copyright information of third-party source code and binary files included in this project will be noted separately.

Follow our official WeChat account to receive the latest updates.

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

All rights reserved。