r/vibecoding•26일 전•107•11
Three.js로 만든 시네마틱 영상 (젖은 셰이더와 빗방울 효과 중심)
I created this Cinematic with Three.js (focus on wet shadders and rain drop effect)
핵심 요약
Three.js를 활용해 나루토의 비 마을을 실사풍으로 구현한 시네마틱 영상 제작기.
- Three.js 활용 — 젖은 질감과 빗방울 효과를 강조한 시네마틱 영상 구현함.
- 기술적 구현 — Blender로 모델링 및 리깅을 수행하고 procedural 텍스처를 적용함.
- 성능 피드백 — 고사양 기기에서도 성능 최적화 이슈가 제기됨.
- 제작 공유 — 향후 제작 과정 공유 및 컴포넌트 무료 배포 계획함.
원래는 나루토에 나오는 페인의 마을인 비 마을(Amegakure)을 재현하면서 사실적인 젖은 질감 표현을 좀 연습해보려고 했거든. 근데 하다 보니 일이 커져서 카메라 무빙, 피사계 심도, 비, 안개 같은 것들까지 다 때려 넣고 시네마틱 영상으로 만들어버렸네.
전체 시네마틱 영상은 여기: 
영상에 댓글이나 구독 좀 달아주면 진짜 큰 힘이 될 듯. 반응 괜찮으면 이거 어떻게 만들었는지 제작 과정 싹 다 풀고, 썼던 에셋들도 무료로 배포할 생각이야 😄
코드는 그냥 느낌 가는 대로 짠 거라 좀 엉망임. 건물 에셋은 Tripo 썼고, 페인 모델링은 무료 모델 다운받아서 Blender에서 리깅이랑 포즈만 직접 잡았어.
처음부터 끝까지 내가 직접 모델링한 건 동상 하나뿐인데, 얼굴 도색이랑 몸 디테일 같은 텍스처까지 다 내가 직접 했음.
나머지 돌 질감, 러프니스 맵, 비, 물방울, 안개 같은 건 전부 프로시저럴로 만든 거야.
물론, 프롬프트 한 방에 마법처럼 뚝딱 만들어진 건 절대 아님.
확실히 말해두자면, 나 3D랑 개발 쪽으로 짬밥 좀 먹은 사람임. 그렇다고 초보들이 이런 결과물 못 낸다는 건 아니니까 오해는 마라.
다들 어떻게 봤는지 궁금하네! 의견 좀 남겨줘!
라이브 미리보기: https://stylized.cortiz.dev/rainy
