快捷導(dǎo)航

使用threejs實(shí)現(xiàn)滾動(dòng)效果的示例代碼

更新時(shí)間：2024年01月17日 08:27:51 作者：成雨_

某一天我在刷抖音時(shí),看到一個(gè)UI設(shè)計(jì)師分享了一個(gè)好看的網(wǎng)頁滾動(dòng)動(dòng)效設(shè)計(jì),那種飄逸流暢的動(dòng)畫效果立刻抓住了我的眼球,我腦海里立刻開始想象用代碼如何實(shí)現(xiàn)這個(gè)效果,所以本文給大家分享了如何使用threejs實(shí)現(xiàn)滾動(dòng)效果,感興趣的朋友可以參考下

前因

某一天我在刷抖音時(shí),看到一個(gè)UI設(shè)計(jì)師分享了一個(gè)好看的網(wǎng)頁滾動(dòng)動(dòng)效設(shè)計(jì)。那種飄逸流暢的動(dòng)畫效果立刻抓住了我的眼球,我腦海里立刻開始想象用代碼如何實(shí)現(xiàn)這個(gè)效果。

于是我把設(shè)計(jì)師的視頻保存下來研究,反復(fù)琢磨每個(gè)動(dòng)畫細(xì)節(jié)需要哪些技術(shù)來配合。隨后我開工碼代碼,一個(gè)個(gè)函數(shù)、一個(gè)個(gè)模塊地構(gòu)建起這個(gè)動(dòng)效。在磨合調(diào)試的過程中,我時(shí)而眉頭緊鎖,時(shí)而按捺不住興奮的心情。

經(jīng)常關(guān)注優(yōu)秀的設(shè)計(jì)作品,嘗試用代碼實(shí)現(xiàn),這樣不僅可以增強(qiáng)自己的編程能力,也可以從中獲取樂趣。這種從設(shè)計(jì)到編碼的過程,就像一個(gè)創(chuàng)造的閉環(huán)。

很高興可以通過編程讓虛擬的代碼世界連接起這個(gè)美好的現(xiàn)實(shí)世界。

設(shè)計(jì)相關(guān)(Figma+dora)

感謝“設(shè)計(jì)師Cc”提供的稿子

Figma
Dora: 無代碼3D動(dòng)畫

戳這里。對(duì)Dora工具有大致了解后，已經(jīng)大致實(shí)現(xiàn)思路，想用代碼實(shí)現(xiàn)的關(guān)鍵是：滾動(dòng) + 關(guān)鍵幀動(dòng)畫

預(yù)覽

源碼codesandbox

實(shí)現(xiàn)

技術(shù)選型

3d模型展示：

@react-three/fiber: 流行的threejs React 封裝
@react-three/drei: threejs開發(fā)的輔助工具

動(dòng)畫庫：

GSAP：N逼，很全面的動(dòng)畫庫
ScrollTrigger：GSAP滾動(dòng)動(dòng)畫插件

動(dòng)畫實(shí)現(xiàn)

關(guān)鍵代碼

請(qǐng)先了解 Gsap Timeline 動(dòng)畫配置相關(guān)內(nèi)容，請(qǐng)仔細(xì)查看官方示例，體會(huì)時(shí)間線的妙用。

思路：將滾動(dòng)插件與時(shí)間線動(dòng)畫相關(guān)聯(lián)，然后就是劃分每個(gè)時(shí)間段該做的動(dòng)畫，比如：0~2s(旋轉(zhuǎn)+移動(dòng))，2~3s(旋轉(zhuǎn)+...)，其實(shí)這個(gè)過程就類似于Dora3d網(wǎng)頁動(dòng)效工具在時(shí)間軸上打關(guān)鍵幀的過程。