使用threejs實(shí)現(xiàn)滾動效果的示例代碼
前因
某一天我在刷抖音時,看到一個UI設(shè)計師分享了一個好看的網(wǎng)頁滾動動效設(shè)計。那種飄逸流暢的動畫效果立刻抓住了我的眼球,我腦海里立刻開始想象用代碼如何實(shí)現(xiàn)這個效果。
于是我把設(shè)計師的視頻保存下來研究,反復(fù)琢磨每個動畫細(xì)節(jié)需要哪些技術(shù)來配合。隨后我開工碼代碼,一個個函數(shù)、一個個模塊地構(gòu)建起這個動效。在磨合調(diào)試的過程中,我時而眉頭緊鎖,時而按捺不住興奮的心情。
經(jīng)常關(guān)注優(yōu)秀的設(shè)計作品,嘗試用代碼實(shí)現(xiàn),這樣不僅可以增強(qiáng)自己的編程能力,也可以從中獲取樂趣。這種從設(shè)計到編碼的過程,就像一個創(chuàng)造的閉環(huán)。
很高興可以通過編程讓虛擬的代碼世界連接起這個美好的現(xiàn)實(shí)世界。
設(shè)計相關(guān)(Figma+dora)
感謝“設(shè)計師Cc”提供的稿子
戳這里。對Dora工具有大致了解后，已經(jīng)大致實(shí)現(xiàn)思路，想用代碼實(shí)現(xiàn)的關(guān)鍵是：滾動 + 關(guān)鍵幀動畫
預(yù)覽
實(shí)現(xiàn)
技術(shù)選型
3d模型展示：
- @react-three/fiber: 流行的
threejsReact 封裝 - @react-three/drei:
threejs開發(fā)的輔助工具
動畫庫：
- GSAP：N逼，很全面的動畫庫
- ScrollTrigger：
GSAP滾動動畫插件
動畫實(shí)現(xiàn)
關(guān)鍵代碼
請先了解 Gsap Timeline 動畫配置相關(guān)內(nèi)容，請仔細(xì)查看官方示例，體會時間線的妙用。
思路：將滾動插件與時間線動畫相關(guān)聯(lián)，然后就是劃分每個時間段該做的動畫，比如：0~2s(旋轉(zhuǎn)+移動)，2~3s(旋轉(zhuǎn)+...)，其實(shí)這個過程就類似于Dora3d網(wǎng)頁動效工具在時間軸上打關(guān)鍵幀的過程。
結(jié)尾
以上就是使用threejs實(shí)現(xiàn)滾動效果的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于threejs實(shí)現(xiàn)滾動效果的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
chinaz利用了ajax實(shí)現(xiàn)評論的讀取操作，下面我們參考chinaz的代碼2008-05-05
JavaScript裝飾器的實(shí)現(xiàn)原理詳解
最近在使用TS+Vue的開發(fā)模式，發(fā)現(xiàn)項(xiàng)目中大量使用了裝飾器，看得我手足無措，今天特意研究一下實(shí)現(xiàn)原理，方便自己理解這塊知識點(diǎn)，有需要的小伙伴也可以參考一下2022-10-10
這篇文章主要介紹了uniapp微信小程序使用xr加載模型的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
詳解微信小程序（Taro）手動埋點(diǎn)和自動埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序（Taro）手動埋點(diǎn)和自動埋點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
javascript實(shí)現(xiàn)起伏的水波背景效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)起伏的水波背景效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊欄分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章介紹了javascript與cookie 的問題，有需要的朋友可以參考一下2013-11-11
最近因?yàn)楣ぷ餍枰?，弄了好多天的js了，老婆一問我在弄 ajax, 一問我在弄js，她都聽得沒有一點(diǎn)興趣了，我自己感覺還好，畢竟做出來了東西就有成就感吧，這里把幾個有用但是不常見的東西貼出來供大家參考參考2009-02-02
本文為大家寫了個很漂亮、兼容火狐的Js日期選擇，自動填充到輸入框，代碼如下，有需要的朋友可以參考下2013-08-08
最近一直在學(xué)習(xí)uni-app開發(fā)，由于uniapp是基于vue.js技術(shù)開發(fā)的,所以下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序自定義導(dǎo)航欄的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07