Three.js 進階之旅：滾動控制模型動畫和相機動畫 🦢

聲明：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。

摘要

專欄上篇文章《Three.js 進階之旅：頁面*滑滾動-王國之淚》 講解並實現瞭如何使用 R3F 進行頁面圖片*滑滾動，本文內容在上節的基礎上，學習如何使用滾動控制 ScrollControls 來控制模型的的動畫播放和相機動畫，通過滾動滑鼠滾輪或者上下移動觸摸板，來控制模型的動畫播放進度或者相機的方位視角，從而呈現出驚艷的視覺效果。這種有趣的效果大家在*時瀏覽一些網頁的時候應該經常見到，如一些 3D產品 介紹頁向下滑動滑鼠滾輪時產品同時旋轉並根據產品的不同視角載入不同文案、或者 3D數字地球 根據滾輪的移動距離轉到某個國家或地區、還有一些 個人簡歷 頁面或時間軸頁面也經常用到這種效果。通過本文的閱讀和案例頁面的實現，你將學習到的知識包括：R3F 生態中的 ScrollControls、Html、useScroll、useGLTF、useAnimations 等組件和方法的基本用法、在 R3F 中載入模型並播放模型骨骼動畫、通過滾動控制模型動畫播放進程和相機參數、頁面元素的一些 CSS 動畫及頁面整體絲滑滾動動畫實現等。

效果

本文案例的實現效果如下圖所示，頁面主體元素由一個三維模型