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