介绍

WARNING

tvt.js 已从2025年十月中旬全面升级所有依赖库,涉及Vue3、Tres V5、Fes V4、Cientos V4 以及 Three.js (r17x → r18x) 等的版本更新,全面拥抱ES Module,无缝对接webGPU等; 您现在看到的是新V5版本的文档,若想查看之前的文档,请跳转:docs.icegl.cn/v4open in new window
若您准备从之前tvt.js的V4版本升级,我们有详细的升级方法,请跳转:icegl.cn/ask/article/22769open in new window

<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 场景中的每一块积木:

  • 把数字孪生的生产难度通过开源的方式降下来!
  • 把三维可视化项目的开发成本通过开源共创打下来!

四大开源生态系统

🏕 演示预览:🌏opensource.icegl.cnopen in new window

INFO

旨在解决在国内通过 Vue 快速实现三维可视化项目的迅速落地的开源项目。采用的技术栈包括 Vue.js、Three.js 和 Tres.js,致力于为开发者提供一个简便而强大的框架,以实现三维可视化项目的高效开发。