Javascript中文变量及dat.gui的使用

来源：互联网发布：帝国cms写进销存系统编辑：程序博客网时间：2024/06/06 09:49

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

首先导入js库

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

再参考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();

最终效果图

0 1