- 综合排序
- 最热优先
- 最新优先
- 来自专栏玩转JavaEE
使用dat.GUI实现参数快速调节
有，那就是dat.GUI，本文就来看看这个东西的使用。 是一个轻量级的、图形化的js变量修改库，凡是有变量修改的场景，都可以使用，本文我们通过dat.GUI库来动态的控制相机的位置等参数(实际上可以用其控制很多参数，本文以相机位置参数为例)。 dat.GUI通过一个控制面板来动态调节参数，面板类似如下这样： ? 好了，接下来我们来看看dat.GUI的使用步骤。 下载 使用dat.GUI，首先在GitHub上下载该开源库，下载地址如下： https://github.com/dataarts/dat.gui。 接下来，添加对这几个变量的监听，如下： var params = new FizzyText(); var gui = new dat.GUI(); gui.add(params, 'camerax',
2.6K40发布于 2019-03-07 - 来自专栏橙光笔记
Three.js教程（2）：工具篇
上一章我们基本上领略了three.js的魅力，这一章我们先不急着深入three.js，先学习2个非常有用的工具库，分别是stats.js和dat.gui，也许你没有听过两个库，但是很可能你见过他们。 dat.gui dat.gui是一个轻量级的JavaScript控制库，它可以很方便控制变量的值。 /node_modules/dat.gui/build/dat.gui.css"></link> <style> *{ margin: 0; padding: 0; /node_modules/dat.gui/build/dat.gui.min.js"></script> <script type="text/javascript"> var gui = dat.gui的使用 现在我们们在我们上个例子中引入dat.gui： + <link rel="stylesheet" href="..
1.6K31发布于 2020-10-19 - 来自专栏前端大合集
ThreeJs Demo 之创建星空效果
前言 使用threeJs + dat.GUI实现一个旋转星空的效果,效果如下: 完整代码可以去文章末尾直接拿去使用 大概步骤 引入库 初始化 Three.js 场景、相机和渲染器 设置 dat.GUI 控件 创建星星 将星星添加到场景中 动画循环 dat.GUI 控制更新 窗口调整事件 通过本文的学习, 你将会收获： 如何引入和使用 Three.js 和 dat.GUI 库 初始化并配置一个 3D -- 引入dat.GUI库 --> 2. 初始化 Three.js 场景、相机和渲染器 创建一个新的 Three.js 场景 scene。 创建一个 dat.GUI 对象，并创建GUI 控件对象以便后续更新 // dat.GUI配置 const starSettings = { color 定义 updateStars 函数，当用户通过 dat.GUI 修改设置时，更新星星。 从场景中移除旧的星星，创建新的星星，并将其添加到场景中。
1.3K10编辑于 2024-07-29 - 来自专栏大史住在大前端
【带着canvas去流浪（15）】threejs fundamentals翻译系列1-scene graph
我们将使用dat.GUI工具，它是一个非常流行的UI库，通常在three.js项目中使用。dat.GUI使用一个配置对象，将属性名和属性值的类型添加后，它将自动生成一个可以动态调整这些参数的UI。 makeAxisGrid方法用来生成包含轴线和网格的辅助线AxisGridHelper，正如前文所述，dat.GUI会根据属性名自动生成UI，我们希望得到一个checkbox，这样就可以很方便地改变bool 但是，我们想使用同一个属性同时控制坐标轴和网格线的隐藏/展示，所以就封装了一个新的辅助类，并在对应属性的getter和setter中分别操作AxesHelper和GridHelper，对于dat.GUI 而言，操作的只是一个属性罢了，示例代码如下： // Turns both axes and grid visible on/off // dat.GUI requires a property that bool // to decide to make a checkbox so we make a setter // and getter for `visible` which we can tell dat.GUI
2K10发布于 2020-05-12 - 来自专栏大史住在大前端
【带着canvas去流浪（11）】Three.js入门学习笔记
dat.GUI是个非常棒的动态调试工具，官方仓库地址：https://github.com/dataarts/dat.gui THREE.CameraHelper类可以生成相机视锥辅助线，非常有用。 另外，可以通过开启相机辅助功能查看阴影相机的视锥，并配合dat.GUI等其他工具进行调节： shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera
4.3K11发布于 2019-07-15 - 来自专栏cc log
Three.js基础
this.outputObjects = function () { console.log(scene.children); } }; var gui = new dat.GUI controlPoints.push(addControl(0, 0, 0)); controlPoints.push(addControl(0, 0, 3)); var gui = new dat.GUI geom, material); cube.position.y = 4; cube.castShadow = true; scene.add(cube); var gui = new dat.GUI renderer); this.perspective = "Perspective"; } }; }; var gui = new dat.GUI scene.position); this.perspective = "Perspective"; } }; }; var gui = new dat.GUI
87510编辑于 2024-04-03 - 来自专栏橙光笔记
Three.js教程（4）：相机
： var camera, scene, renderer; var geometry, material, mesh; var stats = new Stats(); var gui = new dat.GUI ： var camera, scene, renderer; var geometry, material, mesh; var stats = new Stats(); var gui = new dat.GUI
2.7K31发布于 2020-10-17 - 来自专栏cc log
Three.js中光源
this.intensity = 1; this.distance = pointLight.distance; }; var gui = new dat.GUI this.castShadow = true; this.onlyShadow = false; this.target = "Plane"; }; var gui = new dat.GUI 0x0000ff; this.groundColor = 0x00ff00; this.intensity = 0.6; }; var gui = new dat.GUI this.intensity2 = 500; this.color3 = 0x0000ff; this.intensity3 = 500; }; var gui = new dat.GUI this.castShadow = true; this.onlyShadow = false; this.target = "Plane"; }; var gui = new dat.GUI
49400编辑于 2024-04-03 - 来自专栏郭先生的博客
three.js 图形用户界面工具GUI
/libs/dat.gui.js"></script> var gui = new dat.GUI(); //通过npm引入 import { GUI } from "three/examples/jsm
5.6K10发布于 2020-08-31 - 来自专栏编程小白狼
Web3D开发指南：从入门到实战
@types/three --save-dev # TypeScript类型定义 # 开发工具 npm install vite --save-dev # 推荐构建工具 npm install dat.gui rollupOptions: { output: { manualChunks: { three: ['three'], vendor: ['dat.gui
38610编辑于 2025-12-28 - 来自专栏cc log
学习Three.js
camera); } } 动画建议使用requestAnimationFrame 旋转 rotation 弹跳 Math.cos() Math.sin() 加上控制面板 使用简单的表单控制库 dat.GUI ) { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }; var gui = new dat.GUI ) { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }; var gui = new dat.GUI
75110编辑于 2024-04-03 - 来自专栏橙光笔记
Three.js教程（3）：场景
var camera, scene, renderer; var geometry, material, mesh; var stats = new Stats(); var gui = new dat.GUI
4.5K22发布于 2020-10-17 - 来自专栏用户9379088的专栏
Three.js 之 Import Model 导入模型
document.querySelector('#mainCanvas') as HTMLCanvasElement// Sceneconst scene = new THREE.Scene()// Guiconst gui = new dat.GUI
7.3K30编辑于 2022-08-10 - 来自专栏历史专栏
【愚公系列】2023年08月 Three.js专题-光源
创建GUI对象 var gui = new dat.GUI(); 添加控件 var obj = { variable1: value1, variable2: value2 }; // 添加一个滑动条 typeList.length) { return; } const gui = new dat.GUI(); for (let i = 0; i < typeList.length
30200编辑于 2025-05-28 - 来自专栏历史专栏
【愚公系列】2023年08月 Three.js专题-粒子特效案例
cloud.sortParticles = true; scene.add(cloud); } createPointCloud() const gui = new dat.GUI
42310编辑于 2025-05-28 - 来自专栏前端开发面试指南
详解webpack构建优化
webpack = require('webpack')module.exports = { mode: 'production', entry: { three: ['three', 'dat.gui
1.9K00编辑于 2022-10-10 - 来自专栏HelloGitHub
谁会拒绝一款开源的 3D 博客呢？
2.3 dat.gui这个 3D 博客项目用到的另外一库是：dat.gui.js，它是一个用于在 JavaScript 中更改变量的轻量级图形用户界面，使用这个库可以很容易地创建出能够改变代码变量的界面组件
98420编辑于 2023-03-17 - 来自专栏大帅老猿
一文搞懂如何在Three.js里创建阴影效果 |《Three.js零基础直通14》
我们可以在Dat.GUI中控制这些灯光的位置和强度以及材质的金属度和粗糙度。
8.3K10编辑于 2022-11-11 - 来自专栏全栈技术
快过年了，用五种不同的JS特效带你看烟花（包邮送元宇宙图书）
index + 1; const b = index + 2; const a = index + 3; return { r, g, b, a }; }; const gui = new dat.GUI
2.2K41编辑于 2022-04-13 - 来自专栏杨不易呀
从零玩转RGB人脸活体检测
context.fill(); } }); }); // 这里如果报错 不用管 var gui = new dat.GUI
2K21编辑于 2022-01-19
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号