데브허브 | DEVHUB | 3D 웹개발 끝판왕 (감탄했습니다)
- 실제 3D 모델 대신 '댑스 맵'을 활용하여 밝기에 따라 원근감을 부여하고, 마우스 움직임에 맞춰 흔들어 입체적인 느낌을 연출합니다. 🗺️
- '블롭 마스킹' 기법을 사용하여 유체처럼 흘러가는 블롭이 지나가는 부분에만 헬멧이 나타나고 사라지게 하여 신비로운 효과를 줍니다. 🎭
- Three.js와 GLTF 모델을 기반으로 하며, 몬스터 에너지, 맥도날드, 안드로이드 로고 등은 여러 장의 2D 맵으로 분할하여 헬멧 표면에 입혀 사실감을 더합니다. 💻
- 이 연출의 핵심은 '러프니스 맵'을 사용하여 빛의 반사 정도를 조절하는 것입니다. 💡
- 러프니스 맵에서 어두운 부분은 빛을 또렷하게 반사하여 유광처럼 보이고, 밝은 부분은 빛을 흡수하여 매트한 질감을 표현합니다. ⚫⚪
- 헬멧 바이저를 어둡게(유리처럼 번쩍임) 하고 버튼 부분을 밝게(고무/플라스틱처럼 차분함) 칠하여 각기 다른 재질감을 극대화합니다. ✨
- 3D 웹 개발 시 단순히 색상만 칠하는 것을 넘어, 러프니스 맵을 통해 '빛의 질감'을 직접 디자인하는 것이 현실적인 3D 웹 콘텐츠 제작의 비결입니다. 🎨