TresJS火了!在Vue中轻松创建绚丽的3D动画

前有科技后进阶 2024-06-09 15:59:50

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

什么是 TresJSDeclarative 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

0 阅读:0

前有科技后进阶

简介:感谢大家的关注