介绍
<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,致力于为开发者提供一个简便而强大的框架,以实现三维可视化项目的高效开发。