點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:04:10

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

Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程:dat.gui可以方便地向場(chǎng)景中添加控制條，隨時(shí)調(diào)整參數(shù)。本文主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程的想內(nèi)容，其實(shí)使用這個(gè)插件的最省事的地方在于，調(diào)試很方便的調(diào)節(jié)相關(guān)的值，從而影響最后繪制的結(jié)果。而dat.GUI實(shí)現(xiàn)的東西也很簡(jiǎn)單，理

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Three.js利用dat.GUI簡(jiǎn)化試驗(yàn)流程:dat.gui可以方便地向場(chǎng)景中添加控制條，隨時(shí)調(diào)整參數(shù)。本文主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程的想內(nèi)容，其實(shí)使用這個(gè)插件的最省事的地方在于，調(diào)試很方便的調(diào)節(jié)相關(guān)的值，從而影響最后繪制的結(jié)果。而dat.GUI實(shí)現(xiàn)的東西也很簡(jiǎn)單，理

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

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

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

引入方式

首先，你需要將庫(kù)文件引入到頁(yè)面當(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();

效果案例

下面附上我的全部代碼：

<!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>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：流程 ee three.js

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦