GUI 컨트롤

 

마우스 조절

마우스 조절을 코드가 아닌 GUI를 제공하는 라이브러리를 사용해보기

 

 

설치

npm i dat.gui

 

 

  // Dat GUI
  const gui = new dat.GUI();
  // 자바스크립트 오브젝트의 속성 값을 그래픽 기반의 UI로 조정할 수 있다.
  // gui.add(자바스크립트 오브젝트, "속성", 범위 최소값, 범위 최대값, 단계).name("레이블 이름");
  gui.add(mesh.position, "y", -5, 5, 0.01).name("큐브 Y");
  gui.add(camera.position, "x", -10, 10, 0.01).name("카메라 X");
  // gui
  // 	.add(mesh.position, 'z')
  // 	.min(-10)
  // 	.max(3)
  // 	.step(0.01)
  // 	.name('메쉬의 Z 위치');
 
	camera.lookAt(mesh.position);
 
  // 그리기
  const clock = new THREE.Clock();
 
  function draw() {
    const time = clock.getElapsedTime();
 
    mesh.rotation.y = time;
   
    camera.lookAt(mesh.position);
 
    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

• GUI : 그래픽 유저 인터페이스
• dat.gui를 설치하고 적용하면 열고 닫는 토글 할 수 있는 버튼이 생김

 

 

설명 : Dat GUI

  // gui.add(자바스크립트 오브젝트, "속성", 범위 최소값, 범위 최대값, 단계).name("레이블 이름");
  
  gui.add(mesh.position, "y", -5, 5, 0.01).name("큐브 Y");

• 자바스크립트 오브젝트의 속성 값을 그래픽 기반의 UI로 조정할 수 있다.

 

 

위 방법을 아래처럼 메서드 체인으로 사용해도 된다.

gui
    .add(mesh.position, 'z')
    .min(-10)
    .max(3)
    .step(0.01)
    .name('메쉬의 Z 위치');

 

 

설명 : camera lookAt

...
 
    // Dat GUI
    const gui = new dat.GUI();
    gui.add(mesh.position, "y", -5, 5, 0.01).name("큐브 Y");
    gui.add(camera.position, "x", -10, 10, 0.01).name("카메라 X");
 
    // 카메라가 이동해도 mesh 위치를 바라보도록 설정
    // 아래 코드만 설정하면 카메라를 이동시키면 바라보지 않는다.
    // 그 이유는 아래 함수 draw 때문!
    // 애니메이션이 동작하는 draw 함수가 계속 실행 되기 때문이다.
    // draw 함수안에도 looAt을 넣어주자
    camera.lookAt(mesh.position);
 
	...
	
function draw() {
    const time = clock.getElapsedTime();
 
    mesh.rotation.y = time;
 
    camera.lookAt(mesh.position);
 
    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

모형은 중앙에 위치해 있고 카메라의 거리에 따라 멀어지면 물체가 작아지고 가까워지면 물체가 커 보이는 것이다.