TresJS：让 Three.js 轻松融入 Vue 生态的 3D 解决方案

编程

发布日期: 2025-02-07

更新日期: 2025-02-07

文章字数: 776

阅读时长: 3 分

最近发现一个有趣的3D库，他可以让我轻松实现3D场景，对于没有太多 Three.js 项目经验的开发者来说，TresJS 是一个非常适合入门的 3D 库。如果你的项目需求并不复杂，或者只是想快速实现一个小型 3D 场景，TresJS 绝对值得一试。

最终效果：

安装与配置

首先，使用以下命令安装 TresJS 和 Three.js：

1	yarn add @tresjs/core three

如果你使用的是 Vite，还需要在 vite.config.ts 中添加以下配置：

import { templateCompilerOptions } from '@tresjs/core'

export default defineConfig({
  plugins: [
    vue({
      // 其他配置
      ...templateCompilerOptions
    }),
  ],
})

此外，如果你需要加载模型，还需要引入 @tresjs/cientos 包：

1	yarn add @tresjs/cientos

第一步：创建画布

在 TresJS 中，<TresCanvas> 是核心组件，它负责创建 Three.js 的 WebGLRenderer。以下是一个简单的画布配置：

1	<TresCanvas clear-color="#eee" window-size></TresCanvas>

clear-color：设置画布的背景颜色。
window-size：指定画布是否使用窗口大小作为尺寸。如果未设置，画布将使用父元素的大小。

第二步：加载模型

接下来，我们可以通过 @tresjs/cientos 提供的 GLTFModel 组件来加载 3D 模型。这里我就用我微信公众号头像的模型为例：

<script setup>
import { GLTFModel } from '@tresjs/cientos'
</script>

<template>
  <GLTFModel path="/models/pear.glb" draco />
</template>

path：指定模型文件的路径。
draco：启用 Draco 压缩，优化模型加载性能。

第三步：添加相机和光照

为了让场景更加完整，我们需要添加相机和光照：

1 2	<TresPerspectiveCamera :position="[5, 7.5, 7.5]" /> <TresAmbientLight :intensity="2" />

TresPerspectiveCamera：创建一个透视相机，并设置其位置。传参可以参考Three.js，并无二致。
TresAmbientLight：添加环境光，并设置光照强度。

第四步：添加轨道控制器

为了让用户能够与场景交互，我们可以添加一个轨道控制器：

1	<OrbitControls />

完整代码示例

以下是完整的代码实现：

Index.vue

<script setup>
import { TresCanvas } from '@tresjs/core';
import { OrbitControls } from '@tresjs/cientos'
import Pear from './components/Pear.vue';
</script>

<template>
  <TresCanvas clear-color="#eee" window-size>
    <OrbitControls />
    <TresPerspectiveCamera :position="[5, 7.5, 7.5]" />
    <Suspense>
      <Pear />
    </Suspense>
    <TresAmbientLight :intensity="2" />
  </TresCanvas>
</template>

<style scoped></style>

Pear.vue

<script setup>
import { GLTFModel } from '@tresjs/cientos'
</script>

<template>
  <GLTFModel path="/models/pear.glb" draco />
</template>

关键点解析

Suspense 组件：我们使用 Suspense 包装 Pear 组件，以确保模型加载完成后再渲染场景。
Cientos 包：@tresjs/cientos 提供了丰富的工具和组件，如 GLTFModel 和 OrbitControls，极大地简化了开发流程。

Look！是不是很简单