TresJS入门指南：创建你的第一个3D场景

TresJS入门指南：创建你的第一个3D场景

前言

在现代Web开发中，3D图形技术变得越来越重要。TresJS作为一个基于Vue的Three.js封装库，让开发者能够更轻松地在Vue应用中创建和操作3D场景。本文将带你从零开始，使用TresJS创建你的第一个3D甜甜圈场景。

环境准备

在开始之前，请确保你已经具备以下条件：

• 基本的Vue 3开发环境
• 对Vue单文件组件(SFC)的基本了解
• Node.js环境（推荐最新稳定版）

创建基础画布

3D场景需要一个容器来展示，在原生Three.js中，我们需要手动创建canvas元素并初始化WebGL渲染器。而使用TresJS，这一切变得非常简单：

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas window-size>
    <!-- 这里将放置我们的3D场景内容 -->
  </TresCanvas>
</template>

TresCanvas组件会自动完成以下工作：

1. 创建WebGL渲染器
2. 设置基于浏览器刷新率的渲染循环
3. 管理场景的生命周期

画布尺寸设置

TresJS提供了两种设置画布尺寸的方式：

1. 继承父容器尺寸（默认）

<template>
  <TresCanvas>
    <!-- 场景内容 -->
  </TresCanvas>
</template>

<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
</style>

2. 全屏模式

通过window-size属性可以让画布充满整个窗口：

<template>
  <TresCanvas window-size>
    <!-- 场景内容 -->
  </TresCanvas>
</template>

构建3D场景基础

一个完整的3D场景通常包含以下核心元素：

1. 场景(Scene) - 所有3D对象的容器
2. 相机(Camera) - 定义观察场景的视角
3. 渲染器(Renderer) - 将3D场景渲染到2D屏幕
4. 3D对象(Object) - 场景中的具体物体

在TresJS中，场景和渲染器已由TresCanvas自动创建，我们只需要添加相机和物体。

添加相机

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera :position="[3, 3, 3]" />
  </TresCanvas>
</template>

这里我们使用了TresPerspectiveCamera组件，它模拟了人眼的透视效果。通过position属性设置相机位置为(3,3,3)。

创建3D甜甜圈

现在让我们添加一个甜甜圈形状的物体。在Three.js原生代码中，我们需要创建网格(Mesh)、几何体(Geometry)和材质(Material)三个部分。而在TresJS中，这一切可以通过声明式组件完成：

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
  </TresCanvas>
</template>

让我们分解这段代码：

1. TresMesh - 表示3D空间中的一个物体，是几何体和材质的容器
2. TresTorusGeometry - 圆环几何体，参数依次为：
   • 半径(1)
   • 管道半径(0.5)
   • 径向分段数(16)
   • 管道分段数(32)
3. TresMeshBasicMaterial - 基础材质，设置颜色为橙色

添加环境光

为了让场景看起来更自然，我们可以添加环境光：

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

TresAmbientLight会均匀照亮场景中的所有物体，intensity属性控制光照强度。

完整示例代码

以下是创建第一个3D场景的完整代码：

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    window-size
  >
    <TresPerspectiveCamera
      :position="[3, 3, 3]"
      :look-at="[0, 0, 0]"
    />
    <TresMesh>
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>

进阶提示

1. 组件命名规则：TresJS会自动将Three.js对象转换为Vue组件，规则是Tres+Three.js类名的PascalCase形式。例如：

   • BoxGeometry → TresBoxGeometry
   • DirectionalLight → TresDirectionalLight

2. 调试技巧：你可以在任何TresJS组件上添加visible属性来临时隐藏它，方便调试。

3. 性能优化：对于复杂场景，考虑使用TresInstancedMesh来优化渲染性能。

总结

通过本文，你已经学会了使用TresJS创建一个基本的3D场景。TresJS的声明式API让Three.js的使用变得更加直观和Vue-friendly。下一步，你可以尝试：

• 添加更多不同类型的几何体
• 尝试不同的材质和光照效果
• 为物体添加动画效果

希望这篇指南能帮助你顺利开始TresJS的3D开发之旅！