聲明：本文涉及圖文和模型素材僅用于個(gè)人學(xué)習(xí)、研究和欣賞，請(qǐng)勿二次修改、非法傳播、轉(zhuǎn)載、出版、商用、及進(jìn)行其他獲利行為。

摘要

專欄上篇文章《Three.js 進(jìn)階之旅：頁(yè)面平滑滾動(dòng)-王國(guó)之淚》?講解并實(shí)現(xiàn)了如何使用?R3F?進(jìn)行頁(yè)面圖片平滑滾動(dòng)，本文內(nèi)容在上節(jié)的基礎(chǔ)上，學(xué)習(xí)如何使用滾動(dòng)控制?ScrollControls?來(lái)控制模型的的動(dòng)畫(huà)播放和相機(jī)動(dòng)畫(huà)，通過(guò)滾動(dòng)鼠標(biāo)滾輪或者上下移動(dòng)觸摸板，來(lái)控制模型的動(dòng)畫(huà)播放進(jìn)度或者相機(jī)的方位視角，從而呈現(xiàn)出驚艷的視覺(jué)效果。這種有趣的效果大家在平時(shí)瀏覽一些網(wǎng)頁(yè)的時(shí)候應(yīng)該經(jīng)常見(jiàn)到，如一些?3D產(chǎn)品?介紹頁(yè)向下滑動(dòng)鼠標(biāo)滾輪時(shí)產(chǎn)品同時(shí)旋轉(zhuǎn)并根據(jù)產(chǎn)品的不同視角加載不同文案、或者?3D數(shù)字地球?根據(jù)滾輪的移動(dòng)距離轉(zhuǎn)到某個(gè)國(guó)家或地區(qū)、還有一些?個(gè)人簡(jiǎn)歷?頁(yè)面或時(shí)間軸頁(yè)面也經(jīng)常用到這種效果。通過(guò)本文的閱讀和案例頁(yè)面的實(shí)現(xiàn)，你將學(xué)習(xí)到的知識(shí)包括：R3F?生態(tài)中的?ScrollControls、Html、useScroll、useGLTF、useAnimations?等組件和方法的基本用法、在?R3F?中加載模型并播放模型骨骼動(dòng)畫(huà)、通過(guò)滾動(dòng)控制模型動(dòng)畫(huà)播放進(jìn)程和相機(jī)參數(shù)、頁(yè)面元素的一些?CSS?動(dòng)畫(huà)及頁(yè)面整體絲滑滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)等。

效果

本文案例的實(shí)現(xiàn)效果如下圖所示，頁(yè)面主體元素由一個(gè)三維模型?????、及底部的?5?頁(yè)?HTML?頁(yè)面構(gòu)成，頁(yè)面初始加載時(shí)模型是靜止的，當(dāng)我們使用鼠標(biāo)或觸控板或直接拖動(dòng)頁(yè)面滾動(dòng)條時(shí)???，相機(jī)鏡頭???從正面近處平滑過(guò)渡到模型側(cè)面遠(yuǎn)處，模型開(kāi)始自動(dòng)播放自帶骨骼動(dòng)畫(huà)，模型動(dòng)作根據(jù)頁(yè)面滾動(dòng)距離和滾動(dòng)時(shí)速率的大小而不同。當(dāng)我們點(diǎn)擊頁(yè)面頂部菜單時(shí)，頁(yè)面會(huì)平滑滾動(dòng)到對(duì)應(yīng)位置，模型也會(huì)播放動(dòng)畫(huà)。

當(dāng)頁(yè)面逆向????滾動(dòng)時(shí)，相機(jī)和模型動(dòng)畫(huà)也會(huì)逆向變化和播放。

文章使用?GIF?可能會(huì)造成丟幀或卡頓，可以親自打開(kāi)預(yù)覽鏈接試試，大屏訪問(wèn)效果更佳。

• ??????在線預(yù)覽地址：https://dragonir.github.io/dancingDuck/

本專欄系列代碼托管在?Github?倉(cāng)庫(kù)【threejs-odessey】，后續(xù)所有目錄也都將在此倉(cāng)庫(kù)中更新。

???代碼倉(cāng)庫(kù)地址：git@github.com:dragonir/threejs-odessey.git

原理

如果用原生?JavaScript?實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)效果，就需要監(jiān)聽(tīng)滾動(dòng)事件和計(jì)算滾動(dòng)距離。本文還是和上篇文章《hree.js 進(jìn)階之旅：頁(yè)面平滑滾動(dòng)-王國(guó)之淚》一樣，直接使用封裝好的組件?ScrollControls?和?Scroll?來(lái)實(shí)現(xiàn)，它們的詳細(xì)用法和原理可前往上篇文章查看。本文中最終實(shí)現(xiàn)的頁(yè)面需要加載模型并播放它自帶的骨骼動(dòng)畫(huà)，因此用到了以下幾個(gè)?@react-three/drei?中的組件和?hooks。

Html

允許我們將?HTML?內(nèi)容綁定到場(chǎng)景中的任意對(duì)象，它將自動(dòng)投影到對(duì)象上。

Html?可以通過(guò)配置?occlude?屬性隱藏在幾何體后面。當(dāng)?Html?組件隱藏時(shí)，它將在最內(nèi)部的?div?上設(shè)置?opacity?屬性，如果需要添加動(dòng)畫(huà)效果或者控制過(guò)渡效果，可以使用?onOcclude?自定義方法。

useGLTF

它是一個(gè)使用?useLoader?和?GLTFLoader?的方便鉤子函數(shù)，它默認(rèn)使用?draco?來(lái)加載已壓縮的模型文件。

useAnimations

AnimationMixer?的抽象鉤子方法，可以像下面這樣獲取到模型自帶的動(dòng)畫(huà)信息。

THREE.MathUtils.damp

使用?dt?以類似彈簧的方式從?x?向?y?平滑地插入一個(gè)數(shù)字，以保持與幀速率無(wú)關(guān)的運(yùn)動(dòng)。

.damp?(x?:?Float,?y:?Float,?lambda:?Float,?dt:?Float?):?Float


• x：當(dāng)前點(diǎn)。

• y：目標(biāo)點(diǎn)。

• lambda：較高的?lambda?值可以使運(yùn)動(dòng)更加突然，較低的值可以使運(yùn)動(dòng)更加平緩。

• dt：以秒為單位的增量時(shí)間。

  
  

實(shí)現(xiàn)

〇 資源引入

在文件頂部，我們按上述原理中所述，引入必需的組件和方法。

① 場(chǎng)景初始化

場(chǎng)景初始化非常簡(jiǎn)單，只需像下面這樣添加?R3F?的?<Canvas />?組件，并初始化相機(jī)位置即可。

② 加載模型

我們先定義一個(gè)?ShubaDuck?類用來(lái)表示模型元素，然后使用?useGLTF?加載模型??????并使用模型文件的?scene?進(jìn)行渲染。然后在?Canvas?中添加模型元素，并通過(guò)?scale?、position?等屬性調(diào)整模型在頁(yè)面上的顯示大小和位置。在頁(yè)面渲染前，我們也可以使用?useGLTF.preload?對(duì)模型進(jìn)行預(yù)加載，以提高頁(yè)面使用體驗(yàn)。

以下為原始模型文件，下載完模型后可以我們可以在?Blender?中查看模型結(jié)構(gòu)和動(dòng)畫(huà)信息，刪除修改不需要的元素，最后壓縮導(dǎo)出。

頁(yè)面中完成模型加載并渲染。

???模型文件來(lái)源：https://sketchfab.com/3d-models/shuba-duck-54a6276ce06c4cc88fd497c8f1b8eb66

③ 播放模型骨骼動(dòng)畫(huà)

我們從模型中拿到內(nèi)置的骨骼動(dòng)畫(huà)?animations，然后使用?useAnimations?獲取到所有的動(dòng)作，可以根據(jù)動(dòng)作的名稱進(jìn)行動(dòng)畫(huà)播放比如本例中是?LironShuba?？梢栽?useEffect?中對(duì)動(dòng)作使用?play()?方法進(jìn)行播放，本例中的?reset()、fadeIn()?方法都是可選的，它們的作用分別是開(kāi)始前重置動(dòng)作和模型入場(chǎng)動(dòng)畫(huà)類型。

④ 滾動(dòng)控制模型動(dòng)畫(huà)

現(xiàn)在我們來(lái)添加通過(guò)鼠標(biāo)滾輪滾動(dòng)來(lái)控制模型動(dòng)畫(huà)播放進(jìn)度的功能，即當(dāng)我們向下滾動(dòng)頁(yè)面時(shí)，模型動(dòng)畫(huà)正向播放，否則逆向播放，滾動(dòng)速度越快，模型動(dòng)畫(huà)播放速度也越快。我們先在?useEffect?中將模型動(dòng)畫(huà)初始狀態(tài)設(shè)置為?pause?暫停，然后在?useFrame?頁(yè)面重繪動(dòng)畫(huà)鉤子函數(shù)中拿到動(dòng)畫(huà)動(dòng)作和滾動(dòng)百分比?scroll.offset，設(shè)置動(dòng)作播放時(shí)間?action.time，使其從初始值平滑過(guò)渡到目標(biāo)值，目標(biāo)值的確定可以通過(guò)整個(gè)動(dòng)畫(huà)播放周期時(shí)間以及頁(yè)面滾動(dòng)距離的長(zhǎng)度去計(jì)算，第三個(gè)參數(shù)?lambda?也可以根據(jù)自己的頁(yè)面進(jìn)行調(diào)整。

在頁(yè)面中，我們需要使用?<ScrollControls />?組將將模型組件?<ShubaDuck />?包裹起來(lái)。

此時(shí)使用滾動(dòng)控制模型動(dòng)畫(huà)功能就全部完成了，頁(yè)面初始加載時(shí)模型是靜止的，當(dāng)我們滾動(dòng)頁(yè)面時(shí)，模型根據(jù)滾動(dòng)速度和滾動(dòng)距離就會(huì)自動(dòng)播放對(duì)應(yīng)的動(dòng)畫(huà)了。

???scroll.offset 是一個(gè)處于 [0, 1] 之間的數(shù)，表示滾動(dòng)的百分比，當(dāng)頁(yè)面未滾動(dòng)時(shí)值為 0，完全滾動(dòng)到盡頭時(shí)值為 1.

⑤ 滾動(dòng)控制相機(jī)

在?useFrame?鉤子函數(shù)中，我們同樣可以在頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)修改相機(jī)????的位置，這樣在視覺(jué)上也能形成比如模型旋轉(zhuǎn)、放大縮小、顯示隱藏等動(dòng)畫(huà)效果。本案例中使用了如下的設(shè)置，當(dāng)頁(yè)面從上往下滾動(dòng)時(shí)，相機(jī)從模型正面變換到模型側(cè)面更遠(yuǎn)的地方，在視覺(jué)上形成模型轉(zhuǎn)身并變小的效果??。

⑥ 頁(yè)面裝飾

模型部分已經(jīng)全部完成了，此時(shí)我們可以使用原理中介紹的?Html?組件，將其添加到頁(yè)面中，并直接用?HTML?和?CSS?添加一些好看的頁(yè)面，與模型主題呼應(yīng)。像下面這樣，本文中添加了?5?個(gè)頁(yè)面，每個(gè)頁(yè)面都添加了不同的樣式。有時(shí)間的話，我們也可以使用?gsap?等動(dòng)畫(huà)庫(kù)，給?HTML?元素也添加一些滾動(dòng)時(shí)的動(dòng)畫(huà)效果??。

第一頁(yè)

第一頁(yè)有較多的頁(yè)面元素，其中底部白色文字使用了一種?woff2?格式的開(kāi)源卡通字體，旋轉(zhuǎn)的鵝????是通過(guò)如下?CSS?動(dòng)畫(huà)實(shí)現(xiàn)的。

第二頁(yè)

第二頁(yè)是?3?個(gè)色塊????通過(guò)旋轉(zhuǎn)后形成的圖案，給它們添加了明暗變化的動(dòng)畫(huà)效果。

其他頁(yè)

剩下的頁(yè)面使用了一些簡(jiǎn)單的文案或圖片元素，等有時(shí)間再優(yōu)化小吧???。其實(shí)還有很多細(xì)節(jié)樣式和功能，如鼠標(biāo)的樣式是一個(gè)???、向下滾動(dòng)的提示語(yǔ)、頂部半透明的導(dǎo)航菜單等，具體實(shí)現(xiàn)可查看源碼。

⑦ 點(diǎn)擊菜單欄頁(yè)面滑動(dòng)動(dòng)畫(huà)

最后，我們來(lái)給頁(yè)面頂部的菜單添加一下點(diǎn)擊操作????。點(diǎn)擊頁(yè)面頂部導(dǎo)航欄菜單滑動(dòng)到對(duì)應(yīng)頁(yè)面功能實(shí)現(xiàn)使用了?element.scrollIntoView?方法，可以像下面這樣實(shí)現(xiàn)并綁定到菜單的點(diǎn)擊事件中，此時(shí)點(diǎn)擊菜單頁(yè)面滾動(dòng)時(shí)，模型動(dòng)畫(huà)也會(huì)同時(shí)播放。

???源碼地址：?https://github.com/dragonir/threejs-odessey

總結(jié)

本文中主要包含的知識(shí)點(diǎn)包括：

• R3F?生態(tài)中的?ScrollControls、Html、useScroll、useGLTF、useAnimations?等組件和方法的基本用法。

• 學(xué)會(huì)在?R3F?中加載模型并播放模型骨骼動(dòng)畫(huà)。

• 通過(guò)滾動(dòng)控制模型動(dòng)畫(huà)播放進(jìn)程和相機(jī)參數(shù)。

• 在滾動(dòng)頁(yè)面中將模型和?HTML?元素結(jié)合起來(lái)。

• 頁(yè)面元素的一些?CSS?動(dòng)畫(huà)及頁(yè)面整體絲滑滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn)等。

想了解其他前端知識(shí)或其他未在本文中詳細(xì)描述的Web 3D開(kāi)發(fā)技術(shù)相關(guān)知識(shí)，可閱讀我往期的文章。如果有疑問(wèn)可以在評(píng)論中留言，如果覺(jué)得文章對(duì)你有幫助，不要忘了一鍵三連哦 ??。

附錄

• [1].??? Three.js 打造繽紛夏日3D夢(mèng)中情島

• [2].??? Three.js 實(shí)現(xiàn)炫酷的賽博朋克風(fēng)格3D數(shù)字地球大屏

• [3].??? Three.js 實(shí)現(xiàn)2022冬奧主題3D趣味頁(yè)面，含冰墩墩

• [4].??? Three.js 實(shí)現(xiàn)3D開(kāi)放世界小游戲：阿貍的多元宇宙

• [5].??? Three.js 進(jìn)階之旅：全景漫游-高階版在線看房

• …

• 【Three.js 進(jìn)階之旅】系列專欄訪問(wèn) ??

• 更多往期【3D】專欄訪問(wèn) ??

• 更多往期【前端】專欄訪問(wèn) ??

參考

• [1].?threejs.org

• [2].?drei.pmnd.rs