Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程的方法-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為朝天企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站建設(shè)，朝天網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程的方法

這就是今天的案例制作出來的五個(gè)可以調(diào)節(jié)的屬性。而且實(shí)現(xiàn)起來也很簡(jiǎ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ì)象，就可以控制這些值了，我們?cè)傩枰龅木褪牵诿恳淮武秩镜腶nimate函數(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();

效果案例

Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程的方法

下面附上我的全部代碼：

<!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簡(jiǎn)化試驗(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>

感謝各位的閱讀！關(guān)于“Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程的方法-創(chuàng)新互聯(lián)
文章源于：http://bm7419.com/article46/ceoihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站排名、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容