推荐一款三维可视化项目快速落地的开源框架：TvT.js

地虎降天龙

已于 2025-02-12 09:21:00 修改

阅读量2.4k

点赞数 22

文章标签： javascript 3d vue.js typescript 游戏引擎开源软件开源

于 2025-02-12 09:11:09 首次发布

本文链接：https://blog.csdn.net/hawk86104/article/details/145584134

版权

生态 `@ThreeJS @Vue3.x @TresJS`

本项目融合于三大生态系统中：

🎲 ThreeJS * 点击详情编辑ThreeJS 大名鼎鼎的基于浏览器渲染，JavaScript 语言的 3D 库。
🍀 Vue3.x * 点击详情编辑易学易用，性能出色，适用场景丰富的 Web 前端框架。
⚡ TresJS * 点击详情编辑使用 Vue3.x 组件实现声明式的 ThreeJS，做属于前端的三维项目。

🏕 点击预览：🌏 opensource.icegl.cn

如果有条件，也可直接访问 github 的镜像站:🌏 https://hawk86104.github.io

因项目经常更新编译，如发现访问错误，请清空浏览器缓存。

更多演示请进入预览页面

优势

🌈 前端の基本素养 * FesJS 点击详情
集成封装项目落地的常用库：图标、多语言、API 接口调用、Vuex/Pinia、model 数据封装、页面 layout/权限 access、路由管理等。
🌠 像写 Vue3.x 一样写三维可视化项目点击详情
全功能版本追溯保持 threeJS 最新版本 * TresJS 最新 Vue3.x 的语法糖写法，TS/JS 通吃，让你以最新最爽快的方式构建三维可视化项目

<template>
		<TresCanvas window-size>
				<TresPerspectiveCamera />
				<TresMesh>
						<TresTorusGeometry :args="[1, 0.5, 16, 32]" />
						<TresMeshBasicMaterial color="orange" />
				</TresMesh>
		</TresCanvas>
</template>
<script setup lang="ts">
		import { useRenderLoop, useTexture } from '@tresjs/core'
		//读取材质
		const pTexture = await useTexture(['./**.jpg', './**.png'])
		const { onLoop } = useRenderLoop()
		onLoop(({ delta }) => {
				//循环render
		})
</script>

✅ 快速开始

1、git clone 或者 直接下载 本项目

2、cd 到项目根目录

3、yarn	// 安装依赖

4、yarn pre.dev	// 预览 下的调试模式

5、yarn dev	// 自己项目 下的调试模式

6、yarn pre.build	// 预览 下的编译打包

7、yarn build	// 自己项目 下的编译打包

8、yarn both  // 同时启动 dev 和 pre.dev 可以边调试自己得项目，边对照移植样例和插件