TresJS

https://www.toutiao.com/article/7360856801841873435/

什么是 TresJS
Declarative ThreeJS using Vue Components
TresJS（西班牙语意为 “三”，发音为 /tres/ ）是一种以声明方式使用 Vue 组件创建 ThreeJS 场景的方法。

TresJS 具有以下特征：

用于构建 3D 场景，本质是 Vue 组件，TresJS 缩小了开发人员与 3D 世界之间差距
⚡️ 由 Vite 提供支持的 Three.js 自定义渲染器
TresJS 使开发者能够通过使用 Vue 组件以声明方式利用 Three.js 所有功能，并让 管理其余部分，充分利用 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