数据交互dat.gui使用记录

最新推荐文章于 2024-04-25 10:57:07 发布

方安乐

最新推荐文章于 2024-04-25 10:57:07 发布

阅读量377

点赞数 9

分类专栏：其他文章标签：交互 ui javascript

本文链接：https://blog.csdn.net/yangguangxiadewo/article/details/135457540

版权

其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先上图

它的使用方式是这样的

    <!-- 引入 -->
    <link rel="stylesheet" href="./gui/dat.gui.css">
    <script src="./gui/dat.gui.min.js"></script>
     <!-- 使用 -->
    <script>
        let obj = {color:'#00ffff', radius:100, direction:'up'};
        const gui = new dat.GUI();
        gui.add(params, "radius", 0, 500).step(10).onChange(function (value) {
            console.log(value);
        });
        gui.addColor(params, 'color').onChange(function (value) {
           console.log(value);
        });
        gui.add(params, 'direction', ['up','down']).onChange(function(value) {
           console.log(value);
        });
    </script>

npm安装使用

npm i dat.gui

案例文件访问地址：【免费】dat.gui数据交互js工具包，方便自己写demo，单页面开发使用，使用简单方便资源-CSDN文库