Three.js中，我們常常需要動態(tài)的調(diào)節(jié)場景中的某些變量醉者，例如場景的燈光強(qiáng)度但狭，顏色披诗，某個物體的擺放位置，它的顏色立磁，大小等等呈队。如果修改一次刷新一次頁面那就太麻煩了。于是我們使用dat.GUI()
什么是dat.GUI唱歧？
dat.GUI是由Google開發(fā)人員創(chuàng)建的宪摧，輕量級的圖形用戶界面庫。大小約為幾十KB颅崩。它可以用來創(chuàng)建操作控制三維場景的菜單欄几于，也就是說，這個控件的屬性值發(fā)生變化沿后，則三維場景中的數(shù)據(jù)也會發(fā)生變化沿彭。
如何使用dat.GUI?
1.引用庫文件
<script src = "dat.gui.js" > </script>
2.創(chuàng)建控件對象
即創(chuàng)建一個全局javaScript對象。對象包含一些列的屬性尖滚，這些屬性就是我們想通過 dat.GUI組件來修改的變量喉刘。
var controls = {
旋轉(zhuǎn)速度：0.01,
顏色：material.color.getStyle(),
彈跳速度：1
}
3.創(chuàng)建dat.GUI對象，并將控件對象數(shù)據(jù)添加到dat.GUI中
var gui = new dat.GUI(); //創(chuàng)建GUI對象
var folder = gui.addFolder('菜單'); // 添加文件夾熔掺。用于歸類屬性饱搏。默認(rèn)情況下是不展開的。
gui.domElement.style = 'position:absolute;top:0px;right:0px'; //設(shè)置交互界面位置
folder.addColor(controls, '顏色'); //添加顏色菜單選項
folder.add(controls , '縮放系數(shù)', 0.1 , 2.5); //添加縮放系數(shù)拖動條菜單選項置逻。并且指定了范圍推沸。
folder.add(controls , '轉(zhuǎn)速' , {低俗：.0.005, 中速：0.01,高速：0.1}); //添加轉(zhuǎn)速下拉菜單選項
folder.open(); //文件夾folder下面的菜單選項展開顯示
4.在渲染循環(huán)中綁定控件對象的屬性。
function render(){
renderer.render(scene , camera);
mesh.scale.x = controls.縮放系數(shù); //更新縮放系數(shù)
mesh.rotateY(controls.轉(zhuǎn)速); //更新轉(zhuǎn)速
material.color.setStyle(controls.顏色); //更新顏色
requestAnimationFrame(render); //請求再次執(zhí)行渲染函數(shù)render
}
render();
完成券坞！
這種可視化的界面操作實現(xiàn)了數(shù)據(jù)綁定當(dāng)我們用鼠標(biāo)去改變這些屬性時鬓催，會發(fā)現(xiàn)視圖中場景的對應(yīng)屬性也發(fā)生了變化。
附錄
- add() 方法
格式：
add(空間對象變量名 ,對象屬性名, 其他參數(shù))
控件對象屬性值的數(shù)據(jù)類型會影響到GUI對象界面菜單選項的視覺效果和鍵鼠交互方式恨锚。例如到底是鼠標(biāo)滑動界面宇驾，還是下拉菜單等等。
- Number類型: slider猴伶。下拉菜單
- Boolean類型： 復(fù)選框
- Function類型： 按鈕
- String : 文本輸入框 课舍，下拉菜單
