源碼時(shí)代前端干貨分享| threejs 開發(fā)使用插件Gui.js與three.js引擎如何聯(lián)合使用

threeJS---插件（Gui插件）

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

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

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

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

你的球體這會(huì)是否動(dòng)起來了呢？
2.接下來我們要使用Gui插件了，Gui插件是Google的幾個(gè)人創(chuàng)建的一個(gè)名為dat.GUI的庫, 我們使用Gui插件可以創(chuàng)建出一個(gè)簡(jiǎn)單的界面組件, 用來修改代碼中的變量。在本次學(xué)習(xí)中，我會(huì)帶領(lǐng)大家學(xué)習(xí)如何使用Gui插件來控制我們立方體的旋轉(zhuǎn)速度和球體的彈跳速度。
首先，我們需要在header標(biāo)簽中引入Gui的代碼
<script src="./js/dat.gui.min.js"></script>
然后我們需要設(shè)置Gui的一些相關(guān)內(nèi)容

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

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

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

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

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