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
HtmlHtml을 이용하면 다양한 표현이 가능합니다. 쉽게 말해 Html로 구현 가능했던 거의 모든 것을 할 수 있다고 보면 됩니다. 여기서는 Html 요소를 만든 후 css를 이용해 위와 같은 동글동글한 풍선을 만들게 됩니다. 특정 Geometry뒤에서 사라질지 여부 등등을 설정할 수 있습니다. 일단 현재 예제로는 css와 연동이 제일 중요해 보입니다. 왜냐면 이쁘게 만들어야 하니까
4. Text & Float
텍스트텍스트는 특정 폰트에 따라 텍스트를 만들어주는 기능입니다. 강조하고 싶은 부분에 넣으면 좋을 것으로 보이네요. 늘 그렇듯. 폰트는 함부로 사용해선 안됩니다. 라이선스를 꼭 확인하고 써야 합니다. Google Font 사이트나 네이버 폰트 등을 참조해서 사용하는 것이 가장 바람직해 보입니다. 영상이 안 찍혀서 그런데, 참고로 텍스트를 깃발 나부끼듯 펄럭이게 만들 수 있습니다. 해당 기능이 Float입니다.
5. MeshReflectorMaterial
바닥에 비친다재료 중 반사 재료를 쓰는 컴포넌트입니다. 아직 어떻게 쓸 수 있을지 가물가물합니다. 철재나 얼음 같은 재료를 표현할 때 쓰일지도 모르겠습니다. 반사 없는 재질에 비해 좀 더 색다름을 주기는 합니다.
