threejs로 눈👀 만들기

💡 threejs에 대한 기초적인 지식이 있으신 분들이 읽어보는 것을 권장합니다!

threejs를 공부해보기로 했다

어렸을 때 (라고 해봤자 고작 대학생 때까지) 3D로 된 게임을 즐겨했었다.
심즈라던가 퍼피레드 라던가 아바타를 사용해서 상호작용을 하는게 재미있었다. 그래서 이 아바타는 어떻게 동작하는 걸까 관심을 가지게 되고, 브라우저에서 모델을 구현할 수 있는 threejs를 공부해보기로 했다.

물론 게임에서 아바타를 구현하려면 모델을 게임엔진으로 가져와 렌더링하기 때문에 게임엔진을 공부해야하지 않을까?생각했지만, 게임 엔진까지 공부하기에는 시간이 부족하고, 브라우저에서 간단한 모델은 충분히 Three.js로 구현할 수 있기 때문에 threejs로 결정했다. (사실 인텔 맥을 쓰고 있어 유니티같은 게임엔진을 조금만 돌려도 발열 이슈 때문에 threejs를 선택했다는 슬픈 이야기가 있다)

뭘 만들까?

공식문서나 동영상강의로 상자나 원, 원뿔 등등은 많이 만들어 봤고 이제 이걸 응용해보고 싶었다. 하지만 응용한다고 해서 내가 정교한 아바타를 만들 수 있는 것도 아니었기 때문에 우선 깜박이는 눈부터 만들어보기로 했다.
다음 두 가지는 구현해보고 싶었다.

• 마우스를 움직이면 눈동자도 따라서 움직인다.
• 눈꺼풀이 랜덤하게 깜박인다.(현재 미구현)

떠올린건 디즈니의 올라프 눈처럼 눈을 만들어보고 싶어, 그림을 그려보았다.
전혀 올라프 같은 눈이 아니라서 저작권에는 안 걸릴 듯하다.

만들어 보자

사람이라는 객체가 머리 + 몸통 + 팔 + 다리 가 합쳐져 만들어지듯, 깜박이는 눈을 구현하기 위해서는 아래와 같은 부품들이 필요하다.

이것들을 이제 threejs + typescript로 구현해보려 한다.

기본 구성

기본적으로 threejs에서 물체를 표현하기 위해서는 장면(Scene), 모델(Model), 조명(Light), 카메라(Camera), 렌더러(Renderer)가 필요하다.
스튜디오에서 사진을 찍고, 현상하는 것과 비슷하다고나 할까?

여기서는 class로 구현했으며 최종 코드는 맨 아래를 참조하면 된다.

먼저 class의 생성자를 통해 렌더러, 장면, 카메라, 조명, 모델을 설정해준다.

class App {
  private domApp: Element;
  private renderer: THREE.WebGLRenderer;
  private scene: THREE.Scene;
  private camera?: THREE.PerspectiveCamera;
  private light?: THREE.Light;
  /**
  * 렌더러, 장면, 카메라, 조명, 모델 설정
  */
  constructor() {
    this.domApp = document.querySelector("#app")!;
    this.renderer = new THREE.WebGLRenderer();
    this.domApp.appendChild(this.renderer.domElement);
    
    this.scene = new THREE.Scene();
    this.setupCamera();
    this.setupLight();
    this.setupModels();
  }
}

new App();

카메라를 설정한다.
PerspectiveCamera를 사용해 3D이미지의 원근감을 나타낼 수 있도록 해준다.

  private setupCamera() {
    const domApp = this.domApp;
    const width = domApp.clientWidth;
    const height = domApp.clientHeight;

    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
    this.camera.position.set(0, 0, 4.5);
  }

조명을 설정한다.
AmbientLight로 전체적인 조명을 설정했더니 심심해보여서, DirectionalLight로 위에서 조명을 켜서 물체에 그림자가 보이도록 설정했다.

// 환경광 (전체적인 조명)
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // 약간의 조명
    this.scene.add(ambientLight);
  }
  
// 방향성 조명 (그림자를 생성)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 5, 0);
    this.scene.add(directionalLight);

렌더러나 카메라는 창 크기가 변경될 때마다 크기에 맞춰 속성값을 재설정해줘야 하므로, 이벤트 리스너에 resize이벤트를 등록한다.
처음 시작할 때도 화면 위치에 맞게 리사이즈되도록, resize메서드를 한번 더 실행해준다.
마지막으로 setAnimationLoop를 사용해 연속해서 render메소드를 실행하여 애니메이션을 적용한다.

💡 setAnimationLoop vs requestAnimationFrame
setAnimationLoop은 threejs의 내장함수로 애니메이션을 처리하는데 쓰인다. setAnimationLoop도 내부적으로는 requestAnimationFrame을 이용해서 구현되어 있기 때문에 어느쪽이든 사용해도 상관없지만, WebXR을 사용하는 경우 반드시 setAnimationLoop를 사용해야한다.

세부 구현에 대한 설명은 주석처리 한 곳에서 확인할 수 있다.

constructor() {
    ...,
    this.setupEvents();
}

private setupEvents() {
	// resize안에서 this가 가리키는 객체가 이벤트 객체가 아닌 app클래스의 객체가 되도록 해준다.
    window.addEventListener("resize", this.resize.bind(this));
    this.resize();
    this.renderer.setAnimationLoop(this.render.bind(this));
}

private resize() {
    // 1. DOM 요소 크기 가져오기
    const domApp = this.domApp;
    const width = domApp.clientWidth;
    const height = domApp.clientHeight;

    // 2. 카메라의 aspect 비율을 새로 계산
    const camera = this.camera;
    if (camera) {
      camera.aspect = width / height;
      // 변경된 비율을 업데이트
      camera.updateProjectionMatrix();
    }

    // 렌더링할 영역의 높이와 너비를 변경된 크기에 맞게 설정
    this.renderer.setSize(width, height);
}

private render() {
  	// 랜더러가 장면을 카메라의 시점으로 렌더링한다.
    this.renderer.render(this.scene, this.camera!);
}

여기까지 하고 실행하게되면, 화면에는 검은 화면만 보이게 된다.
왜냐면 장면 안에 모델이 없기 때문이다.
이제부터 본격적으로 '눈'만들기에 들어가보자

눈 만들기

눈을 구현하기 위해서는 눈을 구성하는 요소인 흰자, 검은자(동공), 반사광, 눈커풀이 필요하다.
이것들을 하나하나 구현해 보겠다.

우선 위치 설정을 도와줄 헬퍼를 하나 만들어준다.

private setupModels() {
  const axisHelper = new THREE.AxesHelper(10);
  this.scene.add(axisHelper);
}

여기서 카메라 위치가 z축과 평행하게 위치해 있으므로 화면에 보이는 것은 x축, y축이다.

그리고 각 요소들을 그룹화 해주기 위해서 Group인스턴스를 선언한다.

private setupModels() {
  ...
  this.eyeGroup = new THREE.Group();
}

흰자는 우선SphereGeometry를 이용해서 구 형태를 베이스로 잡고, y축의 크기를 늘려서 타원형태를 띄도록 만들었다.
MeshStandardMaterial을 사용해서 조명의 영향을 받는 질감을 선택하고, 색도 설정해줬다.
마지막으로 앞서 만들어 뒀던 그룹에 흰자를 추가하고, 장면에 그룹을 추가한다.

    // 흰자 (타원)
    const whiteGeometry = new THREE.SphereGeometry(1, 32, 32);
    whiteGeometry.scale(1, 1.2, 1);// 타원 만들기
    const whiteMaterial = new THREE.MeshStandardMaterial({
      color: 0xffffff, // 흰색
    });
    const whiteMesh = new THREE.Mesh(whiteGeometry, whiteMaterial);

    this.eyeGroup.add(whiteMesh);
    this.scene.add(this.eyeGroup);

이렇게 만들고 실행하면, 화면에 드디어 계란 형태의 흰자 모델이 보여지게된다.

다음으로 검은자를 구현해보겠다.
흰자를 3D로 표현했던거와 달리 검은자는 흰자 위에 덮여있는 막 같은 것이라 생각했기 때문에 2D로 구현했다.
CircleGeometry로 원을 베이스로 잡은 다음 타원형으로 만들고,MeshBasicMaterial로 검은색을 넣어줬다.
마지막으로 동공이 약간 앞쪽에 있도록 위치를 조정해주고, 그룹안에 넣어주었다.

	// 검은자 (큰 구)
    const pupilGeometry = new THREE.CircleGeometry(0.5, 32, 32);
    pupilGeometry.scale(1, 1.2, 1);
    const pupilMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
    const pupilMesh = new THREE.Mesh(pupilGeometry, pupilMaterial);
    pupilMesh.position.z = 1; // 동공이 약간 앞쪽에 있도록 위치 조정
    
    this.eyeGroup.add(pupilMesh);

여기까지 하면 검은자가 표현된다. (조금 무섭게!)

다음으로 반사광이다.
원래는 동공만을 대상으로 Raycaster를 설정해서 PointLight를 주고싶었지만, 잘 되지 않아 일단은 꼼수로 새로운 원을 하나 추가하기로 했다.

const reflectionGeometry = new THREE.CircleGeometry(
      0.05,
      32,
      32
    );
    const reflectionMaterial = new THREE.MeshBasicMaterial({
      color: 0xffffff,
    });
    const reflectionMesh = new THREE.Mesh(
      reflectionGeometry,
      reflectionMaterial
    );
    reflectionMesh.position.set(0.1, 0.1, 2); // 살짝 위로 올려서 배치

    this.eyeGroup.add(reflectionMesh);

아래처럼 반사광이 추가되었다.

이제 마우스를 움직이면 눈동자가 따라다니는 동작을 구현해보겠다.
눈동자가 마우스를 따라다니도록 하려면,
1. 마우스 포인터 좌표가 있어야 하고,
2. 눈동자의 움직임을 마우스 포인터 좌표에 맞춰야 한다.

1번부터 차근차근 구현해보자.

마우스 포인터의 좌표는 mousemove 이벤트를 사용해 쉽게 구할 수 있지만, threejs에서 사용하는 좌표는 canvas등 HTML(2D)에서 사용하는 좌표랑 다르다.

threejs의 기반인 WebGL에서 화면의 좌표는 NDC(Normalized Device Coordinates) 좌표계를 사용하는데, canvas등 HTML(2D)에서 사용하는 좌표와의 차이점은 아래와 같다.

HTML(2D)에서 X좌표는 (0,0)에서 (w,0)으로 나타내고, Y좌표는 (0,0)에서 (0,h)으로 나타낸다.

NDC 좌표에서 X 좌표는 -1 (왼쪽 끝)에서 +1(오른쪽 끝)으로 나타내며, Y좌표는 -1(아래 끝)에서 +1(위쪽 끝)으로 나타낸다. Z 좌표는 일반적으로 0에서 1, 또는 -1에서 1범위로 사용되지만, 통상 2D 평면에서는 생략된다.

따라서 2D에서 사용하는 좌표를 다음과 같이 NDC 좌표로 바꾸는 작업이 필요하다.

1. 브라우저 창 기준의 마우스 좌표를 DOM 요소 기준의 상대 좌표로 변환
2. canvas 너비/높이로 나눠 0에서 1 범위로 정규화
3. NDC범위(−1에서 +1 범위)로 바꾸기 위한 계산

private mouseMove(event: MouseEvent) {
  event.preventDefault();
  // HTML에서 사용하는 좌표를 NDC좌표로 변환
  const rect = this.renderer.domElement.getBoundingClientRect();
  this.mousePosition.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  this.mousePosition.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
}

이제 바뀐 좌표를 가지고, 눈동자의 위치를 업데이트 해주면 된다.

private mouseMove(event: MouseEvent) {
    ...
    this.eyeGroup!.children[1].position.x = this.mousePosition.x;
    this.eyeGroup!.children[1].position.y = this.mousePosition.y;
  }

그리고 해당 이벤트를 mousemove에 바인딩해준다.

private setupEvents() {
  window.addEventListener("mousemove", this.mouseMove.bind(this));
  ...
}

여기까지 하면 검은자가 마우스 포인터를 따라다니며 움직이게 된다.
하지만 마우스가 눈 밖으로 나가는 경우 검은자도 눈 경계 밖으로 나가버리는 무서운 이슈가 생긴다..

이슈를 해결하기 위해서는 검은자의 움직임을 제한하여 흰자 밖으로 벗어나지 않게 해야 했다.
GPT선생님께 물어보니, threejs에서는 내장된 MathUtils의 clamp를 사용해 현재 마우스 좌표 값을 새로운 범위 내의 값으로 매핑시킬 수 있었다.

private mouseMove(event: MouseEvent) {
   ...
  // 흰자 안에서 검은 눈동자가 움직일 수 있는 경계
  // (임시) - 타원형이므로 정확한 반지름이 아니다.
  this.pupilLimit = this.WHITE_RADIUS - this.PUPIL_RADIUS; 

  const pupilX = THREE.MathUtils.clamp(
    this.mousePosition.x * 0.2,
    -this.pupilLimit,
    this.pupilLimit
  );
  // 타원형이므로 세로가 길기 때문에 1.2를 곱함
  const pupilY = THREE.MathUtils.clamp(
    this.mousePosition.y * 0.2 * 1.2,
    -this.reflectionLimit,
    this.reflectionLimit
  );

  // 눈동자 위치 업데이트
  this.eyeGroup!.children[1].position.x = pupilX;
  this.eyeGroup!.children[1].position.y = pupilY;
}

이제 마우스 포인터를 브라우저 가로세로 끝까지 가져가도 검은자가 흰자 밖으로 벗어나지 않는다.

마찬가지로 반사광도 동일하게 적용해준다.

private mouseMove(event: MouseEvent) {
  ...
  // 검은 눈동자 안에서 반사광이 움직일 수 있는 경계
  // (임시) - 타원형이므로 정확한 반지름이 아니다.
  this.reflectionLimit = this.PUPIL_RADIUS - this.REPLECTION_RADIUS;

  const reflectionX = THREE.MathUtils.clamp(
    this.mousePosition.x * 0.7,
    -this.reflectionLimit,
    this.reflectionLimit
  );
  const reflectionY = THREE.MathUtils.clamp(
    this.mousePosition.y * 0.7 * 1.2,
    -this.reflectionLimit,
    this.reflectionLimit
  );

  this.eyeGroup!.children[2].position.x = reflectionX;
  this.eyeGroup!.children[2].position.y = reflectionY;
}

타원형인데 반지름이 정확하지 않다던지, 그 외 자잘한 동작 이슈들이 있지만, 일단 목표로 했던 '마우스를 움직이면 눈동자도 따라서 움직인다.'는 어찌저찌 구현했다.

두번째로 구현하고 싶었던 '눈커풀을 만들어 랜덤으로 깜박이게 한다'는 GPT선생님을 설득중이지만 구현이 잘 되지않고있다..
납득할만한 구현을 하게 되면 추가적으로 업로드하겠다.

+좋은 아이디어나 조언은 언제든지 댓글로 남겨주세요👀

reference

threejs공식문서
NDC
Typescript로 즐기는 Threejs