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

摘要

本文內(nèi)容作為兔年新春紀(jì)念頁面，將使用?Three.js?及 其他前端開發(fā)知識，創(chuàng)建一個以兔子為主題的?3D?簡單的趣味頁面?Rabbit craft go。本文內(nèi)容包括使用純代碼創(chuàng)建三維浮島、小河、樹木、兔子、胡蘿卜以及兔子的運動交互、浮島的動畫效果等。本文包含的知識點相對比較簡單，主要包括 使用?Three.js?網(wǎng)格立方體搭建三維卡通場景、鍵盤事件的監(jiān)聽與三維場景動畫的結(jié)合等，如果仔細閱讀并實踐過本專欄《Three.js 進階之旅》的話，非常容易掌握。

???兔子造型來源于?Three.js開源論壇，頁面整體造型靈感來源于《我的世界》，頁面名稱靈感來源于游戲《Lara Craft Go》。

效果

我們先來看看實現(xiàn)效果，頁面加載完成后是一個游戲操作提示界面，可以通過鍵盤???空格鍵?及?W、?A、?S、?D?或方向鍵操作小兔子運動。點擊開始按鈕后，游戲提示界面消失，可以看到倒三角造型的天空浮島及浮島上方的樹木???、河流??、橋???、胡蘿卜???、兔子????等元素，接著攝像機鏡頭????自動拉近并聚焦到兔子上。

按照操作提示界面的按鍵，可以操作兔子進行前進、轉(zhuǎn)向、跳躍等運動，當(dāng)兔子的運動位置觸碰到胡蘿卜時，胡蘿卜會消失同時兔子會進行跳躍運動。當(dāng)兔子運動到小河或者超出浮島范圍時，兔子則會墜落到下方。

打開以下鏈接，在線預(yù)覽效果，大屏訪問效果更佳。

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

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

???代碼倉庫地址：git@github.com:dragonir/threejs-odessey.git

實現(xiàn)

文章篇幅有限，因此刪減了三維模型的位置信息等細節(jié)調(diào)整代碼，只提供構(gòu)建三維模型的整體思路邏輯，想了解該部分內(nèi)容的詳細介紹可以閱讀本專欄前幾篇文章及閱讀本文配套源碼?，F(xiàn)在，我們來看看整個頁面的實現(xiàn)詳細步驟：

頁面結(jié)構(gòu)

Rabbit Craft Go?頁面的整體結(jié)構(gòu)如下，其中?canvas.webgl?是用于渲染場景的容器、剩余標(biāo)簽都是一些裝飾元素或提示語。

場景初始化

場景初始化過程中，我們引入必需的開發(fā)資源，并初始化渲染場景、相機、控制器、光照、頁面縮放適配等。其中外部資源的引入，其中?OrbitControls?用于頁面鏡頭縮放及移動控制；TWEEN?和?Animations?用于生成鏡頭補間動畫，也就是剛開始時浮島由遠及近的鏡頭切換動畫中效果；Island、Carrot、Rabbit、Waterfall?等是用來構(gòu)建三維世界的類。為了使場景更加卡通化，使用了?THREE.sRGBEncoding?渲染效果。場景中添加了兩種光源，其中?THREE.DirectionalLight?用來生成陰影效果。

創(chuàng)建浮島

如以下????兩幅圖所示，整個浮島造型是一個四棱椎，整體分為四部分，頂部是由地面和河流構(gòu)成的四方體、底部三塊是倒置的三角。生成這些三維模型的其實也并沒有多少技巧，就像搭積木一樣使用?Three.js?提供的立方體網(wǎng)格通過計算拼接到一起即可。類?Island?包含一個方法?generate?用于創(chuàng)建上述三維模型，并將所創(chuàng)建模型添加到三維分組?floorMesh?中用于外部調(diào)用，其中棱柱部分是通過?CylinderBufferGeometry?來實現(xiàn)的。

浮島俯視圖是一個正方形。

浮島側(cè)視圖是一個倒三角形。

創(chuàng)建水流

接下來，我們?yōu)楹恿魈砑右粋€小瀑布，使場景動起來。流動的瀑布三維水滴????滴落效果的是通過創(chuàng)建多個限定范圍內(nèi)隨機位置的?THREE.BoxBufferGeometry?來實現(xiàn)水滴模型，然后通過水滴的顯示隱藏動畫實現(xiàn)視覺上的水滴墜落效果。Waterfall?類用于創(chuàng)建單個水滴，它為水滴初始化隨機位置和速度，并提供一個?update?方法用來更新它們。

完成水滴創(chuàng)建后，不要忘了需要在頁面重繪動畫?tick?方法中像這樣更新已創(chuàng)建的水滴數(shù)組?drops，使其看起來生成向下流動墜落的效果。

創(chuàng)建橋

在河流上方添加一個小木橋???，這樣小兔子就可以通過木橋在小河兩邊移動了。 類?Bridge?通過?generate?方法創(chuàng)建一個小木橋，并通過三維模型組?bridgeMesh?將其導(dǎo)出，我們可以在上面創(chuàng)建的?Island?類中使用它，將其添加到三維場景中。

創(chuàng)建樹

從預(yù)覽動圖和頁面可以看到，浮島上共有兩種樹???，綠色的高樹和粉紅色的矮樹，樹的實現(xiàn)也非常簡單，是使用了兩個?BoxBufferGeometry?拼接到一起。類?Tree?和?LeafTree?分別用于生成這兩種樹木，接收參數(shù)?(x, y, z)?分別表示樹木在場景中的位置信息。我們可以在?Island?輔導(dǎo)上添加一些樹木，構(gòu)成浮島上的一片小森林。

矮樹

創(chuàng)建胡蘿卜

接著，在地面上添加一些胡蘿卜???。胡蘿卜身體部分是通過四棱柱?CylinderBufferGeometry?實現(xiàn)的，然后通過?BoxBufferGeometry?立方體來實現(xiàn)胡蘿卜的兩片葉子。場景中可以通過?Carrot?類來添加胡蘿卜，本頁面示例中是通過循環(huán)調(diào)用添加了?20?個隨機位置的胡蘿卜。

創(chuàng)建兔子

最后，來創(chuàng)建頁面的主角兔子???。兔子全部都是由立方體?BoxBufferGeometry?搭建而成的，整體可以分解為頭、眼睛、耳朵、鼻子、嘴、胡須、身體、尾巴、四肢等構(gòu)成，構(gòu)建兔子時的核心要素就是各個立方體位置和縮放比例的調(diào)整，需要具備一定的審美能力，當(dāng)然本例中使用的兔子是在?Three.js?社區(qū)開源代碼的基礎(chǔ)上改造的???。

完成兔子的整體外形之后，我們通過?gsap?給兔子添加一些運動動畫效果和方法以供外部調(diào)用，其中?blink()?方法用于眨眼、jump()?方法用于原地跳躍、nod()?方法用于點頭、run()?方法用于奔跑、fall()?方法用于邊界檢測時檢測到超出運動范圍時使兔子墜落效果等。完成?Rabbit?類后，我們就可以在場景中初始化小兔子。

將兔子添加到場景中。

添加動畫和操作

為了使兔子可以運動和可交互，我們通過監(jiān)聽鍵盤按鍵的方式來調(diào)用兔子類內(nèi)置的對應(yīng)動畫方法，兔子的方向轉(zhuǎn)動可以通過修改兔子的旋轉(zhuǎn)屬性?rotation?來實現(xiàn)。

為了使場景更加真實和趣味，我們可以添加一些邊界檢測方法，當(dāng)兔子位置處于非可運動區(qū)域如小河、浮島之外等區(qū)域時，可以調(diào)用兔子的?fall()，方法使其墜落。當(dāng)檢測到兔子的位置和胡蘿卜的位置重疊時，給兔子添加了一個?jump()?跳躍動作并使檢測到的這個胡蘿卜從場景中移除。

頁面裝飾

最后，我們來制作一個其實頁面，中間部分是鍵盤操作說明，底部是一些裝飾文案圖片，操作提示下方是一個開始按鈕，我們給這個按鈕添加一個通過?TWEEN.js?實現(xiàn)的鏡頭補間動畫效果，當(dāng)點擊按鈕時，頁面首先顯示的是倒置三角造型的浮島，然后鏡頭慢慢方法拉近，顯示出兔子運動的區(qū)域。本頁面為了使其看起來更加符合游戲主題，標(biāo)題文案使用了一種像素化的字體??。

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

總結(jié)

本文中主要包含的知識點包括：

• 使用?Three.js?網(wǎng)格立方體搭建三維卡通場景

• 鍵盤事件的監(jiān)聽與三維場景動畫的結(jié)合

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

附錄

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

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

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

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

• [5].??? 1000粉！使用Three.js實現(xiàn)一個創(chuàng)意紀(jì)念頁面

• …

• 【Three.js 進階之旅】系列專欄訪問 ??

• 更多往期【3D】專欄訪問 ??

• 更多往期【前端】專欄訪問 ??

參考

• [1].?three.js journey

• [2].?threejs.org