欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Three.js利用dat.GUI如何簡化試驗(yàn)流程詳解

 更新時(shí)間：2017年09月26日 09:35:51   作者：專注前端30年  
dat.gui可以方便地向場景中添加控制條，隨時(shí)調(diào)整參數(shù)。下面這篇文章主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡化試驗(yàn)流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。

簡介

本文主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡化試驗(yàn)流程的想內(nèi)容，其實(shí)使用這個(gè)插件的最省事的地方在于，調(diào)試很方便的調(diào)節(jié)相關(guān)的值，從而影響最后繪制的結(jié)果。而dat.GUI實(shí)現(xiàn)的東西也很簡單，理解起來也很好理解。下面話不多說了，來一起看看詳細(xì)的介紹吧。

我們實(shí)例化dat.GUI對(duì)象后，會(huì)在右上角顯示出一些可以調(diào)節(jié)的參數(shù)，比如：

這就是今天的案例制作出來的五個(gè)可以調(diào)節(jié)的屬性。而且實(shí)現(xiàn)起來也很簡單，而且大部分是需要我們做的，除了上面的這個(gè)控制臺(tái)不是我們寫出來的。

引入方式

首先，你需要將庫文件引入到頁面當(dāng)中：

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

然后，你可以聲明一個(gè)對(duì)象，對(duì)象內(nèi)包括所有需要修改的屬性，比如：

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

這是本人書寫的案例相關(guān)的屬性，和上面圖片的能夠?qū)Ρ绕饋怼?/p>

下一步，你就需要實(shí)力化dat.GUI對(duì)象，然后把相關(guān)需要控制的屬性調(diào)用屬性相關(guān)的add(對(duì)象，屬性，最小值，最大值)方法，將屬性控制添加進(jìn)去：

var datGui = new dat.GUI(); 
  //將設(shè)置屬性添加到gui當(dāng)中，gui.add(對(duì)象，屬性，最小值，最大值） 
  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對(duì)象，就可以控制這些值了，我們再需要做的就是，在每一次渲染的animate函數(shù)里面講相關(guān)的值修改掉，這樣就能實(shí)現(xiàn)這個(gè)效果了。

//更新相關(guān)位置 
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;

到這里就實(shí)現(xiàn)效果了。

常用方法

gui.addFolder()

此方法是添加一個(gè)欄目，返回一個(gè)欄目對(duì)象，具有下拉菜單的功能，如果在當(dāng)前欄目下面添加功能按鈕，需要按下面的方式書寫

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

gui.add()

這個(gè)方法是常用的添加方法，可以添加一個(gè)普通按鈕，最小傳入兩個(gè)值，三四個(gè)值是設(shè)置范圍

將設(shè)置屬性添加到gui當(dāng)中，gui.add(對(duì)象，屬性，最小值，最大值）

如果對(duì)象里面的類是一個(gè)函數(shù)，如果需要觸發(fā)的點(diǎn)擊事件，只傳入兩個(gè)值就好了，點(diǎn)擊的時(shí)候就可以觸發(fā)到相關(guān)事件。

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

這個(gè)方法添加的按鈕時(shí)一個(gè)標(biāo)準(zhǔn)的顏色選擇器，比如：

gui.addColor(param, 'color')

.onChange()

這個(gè)方法是可以觸發(fā)的回調(diào)函數(shù)，在值發(fā)生變動(dòng)的時(shí)候會(huì)觸發(fā)當(dāng)前函數(shù)，比如

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

.listen()

如果當(dāng)前只是想顯示當(dāng)前的值，而且監(jiān)聽當(dāng)前的變化，就這么寫：

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

效果案例

 

下面附上我的全部代碼：

<!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; // 默認(rèn)的是，沒有設(shè)置的這個(gè)清晰 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簡化試驗(yàn)流程 
 var gui; 
 function initGui() { 
  //聲明一個(gè)保存需求修改的相關(guān)數(shù)據(jù)的對(duì)象 
  gui = { 
   lightY:30, //燈光y軸的位置 
   sphereX:0, //球的x軸的位置 
   sphereZ:0, //球的z軸的位置 
   cubeX:25, //立方體的x軸位置 
   cubeZ:-5 //立方體的z軸的位置 
  }; 
  var datGui = new dat.GUI(); 
  //將設(shè)置屬性添加到gui當(dāng)中，gui.add(對(duì)象，屬性，最小值，最大值） 
  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); 
 } 
 
 //用戶交互插件 鼠標(biāo)左鍵按住旋轉(zhuǎn)，右鍵按住平移，滾輪縮放 
 var controls; 
 function initControls() { 
 
  controls = new THREE.OrbitControls( camera, renderer.domElement ); 
 
  // 如果使用animate方法時(shí)，將此函數(shù)刪除 
  //controls.addEventListener( 'change', render ); 
  // 使動(dòng)畫循環(huán)使用時(shí)阻尼或自轉(zhuǎn) 意思是否有慣性 
  controls.enableDamping = true; 
  //動(dòng)態(tài)阻尼系數(shù) 就是鼠標(biāo)拖拽旋轉(zhuǎn)靈敏度 
  //controls.dampingFactor = 0.25; 
  //是否可以縮放 
  controls.enableZoom = true; 
  //是否自動(dòng)旋轉(zhuǎn) 
  controls.autoRotate = false; 
  //設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離 
  controls.minDistance = 100; 
  //設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離 
  controls.maxDistance = 200; 
  //是否開啟右鍵拖拽 
  controls.enablePan = true; 
 } 
 
 function render() { 
  renderer.render( scene, camera ); 
 } 
 
 //窗口變動(dòng)觸發(fā)的函數(shù) 
 function onWindowResize() { 
 
  camera.aspect = window.innerWidth / window.innerHeight; 
  camera.updateProjectionMatrix(); 
  render(); 
  renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
  //更新控制器 
  render(); 
 
  //更新性能插件 
  stats.update(); 
 
  //更新相關(guān)位置 
  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>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論