threeJS---插件（Gui插件）

經(jīng)過前面的學習, 小伙伴們對ThreeJS的模型與材質(zhì)是否有一個了解呢? 在之前的課程中，我們已經(jīng)學習了平面、球體以及盒子模型， 并學習了普通材質(zhì)和光陰材質(zhì)。在本次學習中，我們主要學習Gui插件， 并且我們在本章學習中會添加球體彈跳的一個效果哦！

10年積累的成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有金灣免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在上一節(jié)的課程中，我們已經(jīng)將立方體旋轉(zhuǎn)起來了，今天我們給球體加一個彈跳效果吧

我們需要在我們上一節(jié)課的基礎(chǔ)上繼續(xù)修改我們的代碼，來看看我們上一節(jié)內(nèi)容最后面寫的一段代碼，在這里我們對立方體進行了一個旋轉(zhuǎn)的效果，我們也要在這里添加球體跳躍的效果

1.我們需要添加一個初始速度，step，并在render函數(shù)中對球體的x軸和y軸的定位添加計算

你的球體這會是否動起來了呢？
2.接下來我們要使用Gui插件了，Gui插件是Google的幾個人創(chuàng)建的一個名為dat.GUI的庫, 我們使用Gui插件可以創(chuàng)建出一個簡單的界面組件, 用來修改代碼中的變量。在本次學習中，我會帶領(lǐng)大家學習如何使用Gui插件來控制我們立方體的旋轉(zhuǎn)速度和球體的彈跳速度。
首先，我們需要在header標簽中引入Gui的代碼

然后我們需要設(shè)置Gui的一些相關(guān)內(nèi)容

此刻刷新你的頁面，在左上角你可以看到一個小界面哦，這就是我們設(shè)置好的GUI插件界面

3.現(xiàn)在拖動數(shù)據(jù)條，我們的球體和立方體的動畫效果是沒有任何變化的，是因為我們還沒有把物體的運行速度和我們的Gui串聯(lián)起來，所以我們接下來要做的是在我們的render函數(shù)中，將我們的controls對象里面的參數(shù)加到立方體和球體的運動里面，如以下代碼：

完成以上步驟，我們就可以通過瀏覽器的Gui插件的界面來控制我們物體運行速度。 那我們是不是可以通過這個界面來控制物體的大小和位置呢? 我覺得大家可以下來自己研究一下哦

所有代碼可以在這個地址里下載 :
https://github.com/Daisy-YW/threeJS/tree/master

（本文由源碼時代技術(shù)老師原創(chuàng)撰寫，轉(zhuǎn)載請注明出處）