DAT.GUI-初次了解

dat.gui是一款小巧轻便的可视化工具，配合使用在Three.js中非常方便。

首先导入js库

[javascript]  view plain  copy

1. <script src="../examples/js/libs/dat.gui.min.js"></script>  

再参考dat.gui的用法，由于dat.gui直接显示变量名称，原本以为只能显示英文了，国人看起来会非常别扭，但是抱着侥幸态度一试发现居然可以使用中文。Google了一下发现JavaScript支持Unioncode字符集。

[javascript]  view plain  copy

1. var bulbLuminousPowers = {  
2.     /*"110000 lm (1000W)": 110000,*/  
3.     "1000W": 110000,  
4.     "300W": 3500,  
5.     "100W": 1700,  
6.     "60W": 800,  
7.     "40W": 400,  
8.     "25W": 180,  
9.     "4W": 20,  
10.     "关灯": 0  
11. };  
12.   
13. var hemiLuminousIrradiances = {  
14.   
15.     "黑夜": 0.001,  
16.     "稀月光": 0.2,  
17.     "满月光": 0.5,  
18.     "暮光": 3.4,  
19.     "起居室": 35,  
20.     "阴天": 45,  
21.     "日落日出": 55,  
22.     "多云": 70,  
23.     "晴朗": 120,  
24.     "阳光直射": 200,  
25. };  
26.   
27. var params = {  
28.     阴影: true,  
29.     exposure: 0.68,  
30.    /* bulbPower: Object.keys(bulbLuminousPowers)[2],*/  
31.     灯泡亮度: Object.keys(bulbLuminousPowers)[2],  
32.     环境光: Object.keys(hemiLuminousIrradiances)[4]      //其实是半球光照  
33. };  

初始化gui

[javascript]  view plain  copy

1. var gui = new dat.GUI();  
2.   
3. gui.add(params, '环境光', Object.keys(hemiLuminousIrradiances));  
4. gui.add(params, '灯泡亮度', Object.keys(bulbLuminousPowers));  
5. gui.add(params, '阴影');  
6. gui.open();  

最终效果图