Hello，大家好，我是 Sunday。

說(shuō)起 3D 模型構(gòu)建，大家最先想到的應(yīng)該就是 ThreeJS 了。但是 ThreeJS 本身是基于 WebGL 構(gòu)建的 3D 模型庫(kù)，學(xué)習(xí)曲線較高。特別是和 Vue 這種框架配合使用時(shí)，很多同學(xué)就需要花費(fèi)較多的時(shí)間才可以掌握使用的方式。

那么有沒(méi)有更加簡(jiǎn)單、易上手的框架呢？答案肯定是 有的，它就是咱們今天要說(shuō)的主角 TresJS。

圖片

01：TresJS

1.1 與 vue 深度兼容

TresJS 提供了完善的中文文檔，我們可以直接在他的官網(wǎng)查看 TresJS 的使用方式。

目前 TresJS 直接兼容 vue3 和 vite，我們可以通過(guò)如下方式對(duì) TresJS 進(jìn)行使用：

1. 直接通過(guò) npm 進(jìn)行安裝 pnpm add three @tresjs/core
2. 以插件的形式（use） 進(jìn)行安裝

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')

3. 在組件中直接使用

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

<template>
  <TresCanvas>
    <!-- Your scene here -->
  </TresCanvas>
</template>

1.2 完善的中文文檔

學(xué)習(xí)一個(gè)庫(kù)，最好的方式就是通過(guò)文檔進(jìn)行學(xué)習(xí)。TresJS 提供了完善的中文文檔，以剛才使用的 TresCanvas 為例：

根據(jù)文檔中的內(nèi)容，我們可以很輕松的了解 TresCanvas 組件 的使用。

那么接下來(lái)，就讓我們利用 TresJS 來(lái)完成一個(gè)基本的 3D 模型展示

02：TresJS 案例

2.1 3D 場(chǎng)景構(gòu)建基礎(chǔ)

在使用 TresJS 之前，我們先簡(jiǎn)單了解下 3D 場(chǎng)景構(gòu)建基礎(chǔ)，我們來(lái)看下面的圖：

圖片

在整個(gè) 3D 場(chǎng)景中，包含 4 個(gè)關(guān)鍵概念：

1. 物體(objects) 可以是球體、平面、燈光、你最喜歡的角色的 3D 模型（幻燈片放映類(lèi)似于單詞的 3D 場(chǎng)景）
2. 然后我們需要一個(gè) 相機(jī)(camera) 來(lái)觀察這些物體并捕捉它們。
3. 我們將所有內(nèi)容包裝在一個(gè) 場(chǎng)景(scene) 中，然后......
4. 我們告訴 渲染器(render) 將所有內(nèi)容渲染到 DOM Canvas 元素中。

2.2 創(chuàng)建項(xiàng)目并安裝 TresJS

1. 通過(guò) vue create project 與 pnpm add three @tresjs/core 可直接創(chuàng)建項(xiàng)目并安裝 TresJS。
2. 參考 1.1 與 vue 深度兼容 中的代碼可快速構(gòu)建 tresjs 基礎(chǔ)樣式。
3. 接下來(lái)，我們可以創(chuàng)建 相機(jī)(camera) 即可看到一個(gè)基本的效果。

<script setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
 <TresCanvas clear-color="#82DBC5">
  <TresPerspectiveCamera />
 </TresCanvas>
</template>

<style>
* {
 margin: 0;
 padding: 0;
}
#app {
 height: 100vh;
 width: 100vw;
}
</style>

4. 有了相機(jī)之后，我們可以利用 TresMesh 組件創(chuàng)建基本的模型。

<TresCanvas clear-color="#82DBC5">
  <!-- 相機(jī) -->
  <TresPerspectiveCamera />
  <!-- 模型 -->
  <TresMesh>
    <TresBoxGeometry />
    <TresMeshNormalMaterial />
  </TresMesh>
</TresCanvas>

5. 如果想要調(diào)整模型的位置，那么我們可以直接利用 TresMesh 組件的 props 進(jìn)行修改。

<TresMesh :rotation="[Math.PI / 4, Math.PI / 2, 0]">
  <TresBoxGeometry />
  <TresMeshNormalMaterial />
</TresMesh>

此時(shí)渲染效果如下：

圖片

今天，咱們通過(guò)一個(gè)簡(jiǎn)單的示例了解了 TresJS 的用法。如果感覺(jué) ThreeJS 學(xué)習(xí)復(fù)雜度高的同學(xué)，那么可以看下 TresJS ，或許可以為你帶來(lái)不一樣的開(kāi)發(fā)體驗(yàn)?zāi)兀?/p>