首页
所有分类
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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
Vue是怎么渲染template内的标签内容的
Jun 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
对齐打印(1) FutureTask(3) CompletableFuture(1) format(1) 五子棋(12) 井字棋(1) 计算器(5) 异步回调(1) Springboot-cli(1) 底部导航(1)
You might like
php面向对象全攻略 （十七） 自动加载类
2009/09/30 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP面向对象程序设计（OOP）之方法重写（override）操作示例
2018/12/21 PHP
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Javascript实现单例模式
2016/01/24 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现电子词典
2020/04/23 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
使用Python的OpenCV模块识别滑动验证码的缺口（推荐）
2019/05/10 Python
Python while循环使用else语句代码实例
2020/02/07 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
美国购买当代和现代家具网站：MODTEMPO
2018/07/20 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
大学毕业生推荐信
2014/07/09 职场文书
golang的文件创建及读写操作
2022/04/14 Golang