🚀 물리 놀이터 3D

1. Three.js가 뭐예요?

Three.js(쓰리제이에스)는 웹브라우저 안에서 3D 그림을 그릴 수 있게 해주는 무료 도구 상자예요. 누구나 가져다 쓸 수 있게 공개되어 있는 자바스크립트 라이브러리(= 미리 만들어 둔 기능 모음)랍니다. 게임 프로그램을 따로 설치하지 않아도, 인터넷 창만 있으면 3D가 움직이는 이유가 바로 이것 때문이에요.

2. 브라우저는 3D를 어떻게 그릴까요?

브라우저 안에는 WebGL이라는 기능이 들어 있어요. 이건 컴퓨터의 그래픽카드(GPU)에게 "여기에 삼각형을 몇 백만 개 그려줘!" 하고 직접 부탁하는 통로예요. 그런데 WebGL에게 말을 걸려면 아주 복잡한 명령이 필요합니다. Three.js는 그 어려운 부분을 대신 처리해 주는 통역사 같은 역할을 해요.

내가 쓴 코드  →  Three.js  →  WebGL  →  그래픽카드(GPU)  →  화면

3. 3D 장면을 만드는 5가지 재료

연극 무대를 만든다고 생각하면 쉬워요.

• Scene (무대) — 물체들이 놓이는 3차원 공간. 여기에 모든 것을 올려놓아요.
• Camera (카메라) — 무대의 어디를 어느 방향으로 볼지 정해요. 마우스를 끌면 이 카메라가 돕니다.
• Light (조명) — 빛이 없으면 아무것도 안 보여요. 태양빛·주변광 등을 놓습니다.
• Mesh (물체) — Geometry(모양) + Material(재질·색) 두 개를 합쳐서 만들어요. 예: 공 모양(SphereGeometry) + 노란 금속 느낌(Material) = 포탄
• Renderer (화가) — 1초에 수십 번 "지금 카메라에 보이는 장면"을 그림으로 그려냅니다.

// Three.js 코드는 이렇게 다섯 줄이면 시작돼요
const scene    = new THREE.Scene();            // ① 무대
const camera   = new THREE.PerspectiveCamera(); // ② 카메라
const renderer = new THREE.WebGLRenderer();     // ③ 화가
scene.add(new THREE.DirectionalLight());        // ④ 조명
scene.add(new THREE.Mesh(geometry, material));  // ⑤ 물체

4. 어떻게 "움직이는" 걸까요?

사실 3D 화면은 아주 빠르게 넘기는 그림책이에요. 1초에 약 60번, 물체의 위치를 조금씩 바꾼 뒤 다시 그리는 것을 반복합니다(애니메이션 루프). 이 웹앱은 여기에 더해서, 물리 계산은 정확히 1/120초 간격으로 따로 계산해요. 그래야 빠른 컴퓨터든 느린 컴퓨터든 실험 결과가 똑같이 나오거든요.

5. 이 웹앱 어디에 쓰였나요?

• 🎯 대포·포탄 → CylinderGeometry, SphereGeometry
• 🎯 하얀 점선 궤적 → Line + LineDashedMaterial
• 💥 충돌하는 공 → SphereGeometry + 임팩트 RingGeometry
• 🎢 롤러코스터 트랙 → CatmullRomCurve3 + TubeGeometry
• 🪐 우주의 별들 → Points (점 수천 개를 한 번에)
• 🪐 항성의 빛무리 → Sprite + 직접 그린 CanvasTexture
• 🏎️ 자동차와 도로 → BoxGeometry + 직접 만든 도로 BufferGeometry
• 🚀 우주선과 게이트 → ConeGeometry, TorusGeometry, ArrowHelper
• 🚆 기차 침목 수백 개 → InstancedMesh (한 번에 찍어내기)
• 🚆 하늘·그림자 → CanvasTexture 하늘돔 + shadowMap
• 🖱️ 마우스로 시점 돌리기 → OrbitControls

6. 더 알아보고 싶다면

공식 홈페이지 threejs.org 에 들어가면 수백 개의 예제를 직접 만져볼 수 있어요. 이 웹앱은 설치 없이 CDN(인터넷에 올라와 있는 파일을 바로 불러오는 방법)으로 Three.js r166 버전을 사용하고 있습니다.