大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 TresJSDeclarative ThreeJS using Vue ComponentsTresJS（西班牙语意为 “三”，发音为 /tres/ ）是一种以声明方式使用 Vue 组件创建 ThreeJS 场景的方法。
TresJS 具有以下特征：
用于构建 3D 场景，本质是 Vue 组件，TresJS 缩小了开发人员与 3D 世界之间差距⚡️ 由 Vite 提供支持的 Three.js 自定义渲染器TresJS 使开发者能够通过使用 Vue 组件以声明方式利用 Three.js 所有功能，并让 <TresCanvas /> 管理其余部分，充分利用 Vue 组件生命周期来处理事件并管理状态转换以 DX 为中心的生态：使用 cientos 和后处理等软件包扩展核心功能，以减少处理 3D 模型或添加相机控件等任务的面条代码完全类型化TresJS 构建在 Vue 的自定义渲染器之上，并由 Vite 提供支持。TresJS 的目标是为 Vue 社区提供一种使用 Vue 构建 3D 场景的简单方法，始终保持最新的 ThreeJS 功能并提供积极维护。
目前 TresJS 在 Github 通过 MIT 协议开源，有超过 1.6k 的 star、400 + 的项目依赖量、代码贡献者 40+，是值得关注的前端开源项目。
如何使用 TresJS首先需要安装相应依赖：
npm install @tresjs/core threeTresJS 是用 Typescript 编写且是完全类型化的。如果使用 Typescript 将获得全部好处，开发者只要确保安装了三个类型即可：
npm install @types/three -D当然，开发者还可以像安装任何其他 Vue 插件一样安装 TresJS：
import {createApp} from 'vue'import Tres from '@tresjs/core'import App from './App.vue'export const app = createApp(App)app.use(Tres)app.mount('#app')或者可以直接在组件中使用，其中 TresCanvas 组件是 Tres 的主要组件，本质功能是创建 ThreeJS WebGLRenderer：
<script setup lang="ts">import {TresCanvas} from '@tresjs/core'</script><template> <TresCanvas> <!-- Your scene here --> </TresCanvas></template>由于 Vite v2 是一个自定义渲染器，开发者需要让应用程序的 vue 编译器知道 Tres 的组件可以包含在内，以避免出现 [Vue warn]: 无法解析组件警告。
只需将 TresJS 中的 templateCompilerOptions 导入并添加到 vue 插件内的 vite.config.ts 中：
import {templateCompilerOptions} from '@tresjs/core'export default defineConfig({ plugins: [ vue({ // 其他配置 ...templateCompilerOptions }), ]})关于 TresJS 的更多知识和示例可以参考文末资料，本文不再过展开。
参考资料https://github.com/Tresjs/tres
https://docs.tresjs.org/guide/getting-started.html
https://www.youtube.com/watch?v=k2ntrRtR8wc
https://www.youtube.com/watch?v=k2ntrRtR8wc
https://www.youtube.com/watch?v=95OpiYAqkfY
