Three.js 는 dat.GUI 를 이용 하여 시험 절 차 를 어떻게 간소화 하 는 지 상세 하 게 설명 합 니 다.

9476 단어 three.jsdat.gui시험 절 차 를 간소화 하 다.
간단 한 소개
본 고 는 Three.js 가 dat.GUI 를 이용 하여 시험 절 차 를 어떻게 간소화 하 는 지 에 대한 생각 내용 을 소개 했다.사실 이 플러그 인 을 사용 하 는 가장 쉬 운 점 은 디 버 깅 이 관련 값 을 편리 하 게 조절 하여 마지막 에 그 려 진 결과 에 영향 을 주 는 것 이다.그리고 dat.GUI 가 이 루 는 것 도 간단 하고 이해 하기 도 쉽다.다음은 더 이상 할 말 이 없 으 니 상세 한 소 개 를 해 봅 시다.
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();
효과 사례
 
아래 에 나의 모든 코드 를 동봉 합 니 다.

<!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 를 배우 거나 사용 하 는 데 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
BootStrap 클릭 하여 저장 한 후 모드 상자 가 자동 으로 닫 히 는 사고(모드 상자)
Three.js 를 이용 하여 그림자 효과 인 스 턴 스 코드 를 어떻게 실현 합 니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage