Tres.js： 一个基于 Vue 的 Three.js 渲染框架

Tres.js 是一个基于 Vue 的 3D 渲染框架，构建于强大的 Three.js 之上。它通过 Vue 的组件化特性，简化 3D 图形的创建和管理，帮助开发者轻松构建性能优越的 3D 场景。

核心特性：

• 组件化开发： 用 Vue 模板语法像拼积木一样搭建复杂 3D 场景。
• 与 Vue 生态无缝结合： 运用 Vue 的响应式系统和生命周期轻松管理 3D 对象。
• 高扩展性： 能与 Three.js 的资源和技术完美兼容。

适用场景：

• 数据可视化：创建交互式 3D 图表或仪表盘。
• 虚拟现实与增强现实：快速搭建沉浸式体验。
• 动画效果：构建生动的动画场景和复杂的交互。

地址： https://github.com/Tresjs/tres (opens in a new tab)

环境准备

在开始实际开发之前，确保完成以下准备：

1. 安装 Vue 3 项目：可以使用 Vite 快速启动：

   npm init vite@latest my-project --template vue
   cd my-project
   npm install

2. 安装 Tres.js：

   npm install @tresjs/core

3. 确保项目能够运行并准备好开发环境。

案例驱动的 Tres.js 核心 API 讲解

我们通过一个案例，逐步讲解 Tres.js 的关键 API，帮助你更快掌握核心概念。

创建 3D 场景

首先定义一个基本的 3D 渲染容器：

1. TresCanvas

• 功能： TresCanvas 是 Tres.js 提供的场景根组件。所有 3D 对象都必须放置在 TresCanvas 中。它负责初始化 Three.js 渲染器、设置场景背景，并在 Vue 的模板中渲染 3D 内容。

• 常用参数：

  • clearColor: String 清除画布后渲染器显示颜色。
  • windowSize: Boolean 是否使用窗口大小作为画布大小，否则使用父元素大小。

• 代码示例：

  <script lang="ts" setup>
  import { TresCanvas } from "@tresjs/core";
  </script>
  <template>
    <TresCanvas clear-color="#82DBC5" window-size>
      <!-- 3D 内容放置在这里 -->
    </TresCanvas>
  </template>

  通过上面的代码，我们就创建了一个背景颜色为 #82DBC5 的 3D 场景。

2. TresPerspectiveCamera

• 功能： PerspectiveCamera 是一个基于透视投影的相机。它用于定义观察场景的视角和范围。
• 常用参数：
  • fov: Number 视场角，决定相机的视野范围。
  • aspect: Number 宽高比。
  • near: Number 和 far: Number 控制裁剪平面。
  • position: Array 相机位置。
• 代码示例：

  <template>
    <TresCanvas>
      <TresPerspectiveCamera :fov="75" :aspect="16 / 9" :near="0.1" :far="1000" :position="[5, 7.5, 7.5]" />
    </TresCanvas>
  </template>

添加基础几何体

开始创建太阳模型：

1. TresMesh 和几何体

• 功能： TresMesh 是 3D 对象的容器，结合几何体和材质定义场景中的基本形状。
• 常用几何体组件：
  • TresSphereGeometry 定义球体。
  • TresBoxGeometry 定义立方体。
  • TresPlaneGeometry 定义平面。
• 代码示例：

  <template>
    <TresCanvas>
      <TresMesh>
        <SphereGeometry :radius="1" :widthSegments="32" :heightSegments="32" />
        <TresMeshBasicMaterial color="orange" />
      </TresMesh>
    </TresCanvas>
  </template>

2. 材质

• 功能： 定义物体的外观属性，包括颜色、透明度、纹理和光照效果。
• 常用材质：
  • TresMeshStandardMaterial 用于支持光照的标准材质。
  • TresBasicMaterial 基础材质，不受光照影响。
• 代码示例：

  <template>
    <TresCanvas>
      <TresMesh>
        <SphereGeometry />
        <StandardMaterial color="orange" emissive="red" roughness="0.5" metalness="0.1" />
      </TresMesh>
    </TresCanvas>
  </template>
  至此，创建了一个地面、球体、立方体，但是现在没有灯光所以看不到效果。

光照与阴影

加入光源让画面更具表现力：

1. 平行光源 TresDirectionalLight

• 功能： 模拟来自单点的光源，如太阳光或手电筒。
• 常用参数：
  • castShadow: Boolean 是否产生阴影。
  • position: Array 光源位置。
  • intensity: Number 光照强度。
• 代码示例：

  <TresDirectionalLight cast-shadow :position="[0, 2, 0]" :intensity="1" />
  增加一个平行光

总结

使用 Tres.js，你可以快速搭建 3D 场景，实现复杂的 3D 图形和动画效果。通过案例驱动的 API 讲解，你可以更快掌握 Tres.js 的核心概念，为你的 3D 项目开发提供更多灵感和帮助。

它和 React 的 Three.js 库 react-three-fiber 类似，一个是基于 React 的，但 Tres.js 更加注重 Vue 的响应式系统和生命周期管理，适合 Vue 开发者使用。