大主宰,最好看的小说排行,古风小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Three.js利用dat.GUI簡化試驗流程的方法-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Three.js利用dat.GUI簡化試驗流程的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為朝天企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站建設(shè)，朝天網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

我們實例化dat.GUI對象后，會在右上角顯示出一些可以調(diào)節(jié)的參數(shù)，比如：

Three.js利用dat.GUI簡化試驗流程的方法

這就是今天的案例制作出來的五個可以調(diào)節(jié)的屬性。而且實現(xiàn)起來也很簡單，而且大部分是需要我們做的，除了上面的這個控制臺不是我們寫出來的。

引入方式

首先，你需要將庫文件引入到頁面當(dāng)中：

然后，你可以聲明一個對象，對象內(nèi)包括所有需要修改的屬性，比如：

gui = { 
 lightY:30, //燈光y軸的位置 
 sphereX:0, //球的x軸的位置 
 sphereZ:0, //球的z軸的位置 
 cubeX:25, //立方體的x軸位置 
 cubeZ:-5 //立方體的z軸的位置 
};

這是本人書寫的案例相關(guān)的屬性，和上面圖片的能夠?qū)Ρ绕饋怼?/p>

下一步，你就需要實力化dat.GUI對象，然后把相關(guān)需要控制的屬性調(diào)用屬性相關(guān)的add(對象，屬性，最小值，大值)方法，將屬性控制添加進(jìn)去：

var datGui = new dat.GUI(); 
  //將設(shè)置屬性添加到gui當(dāng)中，gui.add(對象，屬性，最小值，大值） 
  datGui.add(gui,"lightY",0,100); 
  datGui.add(gui,"sphereX",-30,30); 
  datGui.add(gui,"sphereZ",-30,30); 
  datGui.add(gui,"cubeX",0,60); 
  datGui.add(gui,"cubeZ",-30,30);

到了這一步，dat.GUI對象，就可以控制這些值了，我們再需要做的就是，在每一次渲染的animate函數(shù)里面講相關(guān)的值修改掉，這樣就能實現(xiàn)這個效果了。

//更新相關(guān)位置 
light.position.y = gui.lightY; 
sphere.position.x = gui.sphereX; 
sphere.position.z = gui.sphereZ; 
cube.position.x = gui.cubeX; 
cube.position.z = gui.cubeZ;

到這里就實現(xiàn)效果了。

常用方法

gui.addFolder()

此方法是添加一個欄目，返回一個欄目對象，具有下拉菜單的功能，如果在當(dāng)前欄目下面添加功能按鈕，需要按下面的方式書寫

var lightFolder = gui.addFolder('Light'); 
 
lightFolder.add(param, 'width', 0.1, 100).onChange(function (val) { 
 
 rectLight.width = val; 
 
});

gui.add()

這個方法是常用的添加方法，可以添加一個普通按鈕，最小傳入兩個值，三四個值是設(shè)置范圍

將設(shè)置屬性添加到gui當(dāng)中，gui.add(對象，屬性，最小值，大值）

如果對象里面的類是一個函數(shù)，如果需要觸發(fā)的點擊事件，只傳入兩個值就好了，點擊的時候就可以觸發(fā)到相關(guān)事件。

gui.add(controls, 'addCube'); 
gui.addColor()

這個方法添加的按鈕時一個標(biāo)準(zhǔn)的顏色選擇器，比如：

gui.addColor(param, 'color')

.onChange()

這個方法是可以觸發(fā)的回調(diào)函數(shù)，在值發(fā)生變動的時候會觸發(fā)當(dāng)前函數(shù)，比如

gui.addColor(param, 'color').onChange(function (val) { 
 
 rectLight.color.setHex(val); 
 
});

.listen()

如果當(dāng)前只是想顯示當(dāng)前的值，而且監(jiān)聽當(dāng)前的變化，就這么寫：

gui.add(obj, 'key').listen();

效果案例

Three.js利用dat.GUI簡化試驗流程的方法

下面附上我的全部代碼：

 
 
 
  
 Title 
  
  html, body { 
   margin: 0; 
   height: 100%; 
  } 
 
  canvas { 
   display: block; 
  }

感謝各位的閱讀！關(guān)于“Three.js利用dat.GUI簡化試驗流程的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：Three.js利用dat.GUI簡化試驗流程的方法-創(chuàng)新互聯(lián)
標(biāo)題URL：http://fisionsoft.com.cn/article/ceoihg.html

新聞中心

其他資訊