探索 TresJS：用 Vue 构建精彩 3D 世界

LeonGao
1,042 阅读4分钟

一、TresJS 是什么？

TresJS 是一个强大的工具，它能让开发者借助 Vue 轻松打造令人惊叹的 3D 体验。它基于 Three.js 和 Vite 构建，大大降低了开发者进入 3D 开发领域的门槛。通过将 Three.js 的功能封装成 Vue 组件，TresJS 实现了声明式的 3D 开发，开发者可以像编写普通 Vue 应用一样构建 3D 场景，利用 Vue 组件的生命周期来处理事件和管理状态变化。

二、安装与基础设置

要使用 TresJS，首先需要安装相关依赖。在项目目录下运行以下命令：

npm install @tresjs/core three

这会安装 TresJS 的核心库以及 Three.js。安装完成后，就可以在 Vue 项目中引入并使用 TresJS 组件了。

三、创建基础 3D 场景

在app.vue文件中，通过引入TresCanvas组件来创建一个 3D 场景容器。TresCanvas负责管理 3D 场景的渲染，开发者可以在其中添加各种 3D 元素。

<script setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" window-size>
    <TresPerspectiveCamera />
    <TresMesh @click="onClick">
      <TresBoxGeometry :args="[1, 1, 1]" />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>

在上述代码中：

  • TresCanvas组件设置了场景的背景颜色clear-color为#82DBC5，并通过window-size属性让场景自适应窗口大小。
  • TresPerspectiveCamera用于定义场景的视角，它决定了用户观察 3D 场景的角度和范围。
  • TresMesh代表一个 3D 网格对象，这里给它添加了一个点击事件@click。
  • TresBoxGeometry定义了网格的形状为立方体，args属性指定了立方体的尺寸（长、宽、高分别为 1）。
  • TresMeshNormalMaterial为网格设置了法线材质，这种材质可以让网格表面根据光线和法线方向显示出不同的效果，使物体看起来更有立体感。

四、扩展功能与生态系统

TresJS 拥有丰富的生态系统，可以通过引入其他包来扩展其核心功能。例如，@tresjs/cientos和@tresjs/post - processing等包，能帮助开发者处理 3D 模型、添加相机控制等复杂任务，减少编写繁琐的代码。

下面是一个使用@tresjs/cientos中的OrbitControls实现相机环绕控制的示例：

<script setup>
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import UgglyBunny from '/@/components'
</script>
<template>  
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera />
    <OrbitControls />
    <Suspense>
      <UgglyBuny />
    </Suspense>  
  </TresCanvas>
</template>

在这个例子中，OrbitControls组件为场景添加了相机环绕控制功能，用户可以通过鼠标操作来围绕场景中的物体旋转相机，更好地观察 3D 场景。

五、加载和使用 3D 模型

借助@tresjs/cientos中的useGLTF函数，TresJS 可以轻松加载 GLTF 格式的 3D 模型。GLTF 是一种常用的 3D 模型格式，支持动画、材质等丰富信息。

<script setup lang="ts">
import { useAnimations, useGLTF } from '@tresjs/cientos'
const { scene: model, animations } = await useGLTF(
  'models/ugly-bunny.gltf',
)
const { actions, mixer } = useAnimations(animations, model)
const currentAction = ref(actions.Greeting)
currentAction.value.play()
</script>
<template>
  <primitive :object="model" />
</template>

上述代码展示了如何加载一个名为ugly-bunny.gltf的 3D 模型，并播放其自带的动画：

  • useGLTF函数用于加载 GLTF 模型，返回模型的场景对象model和动画数据animations。
  • useAnimations函数基于加载的动画数据和模型场景，创建动画控制对象actions和动画混合器mixer。
  • 通过ref定义当前播放的动画动作currentAction，并调用play方法来播放指定的动画（这里是名为Greeting的动画）。
  • 在模板中，使用primitive组件将加载的 3D 模型渲染到场景中。

六、社区与资源

TresJS 拥有一个活跃的社区，社区成员来自全球各地的 3D 和 Vue 爱好者。在社区中，你可以分享自己的作品、学习他人的经验，还能获取最新的开发动态和技术支持。社区成员创作了许多精彩的 3D 作品，如 Digital Hunter、Procedural Synthwave 等，这些作品展示了 TresJS 的强大功能和无限可能，也为开发者提供了丰富的灵感来源。

众多行业专家对 TresJS 给予了高度评价。例如，Three.js Journey 的作者 Bruno Simon 认为，TresJS 让 3D 网页开发变得轻松且易于上手；Nuxt 核心团队负责人 Daniel Roe 对 TresJS 在 Nuxt 中的应用前景充满期待；Vue.js 的创造者 Evan You 也对 TresJS 为 Vue 生态系统带来的 3D 解决方案表示赞赏。这些评价不仅证明了 TresJS 的技术价值，也反映了它在行业内的影响力。

通过学习 TresJS 的这些关键知识点，你可以逐步掌握用 Vue 构建 3D 世界的技能。从基础场景搭建到复杂模型加载和动画控制，再到借助社区资源不断提升，TresJS 为开发者提供了一个完整的 3D 开发解决方案。希望你在 TresJS 的学习和实践中，创造出更多精彩的 3D 作品！

avatar
文章
阅读
粉丝