源碼時(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è)效果哦！

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

在上一節(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è)簡單的界面組件, 用來修改代碼中的變量。在本次學(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)注明出處）

當(dāng)前標(biāo)題：源碼時(shí)代前端干貨分享|threejs開發(fā)使用插件Gui.js與three.js引擎如何聯(lián)合使用
URL網(wǎng)址：http://bm7419.com/article8/pcihop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、微信公眾號(hào)、電子商務(wù)、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)