Hello，大家好，我是 Sunday。Uzw28資訊網(wǎng)——每日最新資訊28at.com

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

那么有沒(méi)有更加簡(jiǎn)單、易上手的框架呢？答案肯定是 有的，它就是咱們今天要說(shuō)的主角 TresJS。Uzw28資訊網(wǎng)——每日最新資訊28at.com

圖片Uzw28資訊網(wǎng)——每日最新資訊28at.com

01：TresJS

1.1 與 vue 深度兼容

TresJS 提供了完善的中文文檔，我們可以直接在他的官網(wǎng)查看 TresJS 的使用方式。Uzw28資訊網(wǎng)——每日最新資訊28at.com

目前 TresJS 直接兼容 vue3 和 vite，我們可以通過(guò)如下方式對(duì) TresJS 進(jìn)行使用：Uzw28資訊網(wǎng)——每日最新資訊28at.com

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 為例：Uzw28資訊網(wǎng)——每日最新資訊28at.com

Uzw28資訊網(wǎng)——每日最新資訊28at.com

根據(jù)文檔中的內(nèi)容，我們可以很輕松的了解 TresCanvas 組件 的使用。Uzw28資訊網(wǎng)——每日最新資訊28at.com

那么接下來(lái)，就讓我們利用 TresJS 來(lái)完成一個(gè)基本的 3D 模型展示Uzw28資訊網(wǎng)——每日最新資訊28at.com

02：TresJS 案例

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

在使用 TresJS 之前，我們先簡(jiǎn)單了解下 3D 場(chǎng)景構(gòu)建基礎(chǔ)，我們來(lái)看下面的圖：Uzw28資訊網(wǎng)——每日最新資訊28at.com

圖片Uzw28資訊網(wǎng)——每日最新資訊28at.com

在整個(gè) 3D 場(chǎng)景中，包含 4 個(gè)關(guān)鍵概念：Uzw28資訊網(wǎng)——每日最新資訊28at.com

1. 物體(objects) 可以是球體、平面、燈光、你最喜歡的角色的 3D 模型（幻燈片放映類似于單詞的 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í)渲染效果如下：Uzw28資訊網(wǎng)——每日最新資訊28at.com

圖片Uzw28資訊網(wǎng)——每日最新資訊28at.com

今天，咱們通過(guò)一個(gè)簡(jiǎn)單的示例了解了 TresJS 的用法。如果感覺(jué) ThreeJS 學(xué)習(xí)復(fù)雜度高的同學(xué)，那么可以看下 TresJS ，或許可以為你帶來(lái)不一樣的開發(fā)體驗(yàn)?zāi)兀?span style="display:none">Uzw28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-93082-0.htmlVue 構(gòu)建 3D 模型全新方案，TresJS 火啦？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 七種JavaScript 中位運(yùn)算符的神奇用法

下一篇： 使用 Spring Boot 結(jié)合斷點(diǎn)續(xù)傳技術(shù)和自動(dòng)重連機(jī)制實(shí)現(xiàn)考試系統(tǒng)網(wǎng)絡(luò)不穩(wěn)定性的應(yīng)對(duì)策略