首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Three.js利用dat.GUI如何简化试验流程详解

Posted in Javascript onSeptember 26, 2017

简介

本文主要给大家介绍了关于Three.js利用dat.GUI如何简化试验流程的想内容，其实使用这个插件的最省事的地方在于，调试很方便的调节相关的值，从而影响最后绘制的结果。而dat.GUI实现的东西也很简单，理解起来也很好理解。下面话不多说了，来一起看看详细的介绍吧。

我们实例化dat.GUI对象后，会在右上角显示出一些可以调节的参数，比如：

Three.js利用dat.GUI如何简化试验流程详解

这就是今天的案例制作出来的五个可以调节的属性。而且实现起来也很简单，而且大部分是需要我们做的，除了上面的这个控制台不是我们写出来的。

引入方式

首先，你需要将库文件引入到页面当中：

<script src="examples/js/libs/dat.gui.min.js"></script>

然后，你可以声明一个对象，对象内包括所有需要修改的属性，比如：

gui = { 
 lightY:30, //灯光y轴的位置 
 sphereX:0, //球的x轴的位置 
 sphereZ:0, //球的z轴的位置 
 cubeX:25, //立方体的x轴位置 
 cubeZ:-5 //立方体的z轴的位置 
};

这是本人书写的案例相关的属性，和上面图片的能够对比起来。

下一步，你就需要实力化dat.GUI对象，然后把相关需要控制的属性调用属性相关的add(对象，属性，最小值，最大值)方法，将属性控制添加进去：

var datGui = new dat.GUI(); 
  //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值） 
  datGui.add(gui,"lightY",0,100); 
  datGui.add(gui,"sphereX",-30,30); 
  datGui.add(gui,"sphereZ",-30,30); 
  datGui.add(gui,"cubeX",0,60); 
  datGui.add(gui,"cubeZ",-30,30);

到了这一步，dat.GUI对象，就可以控制这些值了，我们再需要做的就是，在每一次渲染的animate函数里面讲相关的值修改掉，这样就能实现这个效果了。

//更新相关位置 
light.position.y = gui.lightY; 
sphere.position.x = gui.sphereX; 
sphere.position.z = gui.sphereZ; 
cube.position.x = gui.cubeX; 
cube.position.z = gui.cubeZ;

到这里就实现效果了。

常用方法

gui.addFolder()

此方法是添加一个栏目，返回一个栏目对象，具有下拉菜单的功能，如果在当前栏目下面添加功能按钮，需要按下面的方式书写

var lightFolder = gui.addFolder('Light'); 
 
lightFolder.add(param, 'width', 0.1, 100).onChange(function (val) { 
 
 rectLight.width = val; 
 
});

gui.add()

这个方法是常用的添加方法，可以添加一个普通按钮，最小传入两个值，三四个值是设置范围

将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）

如果对象里面的类是一个函数，如果需要触发的点击事件，只传入两个值就好了，点击的时候就可以触发到相关事件。

gui.add(controls, 'addCube'); 
gui.addColor()

这个方法添加的按钮时一个标准的颜色选择器，比如：

gui.addColor(param, 'color')

.onChange()

这个方法是可以触发的回调函数，在值发生变动的时候会触发当前函数，比如

gui.addColor(param, 'color').onChange(function (val) { 
 
 rectLight.color.setHex(val); 
 
});

.listen()

如果当前只是想显示当前的值，而且监听当前的变化，就这么写：

gui.add(obj, 'key').listen();

效果案例

Three.js利用dat.GUI如何简化试验流程详解 

下面附上我的全部代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <style type="text/css"> 
  html, body { 
   margin: 0; 
   height: 100%; 
  } 
 
  canvas { 
   display: block; 
  } 
 
 </style> 
</head> 
<body onload="draw();"> 
 
</body> 
<script src="build/three.js"></script> 
<script src="examples/js/controls/OrbitControls.js"></script> 
<script src="examples/js/libs/stats.min.js"></script> 
<script src="examples/js/libs/dat.gui.min.js"></script> 
<script> 
 var renderer; 
 function initRender() { 
  renderer = new THREE.WebGLRenderer({antialias:true}); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
  //告诉渲染器需要阴影效果 
  renderer.shadowMap.enabled = true; 
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap 
  document.body.appendChild(renderer.domElement); 
 } 
 
 var camera; 
 function initCamera() { 
  camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
  camera.position.set(0, 40, 100); 
  camera.lookAt(new THREE.Vector3(0,0,0)); 
 } 
 
 var scene; 
 function initScene() { 
  scene = new THREE.Scene(); 
 } 
 
 //初始化dat.GUI简化试验流程 
 var gui; 
 function initGui() { 
  //声明一个保存需求修改的相关数据的对象 
  gui = { 
   lightY:30, //灯光y轴的位置 
   sphereX:0, //球的x轴的位置 
   sphereZ:0, //球的z轴的位置 
   cubeX:25, //立方体的x轴位置 
   cubeZ:-5 //立方体的z轴的位置 
  }; 
  var datGui = new dat.GUI(); 
  //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值） 
  datGui.add(gui,"lightY",0,100); 
  datGui.add(gui,"sphereX",-30,30); 
  datGui.add(gui,"sphereZ",-30,30); 
  datGui.add(gui,"cubeX",0,60); 
  datGui.add(gui,"cubeZ",-30,30); 
 } 
 
 var light; 
 function initLight() { 
  scene.add(new THREE.AmbientLight(0x444444)); 
 
  light = new THREE.PointLight(0xffffff); 
  light.position.set(15,30,10); 
 
  //告诉平行光需要开启阴影投射 
  light.castShadow = true; 
 
  scene.add(light); 
 } 
 
 var sphere,cube; 
 function initModel() { 
  //上面的球 
  var sphereGeometry = new THREE.SphereGeometry(5,200,200); 
  var sphereMaterial = new THREE.MeshLambertMaterial({color:0xaaaaaa}); 
 
  sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); 
  sphere.position.y = 5; 
 
  //告诉球需要投射阴影 
  sphere.castShadow = true; 
 
  scene.add(sphere); 
 
 
  //光源的球 
  var spGeometry = new THREE.SphereGeometry(0.5,20,20); 
  var spMaterial = new THREE.MeshPhysicalMaterial({color:0xffffff}); 
 
  var sp = new THREE.Mesh(spGeometry,spMaterial); 
 
  sp.position.set(15,30,10); 
 
  scene.add(sp); 
 
  //辅助工具 
  var helper = new THREE.AxisHelper(10); 
  scene.add(helper); 
 
  //立方体 
  var cubeGeometry = new THREE.CubeGeometry(10,10,8); 
  var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff}); 
 
  cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
  cube.position.x = 25; 
  cube.position.y = 5; 
  cube.position.z = -5; 
 
  //告诉立方体需要投射阴影 
  cube.castShadow = true; 
 
  scene.add(cube); 
 
  //底部平面 
  var planeGeometry = new THREE.PlaneGeometry(100,100); 
  var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa}); 
 
  var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
  plane.rotation.x = - 0.5 * Math.PI; 
  plane.position.y = -0; 
 
  //告诉底部平面需要接收阴影 
  plane.receiveShadow = true; 
 
  scene.add(plane); 
 
 } 
 
 //初始化性能插件 
 var stats; 
 function initStats() { 
  stats = new Stats(); 
  document.body.appendChild(stats.dom); 
 } 
 
 //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 var controls; 
 function initControls() { 
 
  controls = new THREE.OrbitControls( camera, renderer.domElement ); 
 
  // 如果使用animate方法时，将此函数删除 
  //controls.addEventListener( 'change', render ); 
  // 使动画循环使用时阻尼或自转 意思是否有惯性 
  controls.enableDamping = true; 
  //动态阻尼系数 就是鼠标拖拽旋转灵敏度 
  //controls.dampingFactor = 0.25; 
  //是否可以缩放 
  controls.enableZoom = true; 
  //是否自动旋转 
  controls.autoRotate = false; 
  //设置相机距离原点的最远距离 
  controls.minDistance = 100; 
  //设置相机距离原点的最远距离 
  controls.maxDistance = 200; 
  //是否开启右键拖拽 
  controls.enablePan = true; 
 } 
 
 function render() { 
  renderer.render( scene, camera ); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
 
  camera.aspect = window.innerWidth / window.innerHeight; 
  camera.updateProjectionMatrix(); 
  render(); 
  renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
  //更新控制器 
  render(); 
 
  //更新性能插件 
  stats.update(); 
 
  //更新相关位置 
  light.position.y = gui.lightY; 
  sphere.position.x = gui.sphereX; 
  sphere.position.z = gui.sphereZ; 
  cube.position.x = gui.cubeX; 
  cube.position.z = gui.cubeZ; 
 
  controls.update(); 
 
  requestAnimationFrame(animate); 
 } 
 
 function draw() { 
  initGui(); 
  initRender(); 
  initScene(); 
  initCamera(); 
  initLight(); 
  initModel(); 
  initControls(); 
  initStats(); 
 
  animate(); 
  window.onresize = onWindowResize; 
 } 
</script> 
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

Three.js利用dat.GUI如何简化试验流程详解

- Author -

专注前端30年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
javascript 基础篇3 类，回调函数，内置对象，事件处理
Mar 14 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
简单学习vue指令directive
Nov 03 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 #Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 #Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 #Javascript
Three.js实现绘制字体模型示例代码
Sep 26 #Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 #Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 #jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 #Javascript
ipv6(1) 内存(1) 进程假死(1) PV(1) UV(1) 访问日志(2) 线程(1) 连接数(1) jenkins(1) 弱口令(1)
You might like
强烈推荐：php.ini中文版(1)
2006/10/09 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
jquery JSON的解析方式
2009/07/25 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
AngularJS2中一种button切换效果的实现方法（二）
2017/03/27 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python rsa 加密解密
2017/03/20 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python增加图像对比度的方法
2019/07/12 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
优秀企业获奖感言
2014/02/01 职场文书
40岁生日感言
2014/02/15 职场文书
职业女性的职业规划
2014/03/04 职场文书
四议两公开实施方案
2014/03/28 职场文书
今日说法观后感
2015/06/08 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
《地。-关于地球的运动-》单行本第七集上市，小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫