大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 TresJS

Declarative ThreeJS using Vue Components

TresJS（西班牙语意为 “三”，发音为 /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 three

TresJS 是用 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