56강 Drei

독일어로 3

해당 강의의 최종 결과물

안녕하세요 코드아키텍트입니다. 오늘은 56강 강의를 들은 내용을 정리합니다.

Drei란?

빠른 글을 위해 GPT와 논의해 보겠습니다.

Drei는 React Three Fiber (R3F)를 위한 유틸리티 라이브러리로, R3F를 사용하여 3D 애플리케이션을 개발할 때 유용한 구성 요소, 헬퍼 및 추상화를 제공합니다. 이는 일반적인 작업을 단순화하고 보일러플레이트 코드를 줄여, React 환경에서 3D 장면을 더 쉽게 생성하고 관리할 수 있게 해 줍니다.

좀 어려운 말이 쓰여있지만, React Three Fiber를 이용해 개발할 때 도움이 되는 기능들을 모아놨다고 보시면 됩니다. 그럼 위 예제를 하나하나 뜯어보며 어떤 기능들을 수업에서 다뤘는지 이야기해 봅시다.

1. TransformControls

화살표가 TransformControls

위에 보이는 화살표가 TransformControls입니다. 각 화살표 또는 평면을 클릭하고 드래그해서 지오메트리를 이동시킬 수 있습니다. 근데 좀 안 예쁜 게 탈입니다. 

2. PivotControls

좀 더 예쁜 PivotControls

그래픽과 관련해 아름다움은 포기할 수 없습니다. TransformControls에 비해 좀 더 예쁘고 좀 더 기능이 추가된 친구입니다. 지오메트리와 앞뒤 관계여부, 위치, 크기, 뷰사이즈와 연동여부 등 다양한 옵션을 바꿔볼 수 있습니다.

3.Html

Html

Html을 이용하면 다양한 표현이 가능합니다. 쉽게 말해 Html로 구현 가능했던 거의 모든 것을 할 수 있다고 보면 됩니다. 여기서는 Html 요소를 만든 후 css를 이용해 위와 같은 동글동글한 풍선을 만들게 됩니다. 특정 Geometry뒤에서 사라질지 여부 등등을 설정할 수 있습니다. 일단 현재 예제로는 css와 연동이 제일 중요해 보입니다. 왜냐면 이쁘게 만들어야 하니까

4. Text & Float

텍스트

텍스트는 특정 폰트에 따라 텍스트를 만들어주는 기능입니다. 강조하고 싶은 부분에 넣으면 좋을 것으로 보이네요. 늘 그렇듯. 폰트는 함부로 사용해선 안됩니다. 라이선스를 꼭 확인하고 써야 합니다. Google Font 사이트나 네이버 폰트 등을 참조해서 사용하는 것이 가장 바람직해 보입니다. 영상이 안 찍혀서 그런데, 참고로 텍스트를 깃발 나부끼듯 펄럭이게 만들 수 있습니다. 해당 기능이 Float입니다.

5. MeshReflectorMaterial

바닥에 비친다

재료 중 반사 재료를 쓰는 컴포넌트입니다. 아직 어떻게 쓸 수 있을지 가물가물합니다. 철재나 얼음 같은 재료를 표현할 때 쓰일지도 모르겠습니다. 반사 없는 재질에 비해 좀 더 색다름을 주기는 합니다.