介绍
WARNING
tvt.js 已从2025年十月中旬全面升级所有依赖库，涉及Vue3、Tres V5、Fes V4、Cientos V4 以及 Three.js (r17x → r18x) 等的版本更新，全面拥抱ES Module，无缝对接webGPU等； 您现在看到的是旧v4版本的文档，若想查看新版V5文档，请跳转：docs.icegl.cn
若您准备从之前tvt.js的V4版本升级，我们有详细的升级方法，请跳转：icegl.cn/ask/article/22769
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Text3D, OrbitControls, MeshGlassMaterial } from '@tresjs/cientos'
import { withBase } from '@vuepress/client'
</script>
<template>
<TresCanvas clearColor="#202022">
<TresPerspectiveCamera :position="[0, 0.5, 5]" />
<OrbitControls :auto-rotate="true" />
<TresAmbientLight />
<Suspense>
<Text3D text="让vue写可视化更简单" :font="withBase('font/FZTHS.json')" center>
<MeshGlassMaterial />
</Text3D>
</Suspense>
<TresMesh :position="[0, 0, -1]">
<TresPlaneGeometry :args="[5, 2]" />
<TresMeshBasicMaterial color="#1f86e6" />
</TresMesh>
<TresPointLight :args="[0xffffff, 10, 0, 10]" :position="[0, 0, -1]" />
<TresGridHelper :position="[0, -1, 0]" />
</TresCanvas>
</template>
TIP
我们精心雕琢 3D 场景中的每一块积木：
- 把数字孪生的生产难度通过开源的方式降下来！
- 把三维可视化项目的开发成本通过开源共创打下来！
四大开源生态系统
🎲 ThreeJS * 点击详情
ThreeJS 大名鼎鼎的基于浏览器渲染，JavaScript 语言的 3D 库。
🍀 Vue3.x * 点击详情
易学易用，性能出色，适用场景丰富的 Web 前端框架。
⚡ TresJS * 点击详情
使用 Vue3.x 组件实现声明式的 ThreeJS，做属于前端的三维项目。
🌈 前端的基本素养 * FesJS 点击详情
集成封装项目落地的常用库：图标、多语言、API 接口调用、Vuex/Pinia、model 数据封装、页面 layout/权限 access、路由管理等。
🏕 演示预览：🌏opensource.icegl.cn
INFO
旨在解决在国内通过 Vue 快速实现三维可视化项目的迅速落地的开源项目。采用的技术栈包括 Vue.js、Three.js 和 Tres.js，致力于为开发者提供一个简便而强大的框架，以实现三维可视化项目的高效开发。