DAT.GUI-初次了解

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

首先导入js库

 "../examples/js/libs/dat.gui.min.js">

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

 var bulbLuminousPowers = {
     /*"110000 lm (1000W)": 110000,*/
     "1000W": 110000,
     "300W": 3500,
     "100W": 1700,
     "60W": 800,
     "40W": 400,
     "25W": 180,
     "4W": 20,
     "关灯": 0
 };

 var hemiLuminousIrradiances = {

     "黑夜": 0.001,
     "稀月光": 0.2,
     "满月光": 0.5,
     "暮光": 3.4,
     "起居室": 35,
     "阴天": 45,
     "日落日出": 55,
     "多云": 70,
     "晴朗": 120,
     "阳光直射": 200,
 };

 var params = {
     阴影: true,
     exposure: 0.68,
    /* bulbPower: Object.keys(bulbLuminousPowers)[2],*/
     灯泡亮度: Object.keys(bulbLuminousPowers)[2],
     环境光: Object.keys(hemiLuminousIrradiances)[4]      //其实是半球光照
 };

初始化gui

 var gui = new dat.GUI();

 gui.add(params, '环境光', Object.keys(hemiLuminousIrradiances));
 gui.add(params, '灯泡亮度', Object.keys(bulbLuminousPowers));
 gui.add(params, '阴影');
 gui.open();

最终效果图