Three.js学习7：dat.GUI 参数控制

news2024/11/27 22:42:56

每个学 Three.js 的都被安利了 dat.GUI 吧？

我也不例外！

今天就来了学习下 dat.GUI，并记录下来自己的学习成果。

一、什么是 dat.GUI?

dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。

官网：https://github.com/dataarts/dat.gui

国内地址：GitCode - 开发者的代码家园

Three.js 每个官方的案例都有这个面板，用于参数调试。

二、引入方式

从官网下载 dat.gui-master.zip，解压后，在 build 目录看到相关文件，用的就是它们。

1. script 标签方式

<script src="js/gui/dat.gui.min.js"></script>
<script>
  const gui = new dat.GUI();
</script>

2. npm 安装

$ npm install --save dat.gui
// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

三、创建 GUI 对象

const gui = new dat.GUI();

此时，我们在页面就有了一个 GUI 面板，不过此刻面板里什么都没有。

四、参数控制

主要用到的方法是：

  • gui.add()

  • gui.addColor()

它们都会返回一个参数控制对象。

1. 数值参数控制

gui.add(object, attr, min, max, step);

添加某个参数的控制块。其参数含义：

  • object：必须。要控制的对象。

  • attr：必须。控制对象的某个参数。

  • min，max：数值的最小值和最大值。它们必须同时存在。可选。

  • step：步进。即拖动下，数据改变多少。可选。

let ctrl = gui.add(obj, attr);   // input 型，有一个输入框
let ctrl = gui.add(obj, attr, 1, 100);  // 拖动滑块型。最小，最大值
let ctrl = gui.add(obj, attr, 1, 100, 1);  // 拖动滑块型。最小，最大值，步进

或者
let ctrl = gui.add(obj, attr).min(1).max(100).step(1);

2. 颜色参数控制

gui.addColor( object, attr);

针对颜色的参数设置。

  • object：必须。要控制的对象。

  • attr：必须。控制对象的某个颜色型属性。

GUI提供了4种颜色值类型的控件（CSS、RGB、RGBA、Hue），四种类型均使用 gui.addColor()添加。

var palette = {
  color1: '#FF0000', // CSS string
  color2: [ 0, 128, 255 ], // RGB array
  color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
  color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
gui.addColor(palette, 'color1');
gui.addColor(palette, 'color2');
gui.addColor(palette, 'color3');
gui.addColor(palette, 'color4');

 

3.下拉框参数控制

下拉框控件既可以是数字类型，也可以是字符串类型，它们都是通过 gui.add() 方法进行配置。

gui.add(object, attr, array/object );

  • object：必须。要控制的对象。

  • attr：必须。控制对象的某个属性。

  • array: 字符串类型配置； object:数字类型配置。

 gui.add( obj, "addr", ["北京","上海","天津"] );

gui.add( obj, "speed", {
     "fast":1,
     "normal":2,
     "slow":3
} );

4. 单选框参数控制

首先，要保证对应的属性值为 true/false 布尔值。利用 gui.add() 方法，自然会形成单选框。

gui.add(object, attr)

  • object：必须。要控制的对象。

  • attr：必须。控制对象的某个属性。其值必须为布尔值。

gui.add(obj, "isCenter");

 

5. 添加/删除菜单文件夹

// 添加文件夹
let f = gui.addFolder( folderName )
// 给文件夹添加参数控制
f.addColor( obj, attr )
// 删除文件夹
gui.removeFolder(f)

 例如：

let obj = {
    "fontSize": 30,
    "color" : "#ff0000",
    "isCenter": true,
    "addr":"北京",
    "speed": 1
}
// 创建 GUI 面板。
const gui = new dat.GUI();
// 创建文件夹
let f = gui.addFolder("文字设置");
f.add(obj, "fontSize", 1, 100, 1);
f.addColor(obj, "color");
f.open();
let f2 = gui.addFolder("其他");
f2.add(obj, "addr", ["北京","上海","天津"]);
f2.add(obj, "isCenter");

6. 事件

修改参数后，能执行什么操作？

对于面板中的每一个控制项，可以设置 onChange 和 onFinishChange 监听事件。

  • onChange：控制项值改变时响应，比如拖动滑块过程中。

  • onFinishChange：控制项值改变完毕后相应。

注意：这两个事件本质是 gui 定义的对象方法，不能通过 addEventListener 添加。

f.add(obj, "fontSize", 1, 100, 1);
f.onChange(function(value){     // value 就是改变后的值
    console.log("onChange:" + value)
});
f.onFinishChange(function(value){     // value 就是改变后的值
    console.log("onFinishChange:" + value)
});

// 也可以直接链式操作。
f.add(obj, "fontSize", 1, 100, 1).onChange(function(value){     // value 就是改变后的值
    console.log("onChange:" + value)
});

五、其他功能

1. 折叠,展开,隐藏,显示

gui.close();  // gui折叠
f.close();    // 文件夹折叠

gui.open();  // gui展开
f.open();    // 文件夹展开

gui.hide();  // 隐藏
f.hide();

gui.show();  // 显示
f.show();

2. 获取设置值

ctrl.getValue() 
ctrl.setValue(newValue)
const one=gui.add(options, 'color5');
one.setValue('333')
console.log(one.getValue());//333

3. 刷新控制器

刷新此控制器的视图显示,以便与对象的当前值保持同步。

const options = {
    color5: 'xxxx',
    speed: 40,
    types: 'two'
};
const gui = new dat.GUI();
let num = gui.add(options, 'speed', 10, 20, .1);
options.speed=12
// 比如直接修改对象,然后更新
gui.updateDisplay()

六、示例：用 GUI 控制某个标签的样式

要利用 GUI 控制某个标签的样式。

<h1 id="box">你好，这是 GUI 测试示例。</h1>

<script src="js/gui/dat.gui.js"></script>
<script>
let box = document.getElementById("box");
// 要修改参数的对象。
let obj = {
    "fontSize": 30,
    "color" : "#ff0000",
    "isCenter": true
}
// 修改 h1 样式
box.style.cssText = `
    font-size:30px;
    color:#ff0000;
    text-align:center;
`;
</script>

添加 GUI 代码：

// 创建 GUI 面板。利用 GUI 修改 h1 样式。
const gui = new dat.GUI();
// 创建文件夹
let f = gui.addFolder("文字设置");
let ctrl1 = f.add(obj, "fontSize", 1, 100, 1);
ctrl1.onChange(function(value){
    box.style.fontSize = value +"px"
});
f.addColor(obj, "color").onFinishChange(function(value){
    box.style.color = value ;
});
f.open();  // 默认第一个文件夹打开
// 创建文件夹2
let f2 = gui.addFolder("其他");
f2.add(obj, "addr", ["北京","上海","天津"]);
f2.add(obj, "isCenter").onFinishChange(function(value){
    if(value){
        box.style.textAlign = "center";
    }else{
        box.style.textAlign = "left";
    }
});

七、示例：跟 Three.js 结合

构建一个立方体，利用 dat.gui 控制网格的大小和格子数量；控制立方体的颜色和缩放。

html：

<script type="importmap">
    {
        "imports":{
            "three":"./js/three.module.min.js",
            "three/addons/":"./js/jsm/",
            "dat":"./js/gui/dat.gui.module.js"
        }
    }
</script>
<script type="module" src="./js/myjs6.js"></script>

 JS：

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import * as dat from 'dat';

// 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color("#cccccc");

// 网格辅助器
let gridSize = 10;
let gridDivs = 10;
let gridHelper = new THREE.GridHelper(gridSize,gridDivs);
scene.add( gridHelper ); 

// 相机
let winH = window.innerHeight;
let winW = window.innerWidth;
const camera = new THREE.PerspectiveCamera(50, winW/winH, 1, 1000 );
camera.position.set(5,5,5);
camera.lookAt( scene.position );
scene.add(camera);

// 物体
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({
    color:"#ff3300"
});
const box = new THREE.Mesh( geometry, material );
scene.add( box );

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(winW, winH);
renderer.render( scene, camera );
document.body.appendChild( renderer.domElement );

// 4. 渲染：不停的渲染
function animation() {
    renderer.render(scene, camera)
    requestAnimationFrame(animation)
  }
animation()

添加 dat.gui 控制：

// gui 控制
const params = {
    gridParam:{
        size: 10,
        divsitions:10
    },
    boxParam:{
        color:"#ff3300"
    }
}
const gui = new dat.GUI();
// 网格控制
const folderGrid = gui.addFolder("网格控制");
folderGrid.add( params.gridParam, "size",10,100 ).onChange(function(value){
    scene.remove( gridHelper );  // 删除原有的网格
    // 添加新的网格
    gridSize = value;
    gridHelper = new THREE.GridHelper(gridSize,gridDivs);
    scene.add( gridHelper ); 
    renderer.render( scene, camera );
});
folderGrid.add( params.gridParam, "divsitions",5,100 ).onChange(function(value){
    scene.remove( gridHelper );  // 删除原有的网格
    // 添加新的网格
    gridDivs = value;
    gridHelper = new THREE.GridHelper(gridSize,gridDivs);
    scene.add( gridHelper ); 
    renderer.render( scene, camera );
});
folderGrid.open();
// box控制
const folderBox = gui.addFolder("立方体控制");
folderBox.add( box.scale,"x",1,10);
folderBox.add( box.scale,"y",1,10);
folderBox.add( box.scale,"z",1,10);
folderBox.addColor( params.boxParam,"color").onChange(function(value){
    material.color.set(value);
});
folderBox.open();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1448539.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Zigbee课程设计系列文章】Zigbee开发环境搭建

【Zigbee课程设计系列文章】Zigbee开发环境搭建

【Zigbee课程设计系列文章】Zigbee开发环境搭建 前言IAR 下载安装Z-Stack协议栈安装 &#x1f38a;项目专栏&#xff1a;【Zigbee课程设计系列文章】&#xff08;附详细使用教程完整代码原理图完整课设报告&#xff09; 前言 &#x1f451;由于无线传感器网络&#xff08;也即…
阅读更多...
C++提高编程（黑马笔记）

C++提高编程（黑马笔记）

C提高编程 模版 特点&#xff1a; 只是一个框架&#xff0c;不可以直接使用通用并不是万能的 泛型主要利用模版 函数模版 语法&#xff1a; template<typename T> 函数# include<iostream> using namespace std;template<typename T> void MySwap(T&a…
阅读更多...
unity 点击事件

unity 点击事件

目录 点击按钮&#xff0c;显示图片功能教程 第1步添加ui button&#xff0c;添加ui RawImage 第2步 添加脚本&#xff1a; 第3步&#xff0c;把脚本拖拽到button&#xff0c;点击button&#xff0c;设置脚本的变量&#xff0c; GameObject添加 Component组件 点击按钮&am…
阅读更多...
Vue学习笔记（三）常用指令、生命周期

Vue学习笔记（三）常用指令、生命周期

Vue学习笔记&#xff08;三&#xff09;常用指令 vue指令&#xff1a;html标签上带有 v- 前缀的特殊属性&#xff0c;不同的指令具有不同的含义&#xff0c;可以实现不同的功能。 常用指令&#xff1a; 指令作用v-for列表渲染&#xff0c;遍历容器的元素或者对象的属性v-bind…
阅读更多...
例39：使用List控件

例39：使用List控件

建立一个EXE工程&#xff0c;在窗体上放一个文本框&#xff0c;一个列表框和三个按钮输入如下的代码&#xff1a; Sub Form1_Command1_BN_Clicked(hWndForm As hWnd, hWndControl As hWnd)List1.AddItem(Text1.Text)End SubSub Form1_Command2_BN_Clicked(hWndForm As hWnd, h…
阅读更多...
【数据结构】链表OJ面试题5《链表的深度拷贝》(题库+解析)

【数据结构】链表OJ面试题5《链表的深度拷贝》(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 给定一个链表&#xff0c;判断链表中是否有环。http://t.csdnimg.cn/Rcdyc 给定一个链表&#xff0c;返回链表开始入环的第一个结点。 如果链表无环&#xff0c;则返回 NULLhttp://t.cs…
阅读更多...
电路设计（17）——乒乓球竞赛计分仪的proteus仿真

电路设计（17）——乒乓球竞赛计分仪的proteus仿真

1.设计要求 设计、制作一台包括有“抛币选边”&#xff1b;“热身定时”&#xff1b;竞赛计分等电路的乒乓球竞赛计分仪&#xff0c;要求在同一块万能板上完成制作。 乒乓球开赛前&#xff0c;裁判员会叫双方有关运动员到身边商定采用抛硬币办法选边&#xff08;或选先发球&…
阅读更多...
【开源】SpringBoot框架开发食品生产管理系统

【开源】SpringBoot框架开发食品生产管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…
阅读更多...
【Web】NSSCTF Round#18 Basic个人wp(部分)

【Web】NSSCTF Round#18 Basic个人wp(部分)

目录 ①门酱想玩什么呢&#xff1f; ②Becomeroot ①门酱想玩什么呢&#xff1f; 先试一下随便给个链接 不能访问远程链接&#xff0c;结合评论区功能&#xff0c;不难联想到xss&#xff0c;只要给个评论区链接让门酱访问就可 我们研究下评论区 从评论区知道&#xff0c;要…
阅读更多...
【JavaEE】----SpringBoot的创建和使用

【JavaEE】----SpringBoot的创建和使用

目录 1.Spring与SpringBoot的区别&#xff08;面试&#xff09; 2. SpringBoot的创建 3.SpringBoot创建时的问题及解决 4.SpringBoot的目录学习 5.创建一个SpringBoot 项目并且启动 1.Spring与SpringBoot的区别&#xff08;面试&#xff09; Spring 的诞⽣是为了简化 Java 程…
阅读更多...
【一周年】我的创作纪念日

【一周年】我的创作纪念日

今天&#xff0c;是我成为创作者的第366天&#xff0c;不知不觉&#xff0c;来CSDN已经一年啦~ 在这个特殊的日子&#xff0c;也给大家讲讲我的创作故事。 一、机缘 起初&#xff0c;刚认识CSDN时&#xff0c;我的高中生涯刚结束&#xff0c;顺利从一名懵懂的高中生变身为一名懵…
阅读更多...
JavaScript中的常见算法

JavaScript中的常见算法

一.排序算法 1.冒泡排序 冒泡排序比较所有相邻的两个项&#xff0c;如果第一个比第二个大&#xff0c;则交换它们。元素项向上移动至 正确的顺序&#xff0c;就好像气泡升至表面一样。 function bubbleSort(arr) {const { length } arrfor (let i 0; i < length - 1; i)…
阅读更多...
C语言—数组一维(含冒泡排序)

C语言—数组一维(含冒泡排序)

1.用数组存储10个整型数&#xff0c;通过键盘输入一个数&#xff0c;找出该数在数组中的下标值&#xff1b; /*1.用数组存储10个整型数&#xff0c;通过键盘输入一个数&#xff0c;找出该数在数组中的下标值&#xff1b;*/#include <stdio.h>int main(void) {int nums[…
阅读更多...
静态时序分析：SDC约束命令set_clock_uncertainty

静态时序分析：SDC约束命令set_clock_uncertainty

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 set_clock_uncertainty是用来指定设计中时钟周期的不确定性&#xff0c;不确定性指的是对那些会对时钟周期造成的负面影响。这些不确定性可能来源于时钟抖动(clo…
阅读更多...
mysql8.0.36主从复制(读写分离)配置教程

mysql8.0.36主从复制(读写分离)配置教程

1、关闭防火墙 使用命令行关闭防火墙 在Ubuntu系统中&#xff0c;可以使用以下命令关闭防火墙&#xff1a; sudo ufw disable执行该命令后&#xff0c;系统会提示是否要关闭防火墙&#xff0c;确认后即可关闭防火墙。 查看防火墙状态 使用以下命令可以查看防火墙当前的状…
阅读更多...
代码随想录Day50 | 70. 爬楼梯 322. 零钱兑换 279.完全平方数

代码随想录Day50 | 70. 爬楼梯 322. 零钱兑换 279.完全平方数

代码随想录Day50 | 70. 爬楼梯 322. 零钱兑换 279.完全平方数 70.爬楼梯322.零钱兑换279.完全平方数 70.爬楼梯 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 状态 dp数组 dp[j]表示爬上第j阶台阶需要的方法数递推公式&#xff0c;由于在每一阶台阶可以向上走1~m阶&a…
阅读更多...
AGV|RGV基本概念及导航分类与差异

AGV|RGV基本概念及导航分类与差异

AGV是自动导引运输车&#xff0c;装备采用电磁或光学等自动导引装置&#xff0c;能够沿规定的导引路径行驶&#xff0c;具有安全保护以及各种移载功能的运输车。其导航方式主要分磁条|磁钉导航、激光导航、激光反光板、激光自然导航、二维码导航、惯性导航等方式&#xff0c;广…
阅读更多...
Java学习手册——第七篇基础语法

Java学习手册——第七篇基础语法

Java学习手册——第七篇基础语法 1. 注释2. 顺序语句3. 条件语句3.1 if语句3.2 switch语句 4. 循环语句4.1 for循环4.2 while 语句4.3 do...while语句 本篇为大家快速入门Java基础语法&#xff0c;了解一个语言的基础语法是必要的&#xff0c; 因为我们后期都是需要用这些基础语…
阅读更多...
Kafka(三)（集成SpringBoot）

Kafka(三)（集成SpringBoot）

第三章 Kafka集成 SpringBoot SpringBoot 是一个在 JavaEE 开发中非常常用的组件。可以用于 Kafka 的生产者&#xff0c;也可以 用于 SpringBoot 的消费者。 在初始化springboot环境的时候要勾选kafka依赖 <dependency><groupId>org.springframework.kafka</gr…
阅读更多...
【基础】第K大与第K小数

【基础】第K大与第K小数

说明 给定一个长度为N(0< n< 10000)的序列&#xff0c;保证每一个序列中的数字a[i]是正整数 &#xff0c;编程要求求出整个序列中第k大的数字减去第k小的数字的值m&#xff0c;并判断m是否为质数。(0< k< n) 输入数据 第一行为2个数n&#xff0c;k&#xff08;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023