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

오늘은 이어서 Part3 [Three.js]의 Chapter04 인터렉티브 카드 강의를 들었습니다.(07~08강)

 

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

 

🔎01. ExtrudeGeometry를 사용하여 3D 요소로 만들기

지난 시간에 사용한 shapeGeometry는 2차원 형태의 도형만 그릴 수 있고 도형에 깊이감을 더해 주려면 ExtrudeGeometry를 이용하시면 됩니다.

 

extrude geometry를 사용하면 depth, 경사면과 관련된 다양한 옵션(ex: bevelThickness)들을 설정할 수 있습니다.

자세한 내용은 문서를 참고해주세요!

https://threejs.org/docs/index.html?q=extrude#api/en/geometries/ExtrudeGeometry

three.js docs

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

 

extrudeGeometry의 첫번째 인자로는 지난번에 정의한 shape 인스턴스를, 두번째인자로는 3d요소로 보이게하는 다양한 옵션들을 추가해줄 수 있습니다.

 

shapeGeometry를 별다른 옵션값없이 ExtrudeGeometry로 변경해주시면 아래처럼 보이게 됩니다.

 

3D요소처럼 변경되었으나 우리가 생각하는 카드모양과는 다르기 때문에 몇가지 옵션들을 추가해볼게요

    const geometry = new THREE.ExtrudeGeometry(shape, {
      depth: 0.01, // 카드 두께
      bevelThickness: 0.1, // 경사면의 각진 정도(default: 0.2)
    });

 

extrude setting option을 추가하면 아래처럼 보이게 됩니다!

두께가 얇아지고 경사면도 훨씬 매끄럽게 변한 것을 확인할 수 있습니다.

 

 

 

🔎02. OrbitControls 변경

지난 시간에 OrbitControls에 대해 배웠습니다. OrbitControls를 사용하면 카메라가 대상 주위를 돌며 공전하기 때문에 마치 대상이 움직이는 것처럼 보이게 할 수 있는데요, 오늘은 지난 설정에 이어 아래 두가지 설정을 추가해보겠습니다.

- 카메라가 스스로 회전하는 것처럼 보이게 하기

- 카메라 회전 속도 설정

- 화면을 직접 드래그할 때 회전 속도

- 카메라가 멈췄을 때 적용될 관성 속도

- 줌 기능 비활성화

- 회전 최소, 최대각도 설정

 

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.autoRotate = true;
  controls.autoRotateSpeed = 2.5;
  controls.rotateSpeed = 0.75; // default:1
  controls.enableDamping = true;
  controls.enableZoom = false;
  controls.minPolarAngle = Math.PI / 2 - Math.PI / 3; // default: 0 ~ 180
  controls.maxPolarAngle = Math.PI / 2 + Math.PI / 3; // default: 0 ~ 180

 

orbitcontrols의 옵션은 위 코드로 변경할 수 있는데요, 카메라 설정을 변경했을 때와 마찬가지로 설정 변경후에는 꼭 update 함수를 호출시켜야합니다. 따라서 render함수에 아래처럼 controls.update() 문을 추가해줍니다 .

  function render() {
    renderer.render(scene, camera);
    controls.update();
    requestAnimationFrame(render);
  }

 

OrbitControls에 대한 내용은 아래 문서를 참고해주세요
https://threejs.org/docs/#examples/ko/controls/OrbitControls

three.js docs

 

마지막으로 카드가 가만히 회전하는 게 밋밋해 보이므로, z축방향으로 살짝 기울어져 보이게 설정해보겠습니다.

  const card = new Card({
    width: 10,
    height: 15.8,
    radius: 0.5,
    color: "#0077ff",
  });
  card.mesh.rotation.z = Math.PI * 0.1;
  scene.add(card.mesh);

 

위 코드를 추가하면 아래와 같이 보이게 됩니다.

 

 

물체 기울이는 코드에서 Card객체의 Mesh값을 보고 순간적으로 mesh의 정의가 헷갈려 지난 강의 내용을 다시 찾아보았습니다.ㅎㅎ역시 주기적으로 복습을 해줘야하는 군요 ㅠㅠ... Geometry는 물체 도형, 형태를 Material은 물체의 질감을 그리고 Mesh는 이 둘을 props로 받아 하나의 형태를 만든다는 것을 잊지말아야겠습니다.

보면은 항상 아래코드가 반복되는 것 같아요. 

const geometry = new THREE.Geometry();

const material = new THREE.Material();

const mesh = new THREE.mesh(geometry, material);

scene.add(mesh)

 

그리고 orbitcontrols의 angle 설정 관련해서도 좀 더 찾아봤습니다. 사실 polarAngle, AzimuthAngle 이라는 단어가 좀 생소해서요

ㅎㅎ AzimuthAngle은 흔히말하는 방위각으로 Three.js에서는 수평으로 얼마나 볼수있게 설정할지를 나타내고, polarAngle은 수직방향으로 얼마나 멀리 바라보게할지를 설정할 수 있습니다.

참고로 polar라는 단어를 polar bear로 기억했어서 막연히 북극(...)이라고만 생각되어 북극각도..극각도..?가 무슨의미일까 했는데 

이미지를 찾아보니 좀 더 명확하게 이해가 되는 것 같습니다. 뭔가 수직방향의 극선을 의미하는 게 아닌가 싶네요.

마지막으로 shape에 대해서도 찾아보았습니다.  이전에 사용했던 geometry에서는 Shape를 받는 부분이 따로 없었던 것 같아서요..! (*geometry의 첫번째 인자 타입은 geometry마다 다르네요..!)

shape는 선과 원을 사용하여 만든 2d 형상으로 강의에서 나온 ExtrudeGeometry나 ShapeGeometry와 함께 사용할 수 있다고하네요..! Three.js는 제공하는 기능이 워낙 방대하다보니 편하기도 하지만 하나하나 배워나갈 것도 생각보다 많은 것 같습니다.

 

✨오늘의 학습 인증 샷

 

 

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

https://fastcampus.co.kr/event_online_challenge_2401_mission

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

https://bit.ly/48sS29N