【Threejs学习】Dat.GUI 辅助调参工具

最新推荐文章于 2024-09-13 22:14:26 发布
最新推荐文章于 2024-09-13 22:14:26 发布
阅读量457 收藏 6
点赞数 3
分类专栏： 前端学习笔记 文章标签： 学习 前端 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cpsxn/article/details/141646332
版权

一、介绍

dat.GUI 辅助调参工具，是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。
image.png
github地址： https://github.com/dataarts/dat.gui

二、使用

1.使用cdn引入

cdnjs.com ——> dat.gui 复制地址
image.png

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 引入dat.gui,对外全局暴露dat变量 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
  <script>
  // 1.创建控制对象: 定义能够配置的各种属性
  const controlData = {
    rotationSpeed: 0.01, // 物体的旋转速度
    color: '#66ccff', // 物体的颜色
    wireframe: false, // 是否显示线框
    envMap: '无', // 材质选项
    visible: true, // 是否显示物体
    opacity: 1, // 物体透明度
  }
  // 2.创建dat实例
  const gui = new dat.GUI();
  // 3.创建类目
  const folder = gui.addFolder('配置')
  // 添加旋转速度：folder.add(控制对象, 属性名key, 最小值, 最大值, 步长)
  folder.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01) // 添加旋转速度, 写法二：folder.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01)
  // 添加颜色
  folder.addColor(controlData, "color")
  // 添加下拉列表
  folder.add(controlData, "envMap", ['无', '全反射', '漫反射'])
  // 添加选择框
  folder.add(controlData, "wireframe")
  // 打开类目
  folder.open() 

  </script>
  
</body>
</html>

image.png

2.方法

2.1 数值参数控制

folder.add(object, attr, min, max, step)
写法一：
folder.add(控制对象, 属性名key, 最小值, 最大值, 步长)

folder.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01)

写法二：
folder.add(控制对象, “属性名key”).min(最小值).max(最大值).step(步长)

folder.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01)
2.2 颜色参数控制

folder.addColor(object, attr)

folder.addColor(controlData, "color1")
2.3 下拉框参数控制

folder.add(object, attr, array/object)

folder.add(controlData, "envMap", ['无', '全反射', '漫反射'])
folder.add(controlData, "speed", { 'fast': 1, 'normal': 2 })
2.5 单选框参数控制

folder.add(object, attr)

folder.add(controlData, "wireframe")
……（查看文档）

3.结合项目使用

3.1 下载

npm install --save dat.gui

3.2 代码示例
<!-- dat.GUI -->
<template>
  <div id="guiContainer" ref="datGuiRef"></div>
</template>

<script setup lang="ts">
// 引入 dat.gui
import dat from 'dat.gui'
import { onMounted, ref, reactive, onUpdated } from 'vue'

const datGuiRef = ref()
// 创建控制对象
const controlData = reactive({
  rotationSpeed: 0.01, // 物体的旋转速度
  color: '#66ccff', // 物体的颜色
  wireframe: false, // 是否显示线框
  envMap: '无', // 材质选项
  visible: true, // 是否显示物体
  opacity: 3, // 物体透明度
})
// 创建实例
const gui = new dat.GUI({
  name: 'my gui',
  autoPlace: false,
})
gui.width = 300
gui.name = 'test'
const folder = gui.addFolder('几何体配置')
// 添加旋转速度：folder.add(控制对象, 属性名key, 最小值, 最大值, 步长)
folder.add(controlData, 'rotationSpeed', 0.01, 0.1, 0.02) // 添加旋转速度, 写法二：folder.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01)
// 添加颜色
folder.addColor(controlData, 'color')
// 添加下拉列表
folder.add(controlData, 'envMap', ['无', '全反射', '漫反射'])
// 添加选择框
folder.add(controlData, 'wireframe')
// 打开类目
folder.open()
const folder2 = gui.addFolder('其他配置')
folder2.add(controlData, 'visible')
folder2.open()
// dat.gui 位置
gui.domElement.style = 'position: absolute; top: 0; right: 0'

/* 
// 鼠标按下事件
gui.domElement.onmousedown = function (e) {
  const left = e.clientX - gui.domElement.offsetLeft
  const top = e.clientY - gui.domElement.offsetTop
  if (e.target.className === 'title') {
    document.onmousemove = function (event) {
      event = event || window.event
      if (event.offsetX < 0 || event.offsetY < 0) return
      gui.domElement.style.left = event.clientX - left + 'px'
      gui.domElement.style.top = event.clientY - top + 'px'
    }
  }
  // 鼠标抬起
  document.onmouseup = function () {
    document.onmousemove = null
    document.onmouseup = null
  }
  // e.preventDefault()
} */
onMounted(() => {
  document.getElementById('guiContainer')?.appendChild(gui.domElement)
})

defineExpose({
  controlData,
})
</script>
<style>
/* 颜色高度 */
.dg .c input[type='text'] {
  height: 100%;
}
/* 下拉选择字体 */
.dg .c select {
  color: #000000;
}
</style>

image.png

3.3 响应式添加dat.gui

在 onMounted 中添加dat.gui, 将vue中创建的dom实例与dat.gui绑定的实例进行关联

  // 将gui添加到页面中
  document.getElementById('container').appendChild(folder.domElement)
3.4 修改样式

设置了 f.domElement.id = “gui”，在style中添加样式

<style>
#gui {
  position: absolute;
  right: 0;
  width: 300px;
}
</style>
3.5 与threejs关联

image.png

Mae_cpski
关注
专栏目录
threejs中dat.gui的使用详细介绍
weixin_40856652的博客
06-15 3030
threejs中dat.gui的使用详细介绍
threeJS中dat.gui的使用显示文件夹点击时候及调色器
周家大小姐
07-17 908
dat.gui的使用(能快速调节变量不至于每次靠打印,安装dat.gui后可以直接在界面上快速修改变量得到值)main.js中引入(或你自己的需求要的页面)如给几何体cube调节position位置。
Three.js学习7：dat.GUI 参数控制
九天翔龙的技术博客
02-07 2547
dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。Three.js 每个官方的案例都有这个面板，用于参数调试。
threejs的dat.gui辅助工具的使用
小菜鸟的博客
09-10 381
【代码】threejs的dat.gui辅助工具的使用。
dat.gui 项目安装和配置指南
最新发布
gitblog_07014的博客
09-13 301
dat.gui 项目安装和配置指南 dat.gui Lightweight controller library for JavaScript. 项目地址: https://gitcode.com/gh_mirrors/da/da...
three.js dat.GUI介绍
helloyangkl的博客
02-10 1538
three.js dat.GUI介绍
threejs场景添加dat.GUI库控制场景
m0_51495354的博客
08-22 729
threejs场景添加dat.GUI控件控制场景，进行实时调试和参数调整
three.js调试工具dat.gui使用
宏斌的博客
08-05 1120
在three.js 观察物体变化不如网页方便 往往一次不能达到我们想要的位置 需要微调 而每次加载模型还需要一些时间 调试的时间就被加长了 相应的three.js的作者写了这个调试工具 方便three.js中调试。github仓库API文档安装 or 导出 创建一个实例 我更喜欢这样使用 总之选择你喜欢的方式创建一个gui实例开启调试吧🎉gui的工作方式传入一个对象，对象中的键的值的类型决定调试工具的形式 比如 值是一个boolean值 对应的调试工具就展现一个复选框 该展现值的状态 如果 值是一个函数.
three.js中 界面控制器 dat.gui 使用
weixin_45730243的博客
02-04 605
three.js中 使用界面控制器 dat.gui
【threejs】使用dat.GUI控制模型
hzqzzz的博客
03-19 537
【代码】【threejs】使用dat.GUI控制模型。
Three.js使用dat.GUI让调试更简单
kfyzjd2008的博客
02-18 2136
首先我们来介绍一下这个库，它能够以界面形式让你操控threejs中的数值，让调试运行效果一目了然。 第一步引入这个库 &lt;script src="../js/dat.gui.min.js"&gt;&lt;/script&gt; 第二步就是创建对象了： // 创建datGUI对象 var datGui = new dat.GUI(); 先给大家看一段核心代码...
dat.gui.js for threejs
04-16
dat.gui.js for threejs
dat GUI
07-16
一个简单的javascript库，可以在网页界面上做一些简单的控制组件
DAT.GUI.min.js
12-19
DAT.GUI.min.js
Three.js 快速入门教程 06 - 辅助工具
最佳编码阿柚的博客
05-16 429
Three.js 内置了大量的辅助工具（Helper），它是一组用于辅助调试、调整和可视化场景中元素的工具。这些工具可用于展示、标记和操控场景中的对象、灯光、相机等，以帮助开发者更好地理解和调试场景。同时可以选择 stats.js 和 dat.gui 这样的第三方库，为 Three.js 开发提供辅助能力。
vue-three.js使用解析知识点
weixin_41993525的博客
12-03 945
three.js库 three.js是JavaScript实现webGl-3D的一个第三方库。具体信息不多扯。 官网：https://threejs.org/ 中文网：http://www.webgl3d.cn/ vue中使用three.js库 ####### 安装 npm install three --save 组件内引入 import * as Three from 'three'; 代码示例 <template> <div> <div id="c
16 Three.js使用dat.GUI简化试验流程
热门推荐
现在学习也不晚
07-31 1万+
简介使用这个插件的最省事的地方在于，调试很方便的调节相关的值，从而影响最后绘制的结果。而dat.GUI实现的东西也很简单，理解起来也很好理解。案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/18.html我们实例化dat.GUI对象后，会在右上角显示出一些可以调节的参数，比如：这就是今天的案例制作出来的五个可以调节的属性。而且实现起来也很简单...
【three.js学习笔记】04 dat.gui 组件使用
角角兔的博客
05-05 2434
dat.gui组件使用 dat gui组件可以方便地改变某些值，并快速预览这些值的改变所产生的变化 远程调用： https://threejs.org/examples/js/libs/dat.gui.min.js 在加入这个script之后 对这个进行初始化，这样我们才能知道需要更改哪些变量: //创建一个需要进行改变的控制变量对象 var guiControl = new fun...
threejs视频教程学习（3）：应用图形用户界面更改变量 （dat.gui的简单使用）
weixin_41897680的博客
10-26 438
threejs视频教程学习（3）：应用图形用户界面更改变量 （dat.gui的简单使用）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值