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

每个学 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();

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

文章目录 1.进程的三种基本状态2.Linux中进程状态查看2.1.进程检测脚本2.2.各种状态查看 3.孤儿进程4.前台、后台、守护进程 1.进程的三种基本状态 进程的在系统当中是走走停停的&#xff0c;「运行 - 暂停 - 运行」的活动规律&#xff1b;进程在活动期间的三种状态&#xff1…
阅读更多...
还得是它！GPT4.0和MJ都搞定了！SD也快了！

还得是它！GPT4.0和MJ都搞定了！SD也快了！

之前给大家分享过一个国内的AI镜像平台——葫芦AI&#xff0c;目前接入了Midjourney和DALL3、GPT4.0和文心一言4.0。 前几天夜里1点多这个葫芦AI台平‬升级了GPT4接口和资料库&#xff0c;立试马‬用了‬一下&#xff0c;很‬不错。接口‬能力和官‬方差‬不多。后面能把Gpts和…
阅读更多...
新增C++max函数的使用

新增C++max函数的使用

在 C 中&#xff0c;max函数是标准库中的一个函数&#xff0c;用于返回两个或多个元素中的最大值。max函数的声明如下&#xff1a; cpp #include <algorithm>template<class T> const T& max(const T& a, const T& b);这个函数接受两个同类型的参数a…
阅读更多...
部署一个在线OCR工具

部署一个在线OCR工具

效果 安装 1.拉取镜像 # 从 dockerhub pull docker pull mmmz/trwebocr:latest 2.运行容器 # 运行镜像 docker run -itd --rm -p 10058:8089 --name trwebocr mmmz/trwebocr:latest 使用 打开浏览器输入 http://192.168.168.110:10058/ 愉快滴使用吧
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的贫困地区人口信息管理系统

【开源】基于JAVA+Vue+SpringBoot的贫困地区人口信息管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 人口信息管理模块2.2 精准扶贫管理模块2.3 特殊群体管理模块2.4 案件信息管理模块2.5 物资补助模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 人口表3.2.2 扶贫表3.2.3 特殊群体表3.2.4 案件表3.2.5 物资补助表 四…
阅读更多...
肯尼斯·里科《C和指针》第12章 使用结构和指针（2）双链表

肯尼斯·里科《C和指针》第12章 使用结构和指针（2）双链表

12.3 双链表 单链表的替代方案就是双链表。在一个双链表中&#xff0c;每个节点都包含两个指针——指向前一个节点的指针和指向后一个节点的指针。这可以使我们以任何方向遍历双链表&#xff0c;甚至可以随意在双链表中访问。下面的图展示了一个双链表。 下面是节点类型的声明&…
阅读更多...
为什么大模型需要向量数据库？

为什么大模型需要向量数据库？

AIGC 时代万物都可以向量化&#xff0c;向量化是 LLM 大模型以及 Agent 应用的基础。 比如&#xff1a;爆火的 Google 大模型 Gemini 1.0 原生支持的多模态&#xff0c;在预训练的时候就是把文本、图片、音频、视频等多模态先进行 token 化&#xff0c;然后构建一维的“语言”…
阅读更多...
Powershell Install 一键部署Openssl+certificate证书创建

Powershell Install 一键部署Openssl+certificate证书创建

前言 Openssl 是一个方便的实用程序，用于创建自签名证书。您可以在所有操作系统（如 Windows、MAC 和 Linux 版本）上使用 OpenSSL。 Windows openssl 下载 前提条件 开启wmi,配置网卡，参考 自签名证书 创建我们自己的根 CA 证书和 CA 私钥（我们自己充当 CA）创建服务器…
阅读更多...
数据结构第九天（堆排序）

数据结构第九天（堆排序）

目录 前言 概述 源码&#xff1a; 主函数&#xff1a; 运行结果&#xff1a; 其他 前言 哈哈&#xff0c;这个堆排序算法很久之前就已经敲过一遍了&#xff0c;时间一久&#xff0c;思路有点淡忘。今天重新看过一遍之后&#xff0c;又亲自撸代码&#xff0c;幸运的是&am…
阅读更多...
【RL】Bellman Equation （贝尔曼等式）

【RL】Bellman Equation （贝尔曼等式）

Lecture2: Bellman Equation State value 考虑grid-world的单步过程&#xff1a; S t → A t R t 1 , S t 1 S_t \xrightarrow[]{A_t} R_{t 1}, S_{t 1} St​At​ ​Rt1​,St1​ t t t, t 1 t 1 t1&#xff1a;时间戳 S t S_t St​&#xff1a;时间 t t t时所处的sta…
阅读更多...
C++ | vector二维数组的初始化与行、列数的获取

C++ | vector二维数组的初始化与行、列数的获取

如果直接使用vector<int,vector<int> > v;创建二维数组&#xff0c;那么就会得到一个空的容器&#xff0c;这样再通过push_back赋值是非常麻烦的。 初始化二维数组 在此介绍二维数组初始化的一般操作。 首先看一维数组的初始化示例&#xff1a; 定义一个长度为n&a…
阅读更多...
拿捏循环链表

拿捏循环链表

目录&#xff1a; 一&#xff1a;单链表&#xff08;不带头单向不循环&#xff09;与循环链表&#xff08;带头双向循环&#xff09;区别 二&#xff1a;循环链表初始化 三&#xff1a;循环链表头插 四&#xff1a;循环链表尾插 五&#xff1a;循环链表头删 六&#xff1…
阅读更多...
MessageBox好用吗？

MessageBox好用吗？

MessageBox作为一种能够对接多系统平台的工具&#xff0c;在数字营销领域具有很大的实用性和价值。它提供了实时的数据同步、个性化的营销策略、用户互动功能等多种功能&#xff0c;可以帮助企业实现更精准、高效的营销活动。具体来说&#xff0c;MessageBox的优点包括&#xf…
阅读更多...
Laykefu客服系统后台登录绕过

Laykefu客服系统后台登录绕过

【产品介绍】 Laykefu 是一款基于workermangatawayworkerthinkphp5搭建的全功能webim客服系统&#xff0c;旨在帮助企业有效管理和提供优质的客户服务 【漏洞介绍】 请求头中Cookie中的”user_name“不为空时即可绕过登录系统后台&#xff0c;恶意攻击者可利用此漏洞获得后台…
阅读更多...
基于摄像头的虹膜识别技术

基于摄像头的虹膜识别技术

随着苹果公司的指纹识别TouchID的推广流行&#xff0c;三星等公司的积极跟进&#xff0c;生物识别技术正被移动设备厂商所重视。 虹膜是什么&#xff1f; 人的眼睛由巩膜、虹膜、瞳孔三部分构成。巩膜即眼球外围的白色部分&#xff0c;约占总面积的30%&#xff1b;眼睛中心为瞳…
阅读更多...
【React】如何使antd禁用状态的表单输入组件响应点击事件？

【React】如何使antd禁用状态的表单输入组件响应点击事件？

最近遇到一个需求&#xff0c;需要在<Input.textarea>组件中&#xff0c;设置属性disabled为true&#xff0c;使textarea响应点击事件&#xff0c;但直接绑定onClick并不会在禁用状态下被响应。 解决方法1 之后尝试了很多方法&#xff0c;比如设置csspointer-events:no…
阅读更多...
日本失去的三十年：去杠杆用了14年

日本失去的三十年：去杠杆用了14年

去年以来&#xff0c;日股在日本央行转鹰预期、基本面改善和一系列监管新规的催化下高歌猛进&#xff0c;日经指数已经逼近90年代资产泡沫时期的高位。今年迄今累计上涨8.51%&#xff0c;领跑全球&#xff0c;“失落的三十年”似乎已经远去。 日本因何走向衰退&#xff1f;“失…
阅读更多...
MPLS VPN功能组件(2)

MPLS VPN功能组件(2)

MP-BGP 采用地址族（Address Family）来区分不同的网络层协议，以便正确处理VPN-IPv4路由 传统的BGP-4（RFC1771）只能管理IPv4的路由信息，无法正确处理地址空间重叠的VPN的路由。 为了正确处理VPN路由，VPN使用RFC2858（Multiprotocol Extensions for BGP-4）中规定的MP-BG…
阅读更多...
云计算 - 弹性计算技术全解与实践

云计算 - 弹性计算技术全解与实践

一、引言 在过去的十年里&#xff0c;云计算从一个前沿概念发展为企业和开发者的必备工具。传统的计算模型通常局限于单一的、物理的位置和有限的资源&#xff0c;而云计算则通过分布式的资源和服务&#xff0c;为计算能力带来了前所未有的"弹性"。 弹性&#xff1a;…
阅读更多...
TryHackMe-Vulnerability Capstone练习

TryHackMe-Vulnerability Capstone练习

本文相关的TryHackMe实验房间链接&#xff1a;TryHackMe | Vulnerability Capstone 先nmap扫一下 接下来我们访问一下 接下来我们searchsploit找一下漏洞 searchsploit Fuel CMS 执行漏洞exp&#xff08;此处使用TryHackMe中的box&#xff09; 如果使用本地机需要下载exp&am…
阅读更多...
最新文章

Copyright @ 2022~2023