[바이브 코딩 2편] Three.js 3차원 가상공간 만들기 (HDRI 배경 적용)

지난 시간에는 Antigravity ( 안티그래비티 ) AI 코딩 도구를 설치해보았는데요.

오늘은 이 안티그래비티를 이용하여 3차원 공간의 베이스를 꾸며보도록 하겠습니다.
만화에 등장할 법한 예쁜 하늘을 먼저 꾸며볼까요?

그 전에 오늘 진행할 내용 중 먼저 가져가야 할 베이스 지식! 개발 도메인 지식이 몇개 필요한데요.

첫번째는 three.js 입니다.

필자의 AI 그림 미술관(PC전용) : https://ai-museum.netlify.app/

three.js 는 웹브라우저에서 3차원 공간을 표현할 수 있는 라이브러리(Library) 중 하나인데요.
참고로 라이브러리는 간단히 설명하자면 기술을 묶어놓은 것이라 생각하시면 됩니다.

3차원 공간을 표현하는 라이브러리중 가장 보편적인 기술이라서 AI가 학습을 많이 했기 때문에 잘 소화합니다.

두번째는 HDRI 텍스쳐(texture)입니다.

필자의 3D카페 : https://cray7.mycafe24.com/cafeRain/

간단히 말해 배경인데요. 그냥 배경이라고 하면 되지 왜 HDRI 텍스쳐라고 부르냐면 3차원 가상 공간을 표현하는 배경이기 때문입니다.

일반 배경은 마우스로 캐릭터를 움직여도 배경이 그 자리에 그대로 있거나 종방향이나 횡방향으로 스크롤되는게 전부이지만 HDRI는 3차원 공간을 마치 둘러보듯이 작동할 수 있습니다.
그러한 점이 매력적이지요. 간단히 3D 게임의 저 멀리 하늘을 떠올리시면 될 것 같습니다.

너무 많이 설명드리자면 시작도 전에 지칠수 있으니 이제 본론으로 들어가겠습니다 🙂

안티그래비티 프로그램을 실행하고 폴더를 하나 생성하는 부분은 지난 게시글에서 다뤘으니 넘어가겠습니다.

3D 컨텐츠는 꽤 복잡한 작업이라 성능이 좋은 모델을 사용해주셔야 합니다.
채팅창에서 Fast 와 Gemini 3.1 Pro(High) 또는 그 이상 높은 모델을 선택해 주신 다음,

아래 프롬프트를 지시합니다.

three.js 로 3차원 공간을 꾸미고 그리고 중앙에 큐브 1개를 배치해줘. 
기술스택은 html js 를 사용해

AI가 알아서 코딩을 쭉 진행합니다. 보통 이 정도면 3분 정도면 대부분 완성합니다.

좌측 상단에 결과가 노출되고 보통 index.html 가 99% 생성됩니다.
이 페이지가 메인이거든요.

해당 파일을 마우스 우클릭하고, Open with Live Server 메뉴를 선택하시면,

3D 결과 화면이 노출됩니다.
저는 큐브가 돌아가는 화면이 연출되었는데
아마 여러분은 다른 화면이 노출되었을 겁니다.
프롬프트 한 방에 이런 멋진 장면이 연출되다니, 세상 정말 편해졌지요?? 🙂

이제 우리의 목표는 멋진 하늘을 띄우는 것입니다.
결과 화면이 표시된 웹브라우저 창은 닫아도 되지만 안 닫아도 됩니다.

애니메이션 스타일의 HDRI 배경을 생성하고 적용해줘.

그러면 안티그래비티가 이미지를 하나 생성해줄 겁니다.

그리고 나서 코딩을 완료할텐데요.

아까 웹브라우저를 다시 열어 보시면 ( 닫은 경우라면 다시 Live Server 창을 띄우시면 됩니다 )

예쁜 배경이 표시됩니다. 마우스로 드래그해보시면 자유롭게 하늘을 날아다니듯 주위를 둘러보실수 있습니다.

AI는 마치 주사위 굴리기와 같아서, 운빨을 받습니다.
한번에 더 멋진 결과물이 나올수도 있지만, 작동이 안될 수도 있으니 그럴 경우 화면을 캡쳐해서 복붙하면서 “작동이 안되는데 수정해줘”라고 하면 됩니다.

과거에는 이런 HDRI 배경을 코딩으로 적용하려면 꽤나 고생했었는데요.
AI로 이렇게 쉽게 해버리는 시대가 오다니 정말 요지경인 세상입니다 ㅎㅎ

다음에는 큐브를 삭제하고 만화 스타일의 작은 섬을 꾸며보는 시간을 가져볼까요 ? 🙂

방문해주셔서 감사합니다. 많은 성원 부탁드립니다!