Three.js로 3D 회전목마 구현하기

3D 회전목마 구현

Three.js는 자바스크립트를 이용해서 웹페이지에 3D 오브젝트를 표현할 수 있도록 도와주는 라이브러리이다.

위의 이미지도 Three.js로 회전목마를 구현한 것인데, 그 과정을 기록해보고자 한다.🎊

 

디자인 레퍼런스로는 아래 코드펜을 참고했다.

 

 

 

 

Three.js 환경 구성

아래는 Three.js 라이브러리를 개발 환경에 맞게 추가하는 방법들이다. 이번에는 직접 라이브러리 파일을 다운로드 받아서 임포트하는 방식으로 사용했다.

 

npm 패키지로 설치하는 방법

# three.js
npm install --save three

# vite
npm install --save-dev vite

 

CDN으로 호출하는 방법

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@<version>/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
    }
  }
</script>

 

공식 홈페이지에서 다운로드하는 방법

좌측 메뉴를 보면 download 항목이 있다.

https://threejs.org/

Three.js – JavaScript 3D Library

 

 

HTML 파일과 CSS 파일 추가

웹 페이지의 기본이 되는 HTML파일을 생성한다. #container 요소 내부에는 회전목마를 그릴 Canvas가 들어가게 된다. 화면 전체를 가득차게 만들기 위해 스타일도 추가해주었다. three.js 코드를 실행하기 위한 JavaScript 파일도 생성해서 HTML 파일에 추가해주자.

<style>
  #container {width: 100%; height: 100vh;}
</style>

<div id="container"></div>

 

 

기본 구성 요소 추가 (Scene, Renderer, Camera)

Three.js의 기본 구성 요소인 Scene, Renderer, Camera를 생성했다.

class App {
  constructor() {
    const divContainer = document.querySelector("#container");
    this._divContainer = divContainer;

    const renderer = new THREE.WebGLRenderer({
      antialias: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    divContainer.appendChild(renderer.domElement);
    this._renderer = renderer;

    const scene = new THREE.Scene();
    this._scene = scene;

    this._setupCamera();

    this._renderer.render(this._scene, this._camera);
  }

  _setupCamera() {
    const width = this._divContainer.clientWidth;
    const height = this._divContainer.clientHeight;

    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
    camera.position.set(0, 15, 35);

    this._camera = camera;
  }
}

window.onload = function () {
  new App();
};

Three.js의 WebGLRenderer를 사용하여 렌더러를 생성해주었다. 이 때 antialias 옵션을 true로 설정해서 조금 더 부드러운 느낌으로 렌더링 되도록 했다.

PerspectiveCamera는 원근감을 표현하는 카메라로 '시야각', '카메라 종횡비', '카메라로부터의 거리 앞쪽', '카메라로부터의 거리 뒤쪽'을 인자로 받는다. 현재 #container 요소를 컨테이너로 사용하고 있기 때문에 종횡비는 요소의 가로/세로 값으로 계산해서 넣어주었다.

 

결과를 확인해보면 작은 검정 네모 상자가 생성된 것을 볼 수 있다. #container 요소 내부에 렌더러가 성공적으로 잘 들어갔다.

 

 

렌더러의 사이즈 조절

렌더러를 #container 요소의 사이즈에 맞추어 늘려주었다.

카메라의 종횡비를 계산하고 이에 맞추어 렌더러의 사이즈를 설정하는 resize() 메서드를 생성한다.

resize() {
    const width = this._divContainer.clientWidth;
    const height = this._divContainer.clientHeight;

    this._camera.aspect = width / height;
    this._camera.updateProjectionMatrix();

    this._renderer.setSize(width, height);
}

 

생성자에서 메서드를 실행한다. 윈도우 창의 사이즈를 조절했을 때에도 이에 맞추어 렌더러가 리사이징이 되도록 window.onresize에도 이벤트를 붙여주었다. 윈도우 창에 맞추어 렌더러의 사이즈가 늘어난 것을 확인할 수 있다.

constructor() {
    ...
    window.onresize = this.resize.bind(this);
    this.resize();
    ...
}

 

 

mesh 생성 (기둥)

 _setupModel() {
    const textureLoader = new THREE.TextureLoader();

    const core = new THREE.Object3D();
    this._scene.add(core);

    const coreMap = textureLoader.load("./images/window.png", texture => {
      texture.repeat.x = 8;
      texture.repeat.y = 5;

      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.ClampToEdgeWrapping;

      texture.offset.x = 0;
      texture.offset.y = -1.5;

      texture.magFilter = THREE.NearestFilter;
      texture.minFilter = THREE.NearestFilter;
    });
}

회전목마의 실질적인 메쉬를 만드는 로직을 담은 _setupModel() 메서드를 생성한다. core라는 3차원 객체를 만들어 주었는데, 이는 기둥 메쉬를 3차원 공간 상에 구성하는 역할을 하게 된다.

 

 

 _setupModel() {
    ...
    const coreGeometry = new THREE.CylinderGeometry(4, 4, 10, 8, 1, true);

    const coreMaterial1 = new THREE.MeshStandardMaterial({
      color: "#dbd3d3",
      metalness: 0.2,
      roughness: 0.5,
      flatShading: true,
    });
    const coreMaterial2 = new THREE.MeshStandardMaterial({
      map: coreMap,
      transparent: true,
      roughness: 1,
    });
    const materials = [coreMaterial1, coreMaterial2];
    const coreMesh = new THREE.Mesh(coreGeometry, materials);
    coreMesh.receiveShadow = true;
    coreMesh.castShadow = true;
    core.add(coreMesh);
}

Three.js의 CylinderGeometry() 메서드를 사용해서 회전목마의 기둥이 되는 원통을 만들어보자. CylinderGeometry() 메서드는 순서대로 '윗면 반지름 크기', '밑면 반지름 크기', '원통의 높이', '원통 둘레 분할 개수', '원통 높이 분할 개수', '원통 상하단 뚫림 여부', '원통 시작 각', '원뿔 연장 각'을 인자로 받는다. 원통 둘레 분할 개수에 따라 원통의 각의 개수가 정해지는데 숫자가 높을 수록 원형에 가까운 원통이 만들어진다. 회전목마의 기둥을 8각형으로 만들어주기 위해 인자는 8을 주었다.

이 기둥을 core 3차원 객체에 추가해주자.

 

 

광원 생성

이렇게 메쉬를 추가해주어도 화면상에는 아무것도 보이지 않는다. 그 이유는 scene에 존재하는 물체의 명암을 구분할 빛이 없기 때문이다. _setupLight() 메서드를 생성하여 광원을 추가해보자. 보다 더 나은 결과물을 위해 3개의 광원을 추가했다.

_setupLight() {
    const hemisphereLight = new THREE.HemisphereLight("#b0d8f5", "#ffdec1", 0.3);
    this._scene.add(hemisphereLight);

    const pointLight = new THREE.PointLight("#ffffff", 0.5);
    pointLight.position.set(0, 15, 35);
    this._scene.add(pointLight);

    const spotLight = new THREE.SpotLight("#e070bb", 0.5);
    spotLight.position.set(0, 30, 8);
    spotLight.target.position.set(0, 0, 0);
    spotLight.angle = THREE.Math.degToRad(30);
    spotLight.penumbra = 0.2;

    this._scene.add(spotLight);
    this._scene.add(spotLight.target);
}

 

광원을 추가해주면 이전에는 보이지 않았던 기둥이 보인다

 

mesh 생성 (지붕, 바닥, 목마)

지붕과 바닥, 목마는 같은 방향, 같은 속도로 회전하기 때문에 carouselStytem 3차원 객체로 묶어서 다루어 준다.

const carouselSystem = new THREE.Object3D();
this._scene.add(carouselSystem);
this._carouselSystem = carouselSystem;

 

지붕

LatheGeometry()를 사용하면 꽃병과 같이 Y축을 기준으로 대칭되는 메쉬를 생성할 수 있다. 메쉬의 시작 포인트가 0,0이라면 아래와 같이 원뿔처럼 끝이 모이는 형태를 가진다.

const hat = new THREE.Object3D();
hat.position.set(0, 10, 0);
carouselSystem.add(hat);

const hatSegment = 18; // 생성할 원주의 세그먼트의 수
const hatRadius = 10;

const points = [];
points.push(new THREE.Vector2(0.0, 0.0));
points.push(new THREE.Vector2(hatRadius, -5.0));

const hatGeometry = new THREE.LatheGeometry(points, hatSegment, 0, Math.PI * 2);
const hatMaterial = new THREE.MeshStandardMaterial({
  metalness: 0.2,
});
const hatMesh = new THREE.Mesh(hatGeometry, hatMaterial);
hatMesh.receiveShadow = true;
hatMesh.castShadow = true;
hat.add(hatMesh);

 

가랜드 

지붕에 가랜드를 달아주는 것은 CircleGeometry를 이용해서 반원을 생성하고, 지붕의 둘레에 맞게 위치 좌표를 잡아주면 간단하다. 지붕을 만들 때 사용했던 변수 hatSegment (지붕의 세그먼트 수)를 이용해서 원의 반지름 크기를 구한다면 크기를 좀 더 유동적으로 작업할 수 있다.

const garlandRadius = (Math.sin((360 / hatSegment / 2) * (Math.PI / 180)) / hatRadius) * 100;
const garlandGeometry = new THREE.CircleGeometry(garlandRadius, 24, Math.PI, Math.PI);

 

 

바닥

바닥을 구현하기 위해서는 두께감이 있으면서도 속이 빈 원기둥을 만들어야 한다. Three.js에서 이런 형태의 도형을 따로 제공하는 메서드는 없기 때문에 Shape()의 holes와 ExtrudeGeometry()를 이용해서 원하는 모양을 구현해주려고 한다.

 

먼저 Shape()를 이용해서 2d원을 만든다. 2d원에 구멍을 정의하는 paths 배열을 추가하면 아래와 같이 구멍이 뚫린 원을 생성할 수 있다.

const floorOuterRadius = 10;
const floorInnerRadius = 5;

const arcShape = new THREE.Shape();
arcShape.moveTo(floorOuterRadius * 2, floorOuterRadius);
arcShape.absarc(floorOuterRadius, floorOuterRadius, floorOuterRadius, 0, Math.PI * 2, false);
const holePath = new THREE.Path();
holePath.moveTo(floorOuterRadius + floorInnerRadius, floorOuterRadius);
holePath.absarc(floorOuterRadius, floorOuterRadius, floorInnerRadius, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);

 

위 메쉬에 ExtrudeGeometry를 이용해서 두께감을 부여하면 아래와 같이 중앙이 뚫려있는 원기둥이 만들어진다.

const floorGeometry = new THREE.ExtrudeGeometry(arcShape, {depth: 1});
floorGeometry.center();

 

목마

목마의 경우 단순히 원이나 사각형같은 도형으로 구현하기에는 어려움이 있기 때문에 Three.js의 Shape() 메서드를 사용해서 구현하기로 했다. Shape()를 이용하면 2d 평면을 정의할 수 있는데, 이 때 2d 평면을 정의하는데 필요한 좌표를 구하는 부분은 HTML5 Canvas Path Creator 사이트를 활용했다. 아래의 사이트에서 목마 이미지를 호출해서 패스를 따라 그려준다. 생성한 Shape 메쉬에 목마 이미지를 텍스쳐로 넣어주면 원하는대로 목마를 구현할 수 있다.

HTML5 Canvas Path Creator
캔버스에 선, 베지어 곡선 등을 그리면 패스를 생성하는 함수로 변환해주는 사이트
https://adriencastex.github.io/HTML5-Canvas-Path-Creator/

HTML5 Canvas Path Online Creator

 

for 문을 이용해서 배치해주면 목마도 완성이 된다.

const horses1 = new THREE.Object3D();
const horses2 = new THREE.Object3D();

horses.add(horses1);
horses.add(horses2);

this._horses1 = horses1;
this._horses2 = horses2;

for (let i = 0; i < 14; i++) {
  const horse = new THREE.Object3D();
  const horseMesh = new THREE.Mesh(horseGeometry, horseMaterial);
  if (i % 2) {
    horseMesh.position.z = 8;
    horse.rotation.y = THREE.Math.degToRad((360 / 14) * i);
    horse.add(horseMesh);
    horses1.add(horse);
  } else {
    horseMesh.position.z = 9;
    horse.rotation.y = THREE.Math.degToRad((360 / 14) * i);
    horse.add(horseMesh);
    horses2.add(horse);
  }

 

 

패스를 따고 텍스쳐를 입혀주는 과정이 어렵다면 사각형 2d 메쉬를 투명하게 바꾼 뒤에 이미지 텍스쳐를 입혀주는 방법도 가능하다. 다만 이런 방법으로 작업한다면 그림자도 사각형으로 표현되기 때문에 완성도 있는 그림자 표현이 어려워진다.

 

 

 

회전하는 모션 추가

Three.js에는 Clock이라는 클래스가 내장되어 있다. 시간에 관련된 객체이기 때문에 애니메이션에 활용해 줄 것이다.  Renderer, Camera와 함께 생성자에 Clock을 추가해준다.

constructor() {
    ...
    const clock = new THREE.Clock();
    this._clock = clock;
    ...
  }

 

애니메이션을 업데이트하는 update 함수를 추가한다. 이 함수는 시간을 인자로 받아서 애니메이션에 반영해준다. 지붕, 바닥, 목마가 함께 y축을 기준으로 회전해야하므로 _carouselSystem을 로테이션 해주었다. 이 때 목마는 물결치듯 위아래로 움직이도록 하기 위해 Math.sin을 이용해서 y축 위치를 따로 조절해주었다.

  update(time) {
    this._carouselSystem.rotation.y = -time / 2;
    this._horses1.position.y = (Math.sin((time + 1.05) * 3) + 1) / 2;
    this._horses2.position.y = (Math.sin(time * 3) + 1) / 2;
  }

 

Clock의 getElapsedTime() 메서드는 Clock이 생성된 후 몇 초가 지났는지를 반환한다. 이 시간을 update 함수를 실행할 때 파라미터로 전달한다. 이제 회전하는 목마를 확인할 수 있다.

 render() {
    const elapsedTime = this._clock.getElapsedTime();

    this.update(elapsedTime);
    this._renderer.render(this._scene, this._camera);

    requestAnimationFrame(this.render.bind(this));
  }

 

 

마우스 컨트롤러 추가 

추가적으로 OrbitControls를 사용하면 카메라를 마우스로 조절해서 회전, 줌인, 줌아웃이 가능하다. examples에서 OrbitControls를 import 해주고, 생성자에 카메라 객체와 캔버스로 사용하는 DOM 요소를 넘겨준다.

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

_setupControls() {
    new OrbitControls(this._camera, this._divContainer);
}

 

 

완성

Three.js로 구현한 회전목마

 

 

깃허브

https://github.com/sduu/canvas-sketch/tree/main/carousel

GitHub - sduu/canvas-sketch: three.js & canvas