three.js 입문: Claude 바이브코딩으로 3D 교량 만들기 [교량 BIM 바이브코딩 1편]

구조 설계를 하다 보면 "이 교량을 3D로 바로 돌려볼 수 있으면 좋겠다"는 생각이 자주 듭니다. 그런데 레빗이나 테클라 같은 상용 프로그램은 무겁고 비싸고, 간단한 형상 하나 확인하려고 켜기엔 부담스럽습니다.

그래서 요즘은 웹 브라우저 + three.js + AI(Claude) 조합으로 구조물을 직접 코딩해서 만들고 있습니다. 코딩을 잘 몰라도 됩니다. 원하는 모양을 말로 설명하면 AI가 코드를 써주고, 저는 그걸 브라우저에서 열어보기만 하면 됩니다. 이렇게 AI에게 설명하면서 코드를 만드는 방식을 요즘 바이브 코딩(vibe coding)이라고 부릅니다.

이번 연재는 구조기술자가 AI와 three.js로 교량 3D 모델을 만드는 과정을 10편에 걸쳐 정리합니다. 1편에서는 준비물과 첫 결과물까지 가보겠습니다.

 

three.js가 뭔가요?

---

three.js는 웹 브라우저에서 3D 그래픽을 그려주는 자바스크립트 라이브러리입니다. 브라우저의 WebGL 기능을 쉽게 쓸 수 있게 감싸준 도구라고 보면 됩니다.

• 설치가 필요 없습니다. HTML 파일 하나에 코드를 넣고 크롬이나 엣지로 열면 바로 3D가 보입니다.
• 무료입니다. 오픈소스 라이브러리라 라이선스 비용이 없습니다.
• 공유가 쉽습니다. 파일 하나만 보내면 상대방도 브라우저로 바로 볼 수 있습니다.

구조 엔지니어 입장에서 가장 좋은 점은 치수를 숫자로 다룬다는 것입니다. 경간, 폭, 거더 높이를 변수로 두면 숫자만 바꿔서 모델이 바뀝니다. 우리가 엑셀로 구조계산하던 방식과 똑같습니다.

 

준비물

---

• 웹 브라우저 (크롬, 엣지 등)
• AI 채팅 서비스 (저는 Claude를 씁니다. ChatGPT 등 다른 AI도 같은 방식으로 할 수 있습니다)
• 메모장 또는 코드 편집기 (VS Code를 추천하지만 윈도우 메모장으로도 충분합니다)

이게 전부입니다. 프로그램 설치나 서버 설정은 필요 없습니다.

 

Claude에게 첫 요청하기

---

처음 요청할 때 중요한 건 무엇을, 어떤 치수로, 어떤 형태의 파일로 원하는지 구체적으로 말하는 것입니다. 저는 이렇게 요청했습니다.

three.js로 단순한 강거더교 3D 모델을 만들어줘.
- HTML 파일 하나로 만들고, three.js는 CDN에서 불러와줘
- 전체 길이 40m, 바닥판 폭 10m, 두께 0.25m
- 강거더 3개, 높이 1.8m, 간격 3.5m
- 양 끝에 교각 2개, 높이 7m, 위에 코핑 추가
- 마우스로 돌리고 확대할 수 있게 해줘
- 치수는 코드 위쪽에 변수로 모아주고, 각 부분에 한글 주석 달아줘

마지막 두 줄이 중요합니다. 치수를 변수로 모아달라고 하면 나중에 숫자만 고치면 되고, 한글 주석을 요청하면 코드를 몰라도 어디가 무엇인지 읽을 수 있습니다.

 

AI가 만들어준 코드

---

아래가 실제로 받은 코드를 조금 정리한 것입니다. 전부 이해할 필요는 없고, 주석만 훑어보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>three.js 교량 첫 모델</title>
  <style>
    body { margin: 0; overflow: hidden; background: #e9eef3; }
  </style>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.1/examples/jsm/"
      }
    }
  </script>
</head>
<body>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 1. 장면, 카메라, 렌더러
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xe9eef3);

const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(30, 20, 32);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 2. 조명
scene.add(new THREE.HemisphereLight(0xffffff, 0x8899aa, 1.2));
const sun = new THREE.DirectionalLight(0xffffff, 1.5);
sun.position.set(20, 30, 10);
scene.add(sun);

// 3. 치수 (단위: m)
const span = 40;       // 교량 전체 길이
const width = 10;      // 바닥판 폭
const girderH = 1.8;   // 거더 높이
const pierH = 7;       // 교각 높이

// 4. 재료
const concrete = new THREE.MeshStandardMaterial({ color: 0xb8bcc2 });
const steel = new THREE.MeshStandardMaterial({ color: 0x3f6e9e, metalness: 0.3, roughness: 0.5 });

// 박스 하나를 만들어 장면에 넣는 함수
function box(w, h, d, mat, x, y, z) {
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), mat);
  mesh.position.set(x, y, z);
  scene.add(mesh);
}

// 5. 바닥판
box(span, 0.25, width, concrete, 0, pierH + girderH + 0.125, 0);

// 6. 거더 3개 (간단히 박스로 표현)
for (const z of [-3.5, 0, 3.5]) {
  box(span, girderH, 0.4, steel, 0, pierH + girderH / 2, z);
}

// 7. 교각 2개 + 코핑
for (const x of [-span / 2 + 2, span / 2 - 2]) {
  box(1.5, pierH, 1.5, concrete, x, pierH / 2, 0);
  box(2.0, 0.8, width - 1, concrete, x, pierH - 0.4, 0);
}

// 8. 바닥 격자
scene.add(new THREE.GridHelper(80, 40, 0x99a3ad, 0xc9d1d9));

// 9. 마우스로 돌려보기
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, pierH, 0);
controls.update();

// 10. 화면 그리기
renderer.setAnimationLoop(() => renderer.render(scene, camera));

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});
</script>
</body>
</html>

 

실행하는 방법

---

1. 메모장을 열고 위 코드를 전부 붙여넣습니다.
2. bridge.html 이라는 이름으로 저장합니다. (메모장이라면 파일 형식을 "모든 파일"로, 인코딩을 UTF-8로 선택하세요.)
3. 저장한 파일을 더블클릭하면 브라우저에서 열립니다.

three.js를 인터넷(CDN)에서 불러오기 때문에 인터넷이 연결된 상태여야 합니다.

 

결과

---

바닥판, 강거더 3개, 교각 2개로 이루어진 단순한 교량이 나옵니다. 마우스 왼쪽 버튼으로 드래그하면 회전, 휠로 확대·축소, 오른쪽 버튼으로 이동할 수 있습니다. 아래에서 올려다보면 거더 3개가 나란히 있는 것도 확인할 수 있습니다.

 

숫자만 바꿔보기

---

코드 위쪽의 치수 부분을 보면 이렇게 되어 있습니다.

const span = 40;       // 교량 전체 길이
const width = 10;      // 바닥판 폭
const girderH = 1.8;   // 거더 높이
const pierH = 7;       // 교각 높이

span을 60으로, pierH를 12로 바꾸고 저장한 뒤 브라우저를 새로고침해 보세요. 더 길고 높은 교량으로 바로 바뀝니다. 이게 앞으로 다룰 파라메트릭 모델링의 시작입니다.

 

아직 부족한 점

---

구조를 하시는 분이라면 바로 보이실 겁니다. 거더가 I형이 아니라 직사각형 박스이고, 교각이 바닥판 끝이 아니라 안쪽에 있고, 받침도 없습니다. 1편의 목표는 "AI에게 말로 설명해서 3D가 나온다"를 경험하는 것이라 일부러 단순하게 두었습니다. 이 부분들은 연재를 진행하면서 하나씩 고쳐 나가겠습니다.

 

다음 편 예고

---

2편에서는 이 코드를 처음부터 다시, 박스 하나를 띄우는 가장 작은 예제로 쪼개서 three.js의 기본 구조(장면·카메라·렌더러)가 어떻게 동작하는지 살펴보겠습니다. 이후에는 I형 거더 단면 만들기, 파라메트릭 교량 생성, AI 코딩 디버깅 요령까지 이어집니다.

따라 해보시다가 막히는 부분이 있으면 댓글로 남겨주세요.

 

관련 글

---

     → [교량 BIM 바이브코딩 2편] three.js 기초: 장면·카메라·렌더러

     → [교량 BIM 바이브코딩 3편] OrbitControls·조명·그림자

     → [교량 BIM 바이브코딩 4편] AI 코딩 프롬프트 작성법: Claude에게 3D 모델 정확히 요청하기

     → [교량 BIM 바이브코딩 5편] three.js ExtrudeGeometry: I형 거더 단면 3D 모델링

     → [교량 BIM 바이브코딩 6편] three.js 파라메트릭 모델링: 슬라이더로 바뀌는 교량

     → [교량 BIM 바이브코딩 7편] three.js 교량 BIM 모델: 클릭하면 속성이 나오는 부재 조립

     → [교량 BIM 바이브코딩 8편] three.js 곡선교 모델링: 곡선 반경 R과 편경사로 휘는 교량