공부 방향

• Unity와 비교하며 공부 진행

핵심 차이 (중요도 높음)

• GameObject vs Scene Grpah

  • Unity : GameObject + Component 구조
  • Three.js : Object 3D 기반 계층 구조

• 핵심 포인트

  • Three.js는 컴포넌트 시스템이 없음
  • 직접 구조를 설계 해야함

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  

  • Unity 처럼 MonoBehaviour를 붙이는 구조가 아니라 “객체 + 로직 직접 연결” 방식

• Update 루프 직접 관리

  • Unity

    void Update()
    

  • Three.js

  function animate() {
    requestAnimationFrame(animate);
  }
  

  • 차이 핵심
  • 엔진이 없음 → 직접 게임 루프 관리
  • deltaTime도 직접 계산해야 함

렌더링 파이프라인 이해

• 기본구조

  scene
  camera
  rnderer
  

  • Unity랑 대응시
    • Scene = Scene
    • Camera = Camera
    • Renderer = (Unity 내부 처리)

• WebGL 기반이라 “저수준” 에 가까움
  • Draw call 관리 체감됨
  • material, shader 영향 큼
  • Material 종류
    • MeshBasicMaterial
    • MeshStandardMaterial (PRB 핵심)
  • Light
    • DirectionalLight
    • PointLight
  • Shadow 설정

좌표계 & 카메라 감각 (초반에 많이 틀림)

• 좌표계
  • Unity : Left-handed
  • Three.js : Right-handed
• 결과
  • z 방향 반대
  • 회전 감각 다름

• 카메라 컨트롤

  • Unity : Cinemachine 등이 있음

  • Three.js : 직접 구현 or Util 사용

    OrbitControls
    

    • import 로 불러오기

      import{
      	OrbitControls
      	}from 'three/eamples/jsm/controls/OrbitControls.js';
      

    • OrbitControls 추가하기

      // OrbitControls 추가
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.minDistance = 2;
      controls.maxDistance = 2;
      controls.maPolarAngle = Math.PI / 2;
      controls.update();
      

• Update

  • 마지막으로 animate 함수 안에 넣어서 업데이트 한다. 이제 화면 속 3D 공간을 마우스로 자유롭게 움직일 수 있음. Click & Drag를 하면 화면을 회전 시킬 수 있고, 마우스 휠을 움직이면 줌인 줌아웃이 가능

  function animate(){
  	requestAnimationFrame(animate);
  	controls.update();
  	renderer.render(scene, camera)
  }
  animate();
  

리소스 관리 (웹 특화 포인트)

• Unity에서는 별로 신경 안 쓰던 부분

• 비동기 로딩

  GLTFLoader
  TextureLoader