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

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

 

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

 

8, 9 강은 threejs 문서에서 Material과 Camera 사용법과 예시를 같이 살펴보았습니다.

https://threejs.org/docs/index.html#api/en/materials/LineBasicMaterial

three.js docs

 

🔎01. Material 살펴보기

 

LineBasicMaterial

- 선형태의 오브젝트를 표현할 때 사용할 수 있습니다.

MeshBasicMaterial

- 조명에 영향을 받지 않기 때문에 빛 유무와 상관없이 잘 보이나 음영표현이 되지 않습니다.

 

MeshMaterial Properties

- transparent와 opacity를 함께 설정해야 적용이 됩니다.

const material = new THREE.MeshStandardMaterial({
	color: new THREE.Color(0xcc99ff),
    transparent: true,
    opacity: 0.5
})

- visible 값을 통해 메쉬의 가시성을 설정할 수 있습니다.

- wireframe: Material의 뼈대를 보이게 할 수 있습니다.

- side: 도형의 어떤 면을 렌더링할지 설정할 수 있습니다. (default: FrontSide)

* 양면 렌더링(DoubleSide)시 더 많은 컴퓨터 리소스가 필요하므로 필요에따라 적절히 선택

const material = new THREE.MeshStandardMaterial({
	color: new THREE.Color(0xcc99ff),
    transparent: true,
    opacity: 0.5
    side: THREE.BackSide
})

THREE.BackSide & THREE.DoubleSide 설정 모습

- 인스턴스 생성 후에도 직접 속성 변경이 가능합니다.

material.color = new THREE.color(0x00c896);

 

 

다음 Material들은 빛에 반응하는 Material들(반사, 굴절, 명암 효과 등)입니다.

 

MeshLambertMaterial

- emissive: material이 자체적으로 내뿜는 색 변경

- envMaps: mesh의 주변 환경을 메터리얼에 비춰보이게 할 수 있습니다. (reflection: 반사, refraction: 굴절)

- *반사점 표현에 한계 있음.

 

MeshPhongMaterial

- MeshLambertMaterial보다 빛에 의해 생기는 반사점 표현이 좀 더 자연스러움

 

MeshStandardMaterial

- PBR(Physically based rendering) 물리기반 렌더링 방식 사용. 이 방식이 다른 Unity나 Unreal 3D 앱에서 사용하는 표준방식이 되었다고하여 이름이 standard material이라고 합니다.

- roughness: 재질의 거칠기 설정(1에 가까울수록 거칠어짐)

- metalness: 재질의 금속성 설정

* 표현할 영역이 많은만큼 성능이 떨어짐. 다양한 저사양 환경을 지원하려면 필요에 따라 적절히 선택해야함

 

MeshToonMaterial

- 만화 느낌 표현할 수 있는 material

 

 

🔎02. Camera 살펴보기

 

PerspectiveCamera

- 사람의 눈이 보는 것과 비슷한 방식으로 원근감을 구현한 카메라로, 자주 사용하는 카메라입니다.

아래는 저번 포스트에도 올렸지만 복습겸 추가합니다!

- fov:  field of view(시야각). 카메라로 장면을 비출 때 얼만큼의 시야각으로 바라볼지를 설정합니다. fov값이 커지면 카메라에 더 많은 범위가 담깁니다.

- aspect: 종횡비

- near: 얼마나 가까이, 멀리 볼지를 설정합니다. 이 범위를 벗어나면 카메라에 렌더링 되지 않습니다. 필수값은 아니나 성능과도 관련있어, 불필요한 물체는 렌더링되지 않게 하는 게 좋습니다.

 

📌 updateProjectionMatix

- 모든 종류 카메라에 공통으로 있는 메서드로, 카메라 시야각, 종횡비 등의 속성 변경 시 이 메서드를 호출해줘야 정상적으로 적용됩니다.

 

OrthorgraphicCamera

- 원근감이 제거된 카메라

- 스타크래프트, 롤과 같은 게임 만들 때 사용

 

 

10강에서는 브라우저 사이즈에 따라 렌더러 크기도 함께 업데이트될 수 있도록 수정하는 법을 배웠습니다.

 

🔎03. Rerender 리사이징해보기

브라우저 크기를 줄여도 변화없는 캔버스 모습

const handleResize = () => {
    // 브라우저 너비, 높이 비율로 카메라 종횡비 재설정
    camera.aspect = window.innerWidth / window.innerHeight;
    // UpdateProjectionMatrix()까지 호출해야 카메라에 반영됨
    camera.updateProjectionMatrix();
    // 렌더러 사이즈 변경
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 새롭게 렌더된 결과를 화면에 반영
    renderer.render(scene, camera);
  };

  window.addEventListener("resize", handleResize);

 

✨오늘의 학습 인증 샷

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

https://fastcampus.co.kr/event_online_challenge_2401_mission

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

https://bit.ly/48sS29N