요즘 보이는 그 AI 3D 데모, 정체는 three.js예요

요즘 X나 유튜브에서 "AI한테 시켰더니 3D 게임이 나왔다"는 영상 보신 적 있으실 거예요. 브라우저에서 바로 돌아가는 그 3D, 대부분 three.js로 만듭니다.

three.js가 뭘 해주냐면요

브라우저에는 원래 3D를 그리는 WebGL이라는 기능이 있어요. 그런데 이걸 직접 쓰려면 삼각형 하나 띄우는 데도 수백 줄이 듭니다. GPU에 보낼 좌표를 손으로 채워 넣어야 하거든요.

three.js는 그 복잡한 부분을 감싸서 사람 말에 가까운 단어로 바꿔줍니다. "상자를 만들어라", "빛을 여기 둬라", "카메라로 여기서 봐라" 수준으로요.

이런 것들을 해줘요.

• 도형과 3D 모델 띄우기 — 상자·구 같은 기본 도형부터 남이 만든 모델 파일까지
• 조명과 그림자 — 빛 종류를 고르고 위치만 잡으면 음영이 자동으로 계산돼요
• 재질 — 금속인지 유리인지 거친 표면인지 값 몇 개로 정합니다
• 카메라와 애니메이션 — 시점을 옮기고 매 프레임 회전시키는 것
• 마우스로 돌려보기, 후처리 효과 — 확대·회전, 빛번짐 같은 효과

무엇보다 설치가 필요 없어요. 웹페이지 하나면 끝이라 링크만 보내면 상대가 바로 봅니다. 데모 영상이 그렇게 잘 도는 이유예요.

뼈대는 세 개뿐이에요

장면, 카메라, 렌더러. 이 셋이면 화면이 나옵니다.

import * as THREE from 'three';
// 장면 = 물건을 담아두는 3D 공간이에요
const scene = new THREE.Scene();
// 카메라 = 어디서 바라볼지 정하는 눈이에요
const cam = new THREE.PerspectiveCamera(45, 16/9, .1, 100);
cam.position.set(4, 3, 5);
cam.lookAt(0, 0, 0);
// 렌더러 = 화면에 그려주는 붓이에요
const r = new THREE.WebGLRenderer({ antialias: true });
r.setSize(800, 450);
document.body.appendChild(r.domElement);
// 상자를 하나 만들어 장면에 넣어요
scene.add(new THREE.Mesh(
  new THREE.BoxGeometry(1.3, 1.3, 1.3),
  new THREE.MeshStandardMaterial({ color: 0x8d6bff })
));
// 빛이 없으면 아무것도 안 보입니다
scene.add(new THREE.AmbientLight(0xffffff, 1.1));
// 이 줄이 실제로 한 장을 그려요
r.render(scene, cam);

이 뼈대 위에 막대 12,100개를 얹어 실제로 돌려본 결과예요.

막대 하나하나가 따로 움직입니다. 이게 가능한 건 인스턴싱 덕분이에요. 같은 모양을 수만 개 그릴 때 하나씩 명령을 보내는 대신 한 번에 넘기는 방식인데, three.js에서는 InstancedMesh로 씁니다. 이런 게 브라우저에서 부드럽게 돌아가니까 데모 영상이 눈길을 끄는 거예요.

위 장면은 r185(0.185.1, 7월 1일 배포)로 그렸습니다.

AI랑 유독 잘 맞아요

결과가 눈에 바로 보이거든요. 코드가 틀리면 화면이 이상해지니 고쳐달라고 말하기 쉽고, AI도 뭘 고쳐야 할지 알기 쉬워요.

실제로 지난해 열린 바이브 코딩 게임잼에는 1,000편 넘는 게임이 출품됐어요. 규칙이 "코드의 80% 이상을 AI가 쓸 것"이었고, 심사위원에는 three.js를 만든 리카르도 카베요도 있었습니다.

다만 옛날 코드가 잘 나와요

three.js는 버전이 올라가며 이름이 꽤 바뀌었어요. 인터넷 예제 대부분이 구버전이라 AI도 그걸 배워 그대로 뱉습니다. r185에 실제로 남아 있는지 하나씩 확인해봤어요.

전부 지금은 없는 이름이라 실행하자마자 오류가 나거나 색이 이상해져요. AI가 옛날 버전으로 코드를 짜는 문제가 3D에서 특히 심합니다.

시킬 때 이 한 줄을 붙여보세요.

three.js r185 기준으로 작성해줘. Geometry나 outputEncoding처럼 없어진 API는 쓰지 마.

3D 만들어보신 분 계세요? 카톡 오픈채팅 ⚡ AI랑 코딩하는 사람들에 자랑해주세요.

참고

• three.js 공식 사이트
• 바이브 코딩 게임잼
• three 배포 이력 (npm)