【Three.js】知识梳理十六：图形界面工具（GUI）

2024-06-13 11:36
文章标签 工具 js 知识 gui 梳理 十六 图形界面 three

本文主要是介绍【Three.js】知识梳理十六：图形界面工具（GUI），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在进行Three.js项目开发时，为了更好地调试和控制3D场景中的各种参数，图形用户界面工具（GUI）显得尤为重要。通过GUI工具，开发者可以在不修改代码的情况下实时调整参数，提高开发效率和灵活性。本文将介绍几种常用的Three.js GUI工具，并展示它们的基本用法。

image.png

在3D图形开发过程中，调整参数如光照强度、物体位置、材质属性等是一个频繁且必要的操作。通过GUI工具，开发者可以直观地调整这些参数，而不需要频繁修改代码和刷新页面。这不仅节省了时间，还能提高调试的精度。

常用GUI工具简介

dat.GUI

dat.GUI 是一个轻量级的JavaScript库，专为调试和参数调整设计。它提供了一个简洁的界面，可以快速集成到Three.js项目中。

GitHub - dataarts/dat.gui: Lightweight controller library for JavaScript.

ControlKit

ControlKit 是另一个功能强大的GUI工具。与dat.GUI相比，它提供了更多的控件和更美观的界面，适合需要复杂控制界面的项目。

GitHub - automat/controlkit.js: A lightweight controller and gui library

lil-gui

lil-gui 是一个现代化的GUI库，专注于性能和易用性。它的界面美观，控件丰富，适合大多数WebGL项目。

GitHub - georgealways/lil-gui: Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui in most projects.

dat.GUI

安装dat.GUI

可以通过npm或直接下载源码的方式来安装dat.GUI。推荐使用npm进行安装：

npm install dat.gui
基本用法
初始化dat.GUI

在Three.js项目中引入dat.GUI并进行初始化：

import * as THREE from 'three';
import { GUI } from 'dat.gui';
​
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
​
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 创建一个简单的立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
​
camera.position.z = 5;
​
// 初始化dat.GUI
const gui = new GUI();
const cubeFolder = gui.addFolder('Cube');
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2);
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2);
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2);
cubeFolder.add(cube.position, 'x', -5, 5);
cubeFolder.add(cube.position, 'y', -5, 5);
cubeFolder.add(cube.position, 'z', -5, 5);
cubeFolder.open();
​
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
​
animate();

在上述代码中，我们创建了一个简单的Three.js场景，并使用dat.GUI创建了一个控制面板来实时调整立方体的旋转和位置。

控制物体的旋转和位置

我们可以通过dat.GUI的add方法将需要调整的属性添加到控制面板中。例如，控制立方体的旋转和位置：

cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2);
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2);
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2);
cubeFolder.add(cube.position, 'x', -5, 5);
cubeFolder.add(cube.position, 'y', -5, 5);
cubeFolder.add(cube.position, 'z', -5, 5);
高级用法
调整材质属性

img

dat.GUI不仅可以控制物体的旋转和位置，还可以调整材质的属性，例如颜色和线框模式：

const materialFolder = gui.addFolder('Material');
const materialParams = {color: material.color.getHex(),wireframe: material.wireframe,
};
materialFolder.addColor(materialParams, 'color').onChange((value) => {material.color.set(value);
});
materialFolder.add(materialParams, 'wireframe').onChange((value) => {material.wireframe = value;
});
materialFolder.open();
添加自定义函数

img

dat.GUI允许我们添加自定义按钮来执行特定操作，例如重置场景：

const actions = {reset: () => {cube.position.set(0, 0, 0);cube.rotation.set(0, 0, 0);},
};
gui.add(actions, 'reset');
使用对象进行分组

img

dat.GUI支持将参数分组，这样可以更好地组织控制面板：

const params = {rotation: {x: cube.rotation.x,y: cube.rotation.y,z: cube.rotation.z,},position: {x: cube.position.x,y: cube.position.y,z: cube.position.z,}
};
​
const rotationFolder = gui.addFolder('Rotation');
rotationFolder.add(params.rotation, 'x', 0, Math.PI * 2).onChange((value) => {cube.rotation.x = value;
});
rotationFolder.add(params.rotation, 'y', 0, Math.PI * 2).onChange((value) => {cube.rotation.y = value;
});
rotationFolder.add(params.rotation, 'z', 0, Math.PI * 2).onChange((value) => {cube.rotation.z = value;
});
​
const positionFolder = gui.addFolder('Position');
positionFolder.add(params.position, 'x', -5, 5).onChange((value) => {cube.position.x = value;
});
positionFolder.add(params.position, 'y', -5, 5).onChange((value) => {cube.position.y = value;
});
positionFolder.add(params.position, 'z', -5, 5).onChange((value) => {cube.position.z = value;
});
使用dat.GUI管理复杂场景

对于复杂的Three.js场景，可以通过dat.GUI来管理多个物体和材质的参数。以下是一个更复杂的示例，展示如何使用dat.GUI管理多个物体：

const cube1 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0xff0000 }));
const cube2 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0x0000ff }));
​
scene.add(cube1);
scene.add(cube2);
​
const cubes = {cube1: {rotation: cube1.rotation,position: cube1.position,material: cube1.material},cube2: {rotation: cube2.rotation,position: cube2.position,material: cube2.material}
};
​
const cube1Folder = gui.addFolder('Cube 1');
cube1Folder.add(cubes.cube1.rotation, 'x', 0, Math.PI * 2);
cube1Folder.add(cubes.cube1.rotation, 'y', 0, Math.PI * 2);
cube1Folder.add(cubes.cube1.rotation, 'z', 0, Math.PI * 2);
cube1Folder.add(cubes.cube1.position, 'x', -5, 5);
cube1Folder.add(cubes.cube1.position, 'y', -5, 5);
cube1Folder.add(cubes.cube1.position, 'z', -5, 5);
​
const cube2Folder = gui.addFolder('Cube 2');
cube2Folder.add(cubes.cube2.rotation, 'x', 0, Math.PI * 2);
cube2Folder.add(cubes.cube2.rotation, 'y', 0, Math.PI * 2);
cube2Folder.add(cubes.cube2.rotation, 'z', 0, Math.PI * 2);
cube2Folder.add(cubes.cube2.position, 'x', -5, 5);
cube2Folder.add(cubes.cube2.position, 'y', -5, 5);
cube2Folder.add(cubes.cube2.position, 'z', -5, 5);

ControlKit

安装ControlKit

可以通过npm或直接下载源码的方式来安装ControlKit。推荐使用npm进行安装：

npm install controlkit
基本用法
初始化ControlKit

在Three.js项目中引入ControlKit并进行初始化：

import * as THREE from 'three';
import ControlKit from 'controlkit';
​
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
​
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 创建一个简单的立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
​
camera.position.z = 5;
​
// 初始化ControlKit
const controlKit = new ControlKit();
controlKit.addPanel({ label: 'Cube Controls' }).addGroup({ label: 'Rotation' }).addSlider(cube.rotation, 'x', { label: 'Rotation X', min: 0, max: Math.PI * 2, step: 0.01 }).addSlider(cube.rotation, 'y', { label: 'Rotation Y', min: 0, max: Math.PI * 2, step: 0.01 }).addSlider(cube.rotation, 'z', { label: 'Rotation Z', min: 0, max: Math.PI * 2, step: 0.01 }).addGroup({ label: 'Position' }).addSlider(cube.position, 'x', { label: 'Position X', min: -5, max: 5, step: 0.01 }).addSlider(cube.position, 'y', { label: 'Position Y', min: -5, max: 5, step: 0.01 }).addSlider(cube.position, 'z', { label: 'Position Z', min: -5, max: 5, step: 0.01 });
​
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
​
animate();

在上述代码中，我们创建了一个基本的Three.js场景，并使用ControlKit创建了一个控制面板来实时调整立方体的旋转和位置。

高级用法
动态调整材质属性

image.png

ControlKit可以调整物体的材质属性，例如颜色和线框模式：

const materialParams = {color: material.color.getHex(),wireframe: material.wireframe,
};
​
controlKit.addPanel({ label: 'Material Controls' }).addColor(materialParams, 'color', { label: 'Color' }).onChange((value) => {material.color.set(value);}).addCheckbox(materialParams, 'wireframe', { label: 'Wireframe' }).onChange((value) => {material.wireframe = value;});
添加自定义按钮

image.png

ControlKit允许我们添加自定义按钮来执行特定操作，例如重置场景：

const actions = {reset: () => {cube.position.set(0, 0, 0);cube.rotation.set(0, 0, 0);},
};
​
controlKit.addPanel({ label: 'Actions' }).addButton(actions, 'reset', { label: 'Reset Cube' });
使用对象进行分组

image.png

ControlKit支持将参数分组，这样可以更好地组织控制面板：

const params = {rotation: {x: cube.rotation.x,y: cube.rotation.y,z: cube.rotation.z,},position: {x: cube.position.x,y: cube.position.y,z: cube.position.z,}
};
​
const controlPanel = controlKit.addPanel({ label: 'Cube Controls' });
​
const rotationGroup = controlPanel.addGroup({ label: 'Rotation' });
rotationGroup.addSlider(params.rotation, 'x', { label: 'Rotation X', min: 0, max: Math.PI * 2, step: 0.01 }).onChange((value) => {cube.rotation.x = value;
});
rotationGroup.addSlider(params.rotation, 'y', { label: 'Rotation Y', min: 0, max: Math.PI * 2, step: 0.01 }).onChange((value) => {cube.rotation.y = value;
});
rotationGroup.addSlider(params.rotation, 'z', { label: 'Rotation Z', min: 0, max: Math.PI * 2, step: 0.01 }).onChange((value) => {cube.rotation.z = value;
});
​
const positionGroup = controlPanel.addGroup({ label: 'Position' });
positionGroup.addSlider(params.position, 'x', { label: 'Position X', min: -5, max: 5, step: 0.01 }).onChange((value) => {cube.position.x = value;
});
positionGroup.addSlider(params.position, 'y', { label: 'Position Y', min: -5, max: 5, step: 0.01 }).onChange((value) => {cube.position.y = value;
});
positionGroup.addSlider(params.position, 'z', { label: 'Position Z', min: -5, max: 5, step: 0.01 }).onChange((value) => {cube.position.z = value;
});
ControlKit的优势
  • 丰富的控件类型：除了基本的滑块和复选框外，ControlKit还提供了颜色选择器、按钮、折叠面板等多种控件，适用于各种复杂的场景。
  • 高度可定制的界面：ControlKit的界面高度可定制，开发者可以根据需求调整控件的布局和样式。
  • 事件处理：ControlKit支持事件处理，允许开发者在参数变化时执行特定操作，提高了界面的互动性。

lil-gui

安装lil-gui

可以通过npm或直接下载源码的方式来安装lil-gui。推荐使用npm进行安装：

npm install lil-gui
基本用法
初始化lil-gui

在Three.js项目中引入lil-gui并进行初始化：

import * as THREE from 'three';
import GUI from 'lil-gui';
​
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
​
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 创建一个简单的立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
​
camera.position.z = 5;
​
// 初始化lil-gui
const gui = new GUI();
const cubeFolder = gui.addFolder('Cube');
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2).name('Rotation X');
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2).name('Rotation Y');
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2).name('Rotation Z');
cubeFolder.add(cube.position, 'x', -5, 5).name('Position X');
cubeFolder.add(cube.position, 'y', -5, 5).name('Position Y');
cubeFolder.add(cube.position, 'z', -5, 5).name('Position Z');
cubeFolder.open();
​
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
​
animate();

在上述代码中，我们创建了一个基本的Three.js场景，并使用lil-gui创建了一个控制面板来实时调整立方体的旋转和位置。

控制物体的旋转和位置

我们可以通过lil-gui的add方法将需要调整的属性添加到控制面板中。例如，控制立方体的旋转和位置：

cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2).name('Rotation X');
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2).name('Rotation Y');
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2).name('Rotation Z');
cubeFolder.add(cube.position, 'x', -5, 5).name('Position X');
cubeFolder.add(cube.position, 'y', -5, 5).name('Position Y');
cubeFolder.add(cube.position, 'z', -5, 5).name('Position Z');
高级用法
动态调整材质属性

image.png

lil-gui可以调整物体的材质属性，例如颜色和线框模式：

const materialFolder = gui.addFolder('Material');
const materialParams = {color: material.color.getHex(),wireframe: material.wireframe,
};
​
materialFolder.addColor(materialParams, 'color').name('Color').onChange((value) => {material.color.set(value);
});
materialFolder.add(materialParams, 'wireframe').name('Wireframe').onChange((value) => {material.wireframe = value;
});
materialFolder.open();
添加自定义按钮

image.png

lil-gui允许我们添加自定义按钮来执行特定操作，例如重置场景：

const actions = {reset: () => {cube.position.set(0, 0, 0);cube.rotation.set(0, 0, 0);},
};
​
gui.add(actions, 'reset').name('Reset Cube');
使用对象进行分组

image.png

lil-gui支持将参数分组，这样可以更好地组织控制面板：

const params = {rotation: {x: cube.rotation.x,y: cube.rotation.y,z: cube.rotation.z,},position: {x: cube.position.x,y: cube.position.y,z: cube.position.z,}
};
​
const rotationFolder = gui.addFolder('Rotation');
rotationFolder.add(params.rotation, 'x', 0, Math.PI * 2).name('X').onChange((value) => {cube.rotation.x = value;
});
rotationFolder.add(params.rotation, 'y', 0, Math.PI * 2).name('Y').onChange((value) => {cube.rotation.y = value;
});
rotationFolder.add(params.rotation, 'z', 0, Math.PI * 2).name('Z').onChange((value) => {cube.rotation.z = value;
});
​
const positionFolder = gui.addFolder('Position');
positionFolder.add(params.position, 'x', -5, 5).name('X').onChange((value) => {cube.position.x = value;
});
positionFolder.add(params.position, 'y', -5, 5).name('Y').onChange((value) => {cube.position.y = value;
});
positionFolder.add(params.position, 'z', -5, 5).name('Z').onChange((value) => {cube.position.z = value;
});
lil-gui的优势
  • 现代化界面：lil-gui拥有现代化的用户界面，设计简洁美观，用户体验良好。
  • 高性能：lil-gui专注于性能优化，适用于复杂的WebGL项目。
  • 丰富的控件类型：提供了丰富的控件类型，包括滑块、颜色选择器、按钮、折叠面板等，能够满足各种需求。
  • 易用性：lil-gui的API设计简洁，易于上手和使用。

附送250套精选项目源码

源码截图

 源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接

这篇关于【Three.js】知识梳理十六：图形界面工具（GUI）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1057191。

相关文章

Three.js构建一个 3D 商品展示空间完整实战项目

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,：本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可
阅读更多...
Python实战之SEO优化自动化工具开发指南

Python实战之SEO优化自动化工具开发指南

《Python实战之SEO优化自动化工具开发指南》在数字化营销时代,搜索引擎优化（SEO）已成为网站获取流量的重要手段,本文将带您使用Python开发一套完整的SEO自动化工具,需要的可以了解下... 目录前言项目概述技术栈选择核心模块实现1. 关键词研究模块2. 网站技术seo检测模块3. 内容优化分析模
阅读更多...
Unity新手入门学习殿堂级知识详细讲解（图文）

Unity新手入门学习殿堂级知识详细讲解（图文）

《Unity新手入门学习殿堂级知识详细讲解（图文）》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程
阅读更多...
MySQL慢查询工具的使用小结

MySQL慢查询工具的使用小结

《MySQL慢查询工具的使用小结》使用MySQL的慢查询工具可以帮助开发者识别和优化性能不佳的SQL查询,本文就来介绍一下MySQL的慢查询工具,具有一定的参考价值,感兴趣的可以了解一下... 目录一、启用慢查询日志1.1 编辑mysql配置文件1.2 重启MySQL服务二、配置动态参数（可选）三、分析慢查
阅读更多...
基于Python实现进阶版PDF合并/拆分工具

基于Python实现进阶版PDF合并/拆分工具

《基于Python实现进阶版PDF合并/拆分工具》在数字化时代,PDF文件已成为日常工作和学习中不可或缺的一部分,本文将详细介绍一款简单易用的PDF工具,帮助用户轻松完成PDF文件的合并与拆分操作... 目录工具概述环境准备界面说明合并PDF文件拆分PDF文件高级技巧常见问题完整源代码总结在数字化时代，PD
阅读更多...
Python按照24个实用大方向精选的上千种工具库汇总整理

Python按照24个实用大方向精选的上千种工具库汇总整理

《Python按照24个实用大方向精选的上千种工具库汇总整理》本文整理了Python生态中近千个库,涵盖数据处理、图像处理、网络开发、Web框架、人工智能、科学计算、GUI工具、测试框架、环境管理等多... 目录1、数据处理文本处理特殊文本处理html/XML 解析文件处理配置文件处理文档相关日志管理日期和
阅读更多...
使用Python开发一个Ditto剪贴板数据导出工具

使用Python开发一个Ditto剪贴板数据导出工具

《使用Python开发一个Ditto剪贴板数据导出工具》在日常工作中,我们经常需要处理大量的剪贴板数据,下面将介绍如何使用Python的wxPython库开发一个图形化工具,实现从Ditto数据库中读... 目录前言运行结果项目需求分析技术选型核心功能实现1. Ditto数据库结构分析2. 数据库自动定位3
阅读更多...
PyQt5 GUI 开发的基础知识

PyQt5 GUI 开发的基础知识

《PyQt5GUI开发的基础知识》Qt是一个跨平台的C++图形用户界面开发框架,支持GUI和非GUI程序开发,本文介绍了使用PyQt5进行界面开发的基础知识,包括创建简单窗口、常用控件、窗口属性设... 目录简介第一个PyQt程序最常用的三个功能模块控件QPushButton（按钮）控件QLable（纯文本
阅读更多...
基于Python实现简易视频剪辑工具

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高
阅读更多...
基于Python开发一个图像水印批量添加工具

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计（扩展版本）二、核心算法深入解析2.1 自
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2