Babylon.js 기초 3일차 : ArcRotate / Free / Universal 카메라 3종 쉽게 비교하기

한눈에 보는 요약

Babylon.js에서 “무엇을 어떻게 보여줄까?”를 결정하는 핵심은 카메라 선택입니다. ArcRotate, Free, Universal 카메라는 각각 용도와 조작 방식이 달라서 프로젝트 성격에 맞게 골라야 합니다.

ArcRotate 카메라는 특정 모델을 중심으로 빙글빙글 돌려 보는 “뷰어용 카메라”로, 제품 뷰어나 데이터 시각화에 적합합니다.

Universal 카메라는 W/A/S/D로 걷고, 마우스로 둘러보는 1인칭·게임용 카메라입니다. Babylon.js에서 기본으로 가장 많이 쓰이는 카메라이기도 합니다.

Free 카메라는 구조는 단순하지만, 기본적인 자유 이동 카메라로 학습용·실험용에 좋습니다. 세 카메라를 한 장면에 넣고 버튼으로 전환하는 데모를 만들면 차이가 훨씬 쉽게 이해됩니다.

1. 카메라 3종 기본 개념
2. ArcRotate / Free / Universal 카메라 비교
3. 키보드·마우스 컨트롤과 줌/회전 제한 이해하기
4. 카메라 전환 버튼이 있는 Babylon.js 데모 코드
5. 실습 단계: 처음부터 따라 만들기
6. 추가로 생각해볼 점
7. 블로그 최적화 정보

핵심 포인트

ArcRotateCamera는 “어떤 한 점(모델)”을 중심으로 빙글빙글 도는 궤도형 카메라입니다. 제품 뷰어나 건축 모델을 돌려 볼 때 적합합니다.
UniversalCamera는 1인칭 시점(FPS)용으로, 키보드(WASD)와 마우스, 터치, 게임패드 등 다양한 입력을 지원하는 범용 카메라입니다.
FreeCamera는 가장 단순한 자유 이동 카메라로, 구조가 이해하기 쉬워 기초 학습과 간단한 데모에 적합합니다.
세 카메라는 모두 attachControl을 통해 마우스·키보드 입력을 받을 수 있고, 최대/최소 줌 거리, 회전 각도, 이동 속도 등을 옵션으로 제한할 수 있습니다.
실습에서는 한 씬에 카메라 3개를 만들어 두고, HTML 버튼 또는 Babylon GUI 버튼으로 scene.activeCamera만 바꾸어 “카메라 전환 데모”를 구성합니다.

1. 카메라 3종 기본 개념

1-1. ArcRotateCamera: 모델 뷰어용 궤도 카메라

ArcRotate 카메라는 “어떤 한 점”을 중심으로 원을 그리면서 돌아가는 카메라입니다. 흔히 3D 모델 뷰어에서 마우스로 드래그해서 제품을 돌려 보는 느낌을 떠올리면 이해가 쉽습니다.

중심(target)을 기준으로 카메라가 공전합니다.
alpha, beta: 카메라의 수평·수직 회전 각도(구면 좌표계의 각도)입니다.
radius: 중심점으로부터의 거리(줌 인·줌 아웃).
마우스로 드래그하면 회전, 휠로 스크롤하면 줌 인/아웃이 기본 동작입니다.

즉, “한 물체를 중심으로 돌려가며 살펴보고 싶다”면 ArcRotate 카메라를 선택하는 것이 가장 자연스럽습니다.

1-2. UniversalCamera: 1인칭(FPS)·게임용 표준 카메라

Universal 카메라는 “사람의 눈”이라고 생각하면 이해하기 쉽습니다. W/A/S/D 키로 앞뒤좌우로 이동하고, 마우스를 움직여 주변을 둘러보는 전형적인 1인칭 시점입니다.

Babylon.js에서 “기본 카메라”로 가장 널리 쓰이는 타입입니다.
키보드, 마우스, 터치, 게임패드 등 거의 모든 입력 장치를 지원합니다.
FPS 게임, 3D 투어(전시관, 건물 내부 탐색) 등에 적합합니다.
카메라 위치를 캐릭터 머리 위치에 붙이면 전형적인 FPS 카메라가 됩니다.

1-3. FreeCamera: 가장 단순한 자유 이동 카메라

Free 카메라는 구조가 매우 간단한 카메라입니다. 기본 모양은 Universal과 거의 비슷하지만, 입력 플러그인 구성이나 세부 기능이 적어 “학습용”으로 이해하기 좋습니다.

가볍고 단순해서 테스트용 씬, 샘플 코드에 자주 사용됩니다.
ArcRotate처럼 특정 타깃을 중심으로 도는 것이 아니라, 그냥 공간 속을 자유롭게 이동합니다.
필요하면 개발자가 직접 키보드·마우스 입력을 커스터마이징하기 좋습니다.

2. ArcRotate / Free / Universal 카메라 비교

실제 사용할 때 어떤 카메라를 골라야 할지 한 번에 보기 위해, 세 카메라를 표로 정리해 보겠습니다.

비교 표

아래 표는 각 카메라의 대표 용도, 조작 방식, 장단점을 한눈에 비교한 것입니다.

카메라 타입	주요 용도	기본 조작	장점	주의할 점
ArcRotateCamera	제품 뷰어, 데이터/모델 관찰, 설계 검토	마우스 드래그로 회전, 휠로 줌, Shift+드래그로 패닝	항상 지정한 타깃을 향해 보므로 모델 관찰에 최적화	타깃을 지나치게 가까이 가면 뒤집히는 느낌이 날 수 있어 최소/최대 거리 설정 필요
FreeCamera	기본 데모, 실험용 씬, 간단한 자유 이동	키보드 이동, 마우스로 방향 회전	구조가 단순하고 이해하기 쉬워 초보자에게 적합	기본 입력이 단순해, 복잡한 게임 컨트롤에는 직접 구현이 더 필요
UniversalCamera	1인칭 게임(FPS), 3D 투어, 실감형 탐색	WASD 이동, 마우스 시점 회전, 포인터락 등 다양한 입력 지원	키보드·마우스·터치·패드까지 폭넓게 대응하는 범용 카메라	초보자에게는 옵션이 많아 다소 복잡하게 느껴질 수 있음

3. 키보드·마우스 컨트롤과 줌/회전 제한 이해하기

3-1. attachControl: 사용자 입력 연결하기

Babylon.js 카메라는 attachControl(canvas, true)를 호출해야 실제로 마우스/키보드 입력을 받습니다.

canvas: 렌더링에 사용하는 HTMLCanvasElement.
true: 기본 동작을 막는 옵션(일반적으로 true를 주어 브라우저 기본 스크롤 등을 막습니다).
ArcRotate, Free, Universal 카메라 모두에서 같은 방식으로 사용합니다.

3-2. 줌/회전 제한: 최소·최대 거리와 각도

ArcRotate 카메라에서 자주 쓰는 제한 옵션은 다음과 같습니다.

lowerRadiusLimit, upperRadiusLimit: 카메라가 타깃에 너무 가까이 붙거나 지나치게 멀어지지 않도록 줌 거리 제한.
lowerBetaLimit, upperBetaLimit: 위·아래 회전 각도를 제한해, 카메라가 객체의 뒤집힌 위치로 넘어가지 않도록 제어.

Universal/Free 카메라에서는 다음과 같은 속성으로 이동을 제어할 수 있습니다.

speed: 키보드로 이동할 때의 기본 속도.
inertia: 관성(값이 크면 카메라가 부드럽게 감속, 작으면 즉시 멈춤).
angularSensibility 또는 입력 플러그인 옵션: 마우스 감도 조절.

3-3. 기본 키보드 매핑(WASD)

Universal/Free 카메라에 기본 키보드 컨트롤을 붙이면 다음과 같이 동작하게 만들 수 있습니다.

W / ↑: 앞으로 이동
S / ↓: 뒤로 이동
A / ←: 왼쪽으로 이동(스트레이프)
D / →: 오른쪽으로 이동

이 키들은 camera.keysUp, keysDown, keysLeft, keysRight 배열에 키코드를 설정해서 원하는 대로 커스터마이징할 수 있습니다.

4. 카메라 전환 버튼이 있는 Babylon.js 데모 코드

이제 실제로 ArcRotate / Free / Universal 카메라 3개를 한 씬에 만들어 놓고, HTML 버튼으로 전환하는 예제를 보겠습니다. 이해를 돕기 위해 가장 기본적인 구조로 구성한 코드입니다.

<!-- HTML -->
<canvas id="renderCanvas" style="width:100%; height:400px;"></canvas>
<div style="margin-top:8px;">
  <button id="btnArc">ArcRotate 카메라</button>
  <button id="btnFree">Free 카메라</button>
  <button id="btnUniversal">Universal 카메라</button>
</div>

<!-- JavaScript -->
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);

const createScene = function () {
  const scene = new BABYLON.Scene(engine);

  // 기본 조명과 바닥 메쉬
  const light = new BABYLON.HemisphericLight("light", 
    new BABYLON.Vector3(0, 1, 0), scene);
  const ground = BABYLON.MeshBuilder.CreateGround("ground", 
    { width: 20, height: 20 }, scene);
  const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
  box.position.y = 1;

  // 1) ArcRotate 카메라 (모델 뷰어용)
  const arcCamera = new BABYLON.ArcRotateCamera(
    "arcCamera",
    Math.PI / 4,           // alpha
    Math.PI / 3,           // beta
    10,                    // radius
    box.position,          // target
    scene
  );
  arcCamera.lowerRadiusLimit = 5;
  arcCamera.upperRadiusLimit = 20;
  arcCamera.attachControl(canvas, true);

  // 2) Free 카메라 (단순 자유 이동용)
  const freeCamera = new BABYLON.FreeCamera(
    "freeCamera",
    new BABYLON.Vector3(0, 5, -15),
    scene
  );
  freeCamera.attachControl(canvas, true);
  freeCamera.speed = 0.5;

  // 3) Universal 카메라 (1인칭/게임용)
  const universalCamera = new BABYLON.UniversalCamera(
    "universalCamera",
    new BABYLON.Vector3(0, 2, -10),
    scene
  );
  universalCamera.attachControl(canvas, true);
  universalCamera.speed = 0.7;

  // 기본 활성 카메라를 ArcRotate로 설정
  scene.activeCamera = arcCamera;

  // 카메라 전환 함수
  function setActiveCamera(camera) {
    // 이전 카메라 입력 해제
    scene.activeCamera.detachControl(canvas);
    scene.activeCamera = camera;
    scene.activeCamera.attachControl(canvas, true);
  }

  // 버튼 이벤트 연결
  document.getElementById("btnArc").onclick = () => setActiveCamera(arcCamera);
  document.getElementById("btnFree").onclick = () => setActiveCamera(freeCamera);
  document.getElementById("btnUniversal").onclick = () => setActiveCamera(universalCamera);

  return scene;
};

const scene = createScene();

engine.runRenderLoop(function () {
  scene.render();
});

window.addEventListener("resize", function () {
  engine.resize();
});

위 코드는 HTML의 <canvas>와 세 개의 버튼을 준비한 뒤, Babylon.js에서 세 종류의 카메라를 생성해 두고 버튼 클릭 시 setActiveCamera 함수로 scene.activeCamera를 바꾸는 구조입니다. 각 카메라는 attachControl / detachControl을 통해 입력을 교체하며, ArcRotate 카메라에는 최소/최대 줌 거리 제한을 걸어 사용자가 너무 과하게 줌 인/아웃하지 못하도록 했습니다.

5. 실습 단계: 처음부터 따라 만들기

프로젝트 폴더와 기본 HTML 파일 만들기
작업용 폴더를 하나 만든 뒤, index.html 파일을 생성합니다. CDN을 사용해 Babylon.js 스크립트를 로드해도 충분합니다. 테스트용이라면 VS Code의 Live Server 확장 또는 단순한 정적 서버만으로도 실행이 가능합니다.
캔버스와 버튼 마크업 작성
<canvas id="renderCanvas">와 카메라 전환용 버튼 3개를 HTML에 배치합니다. 캔버스 높이를 400~600px 정도로 지정하면, 브라우저에서 카메라 움직임을 관찰하기에 적당합니다.
엔진·씬·기본 메쉬 생성
JavaScript에서 BABYLON.Engine과 BABYLON.Scene을 만든 후, 간단한 바닥(Ground)과 박스(Box)를 추가합니다. 이 박스는 ArcRotate 카메라의 타깃으로 사용됩니다.
ArcRotate / Free / Universal 카메라 순서대로 만들기
ArcRotate 카메라는 타깃과 초기 각도(alpha/beta), 거리(radius)를 지정하고, Free·Universal 카메라는 초기 위치만 잡아줍니다. Universal 카메라를 FPS 느낌으로 쓰고 싶다면 speed, inertia, angularSensibility 등을 조정해 보십시오.
키보드/마우스 입력 연결 및 제한 설정
각 카메라에 대해 attachControl(canvas, true)를 호출해 입력을 연결합니다. ArcRotate 카메라에는 lowerRadiusLimit, upperRadiusLimit, lowerBetaLimit 등을 지정하여 카메라가 너무 뒤집히거나 과도하게 줌 인/아웃되는 상황을 막습니다.
카메라 전환 버튼 구현
버튼 클릭 이벤트에서 scene.activeCamera를 바꾸는 함수를 호출합니다. 이때 반드시 이전 카메라에서 detachControl을 호출하고, 새 카메라에 attachControl을 다시 호출해야 입력이 꼬이지 않습니다.
추가 실험: 카메라별 느낌 비교하기
ArcRotate 상태에서 모델을 돌려 본 뒤, Free/Universal로 전환해 직접 걸어 다니듯 움직여 보십시오. 이동 속도(speed), 관성(inertia) 값을 바꾸어 보면서 “이 프로젝트에는 어떤 카메라와 세팅이 가장 어울리는지” 감을 익히는 것이 목표입니다.

추가로 생각해볼 점

실제 서비스에서는 데스크톱과 모바일에서 조작 방식이 다르므로, ArcRotate/Universal 카메라의 입력 플러그인을 커스터마이징해서 터치 제스처를 따로 튜닝하는 것이 좋습니다.
1인칭 게임에서는 카메라와 충돌(콜리전) 설정, 중력, 점프 등을 함께 구현해야 자연스러운 움직임을 표현할 수 있습니다.
카메라 전환 시 사용자가 방향 감각을 잃지 않도록, 두 카메라의 위치와 바라보는 타깃을 맞추거나, 짧은 페이드 인/아웃 애니메이션을 넣어 부드럽게 전환하는 것도 좋은 UX 방법입니다.

Babylon.js 기초 3일차 : ArcRotate / Free / Universal 카메라 3종 쉽게 비교하기