ThreeJS的GUI控制器到底是个啥玩意儿？

说实话，刚接触Three.js的时候，我也一脸懵逼。

你想想啊，一个3D场景，里面一堆参数要调。

颜色、位置、旋转速度、灯光强度……

每次改个值dou得重新刷新页面太麻烦了！

这时候，GUI控制器就来了简直就是救星！

它就像一个调试面板，让你在浏览器里直接拖动滑块就Neng改参数。

害，谁用谁知道，真香！

dat.GUI和lil-gui，选哪个？

现在主流的有两个GUI库：dat.GUI 和 lil-gui。

dat.GUI是老前辈了稳定但有点年久失修的感觉。

lil-gui是后起之秀，geng轻量，性Nenggeng好，API也geng现代。

咱就是说推荐用 lil-gui，不过 dat.GUI 用的人多，资料也多。

你懂的，kan项目需求咯。

怎么用起来？

引入对应的JS文件，这个不用我说了吧？

然后new 一个 GUI 实例出来：

const gui = new dat.GUI;

或者：

const gui = new lil.GUI;

接着，定义一个对象，里面放你要控制的参数：

const params = {
    speed: 0.01,
    color: '#ff0000',
    wireframe: false
};

然后把这些参数加到GUI里：

gui.add;
gui.addColor;
gui.add;

就这么简单！

你拖动滑块，params对象里的值就会自动geng新。

然后你在渲染循环里用这个params对象就行了。

举个栗子

比如你想控制一个立方体的旋转速度：

先定义个控制器对象：

const controls = {
    rotationSpeed: 0.01
};

然后加到GUI里：

gui.add;

在animate函数里用它：

function animate {
    cube.rotation.x += controls.rotationSpeed;
    cube.rotation.y += controls.rotationSpeed;
    requestAnimationFrame;
    renderer.render;
}

你kan，是不是贼方便？

还Neng控制啥？

太多了兄弟们！

颜色、位置、缩放、透明度、灯光强度、材质属性……

你甚至Ke以加按钮，执行一些函数：

const controls = {
    reset: function {
        // 重置场景
    }
};
gui.add;

或者加文件选择器，加载模型：

虽然不Neng直接用GUI加，但你Ke以结合其他库实现。

想象力是第一生产力！

dat.GUI的一些小技巧

你Ke以给控制器分组：

const folder1 = gui.addFolder;
folder1.add;
folder1.add;
folder1.open; // 默认展开

还Ke以监听值的变化：

gui.add.onChange {
    console.log;
});

或者监听完成拖动后：

.onFinishChange {
    // Zuo点啥
});

对了记得在生产环境把GUI关掉哦，不然用户也Neng乱调。

或者你也Ke以加个开关控制是否显示GUI面板。

lil-gui的优势

lil-gui体积geng小，性Nenggeng好。

而且支持ES模块，用起来geng现代。

API也geng简洁。

比如添加颜色控制器：

gui.addColor;

dat.GUI得这样：

gui.addColor.onChange;

lil-gui还支持自定义CSS主题，好kan多了！

Zui后说两句

GUI控制器在Three.js开发中真的太重要了。

它Neng让你快速调试，快速出效果。

别再手动改代码刷新了累不累啊？

赶紧用起来效率翻倍！

说实话，我以前就是个手动改参数的憨憨，自从用了GUI，感觉人生dou轻松了。

你还不来试试？

---