패스트캠퍼스 환급챌린지 14일차 미션 (2월 14일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

오늘은 이어서 Part3 [Three.js 기초]의 Chapter02 3D큐브 강의를 들었습니다.(13~14강)

 

그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요!

 

🔎01. OrbitControls

화면상에서 인터렉티브하게 카메라 컨트롤을 가능하게 해주는 threejs 빌트인 기능입니다.

카메라가 물체 주변에서 궤도를 그리며 돌고있는 걸 생각하시면 되겠습니다.

https://threejs.org/docs/index.html?q=Orbit#examples/en/controls/OrbitControls

three.js docs

 

OrbitControls는 three/addons 패키지에서 직접 import해서 사용할 수 있습니다.

 

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

...
 // OrbitController 추가
 const controls = new OrbitControls(camera, renderer.domElement);
...

 

OrbitControl을 추가하고 화면을 마우스로 돌려보면 물체가 같이 돌아가는 것 처럼 보입니다.

하지만 실제로는 물체가 돌아가는 게 아니라 물체 주변을 돌고있는 카메라가 움직이고 있는 것으로,

아래 x,y,z축을 추가해보면 확실히 마우스에 따라 축 위치가 변경되는 것을 확인할 수 있습니다.

// 화면에 x,y,z 축 추가
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

OrbitControl로 카메라를 돌려 물체를 관찰한 모습

 

 OrbitControls의 다양한 속성들

 

  controls.autoRotate = true; // 드래그하지 않아도 대상주변을 자동으로 회전하게 만듦
  controls.autoRotateSpeed = 30; // 회전 속도
  controls.enableDamping = true; // 멈췄을때 움직이려는 관성 설정
  controls.dampingFactor = 0.01; // 관성 값 적용
  controls.enableZoom = true; // 카메라 줌 설정(앞뒤 움직임 Default:true)
  controls.enablePan = true; // 카메라Pan기능(좌우 움직임 Default:true)
  controls.maxDistance = 50; // 최대 줌거리
  controls.minDistance = 10; // 최소 줌거리
  controls.maxPolarAngle = Math.PI/2; // 수직방향으로 최대 얼마나 돌릴수있는지
  controls.minPolarAngle = Math.PI/3; // 수직방향으로 최소 얼마나 돌릴수있는지
  controls.maxAzimuthAngle = Math.PI/2; // 수평방향으로 최대 얼마나 돌릴수있는지
  controls.minAzimuthAngle = Math.PI/3; // 수평방향으로 최소 얼마나 돌릴수있는지

 

 

 

🔎02. GUI 컨트롤 추가

매번 속성값 변경후 렌더링해서 확인하는 건 꽤나 번거롭습니다. 특히 복잡한 물체를 렌더링할 때는 더 생산성에 좋지않기때문에 GUI 패널 라이브러리를 사용합니다.

 

npm install lil-gui

 

아래처럼 import한 후

import GUI from 'lil-gui';

gui 인스턴스 생성 후 컨트롤하고자하는 속성들을 추가해주시면 됩니다.

  const gui = new GUI();
  // gui 인스턴스에 add 메서드를 통해 GUI 패널에서 컨트롤하고자하는 속성을 추가
  gui.add(cube.position, "y", -3, 3, 0.1); // 변경하고자하는 객체, 변경하고자하는 속성, 최소, 최대값, 스텝옵션:슬라이더 한칸움직일떄 값 얼마나 움직일지

gui 추가 후 우측상단에 보이는 컨트롤 패널

 

하지만 위에처럼 사용할 경우, 각 파라미터가 어떤걸 의미하는지 한번에 파악이 어렵다는 문제가 있습니다.

아래처럼 add함수를 체이닝하는 방식으로 가독성을 높일 수 있습니다.

  gui.add(cube.position, "y").min(-3).max(3).step(0.1);

 

색상 패널을 추가하는 건 살짝 까다롭습니다. gui는 property 데이터 타입을 보고 적절히 ui를 알아서 선택하는데, hex코드나 rgb코드값도 string 타입이라 이 값만 보고는 색상팔레트 UI를 선택해야할지 결정할 수 없습니다. 또한 material의 color property에 저장되는 값은 hexcode나 rgb가 아닌 Three.js에서 빌트인으로 제공하고있는 color instance이기 때문에 위에 사용한 방식처럼 Property값을 직접 변경이 불가합니다.

 

색상 패널을 추가하려면 아래처럼 addColor라는 메서드를 따로 사용해야합니다.

그리고 onChange 함수를 체이닝으로 등록해서 GUI상에서 변경한 색상을 바로 메터리얼색상에 적용할 수 있습니다.

  const options = {
    color: 0x00ffff,
  };
  
  // 색상 팔레트 추가 변경할 객체, 속성(16진수 스트링, 넘버, gui형식 타입),
  gui.addColor(options, "color").onChange((value) => {
    // 변경한 값을 material 색상에 반영
    cube.material.color.set(value);
  });

 

 

✨오늘의 학습 인증 샷

 

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://fastcampus.co.kr/event_online_challenge_2401_mission

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스

https://bit.ly/48sS29N