[three.js]기본 예제로 알아보는 three.js 기본 구조

1. three.js 기본 구조

three.js로 3D 웹을 구현하기 위해 가장 기본적으로 필요한 구성 요소 및 용어는 아래와 같다.

각 구성 요소들의 관계는 다음과 같이 트리 형태로 구조화 할 수 있다.

• Renderer : 완성된 3d 화면을 브라우저에 그리는 역할을 한다.
  • Scene : 화면에 보여지는 영역. 생성한 오브젝트들을 add() 메서드를 이용해 Scene에 추가하여 화면을 구성.
    • Light: 조명. light 속성을 활용해서 다양한 빛 효과를 낼 수 있다.
    • Mesh: 물체. Geometry 객체와 Material 객체를 인자로 넘겨주면 각 형태와 표면 속성을 가진 Mesh가 생성된다.
      • Geometry : 3d 모델의 뼈대가 되는 기하학 객체. BoxGeometry, SphereGeometry 등 다양한 기본 옵션이 존재.
      • Material : 3d 모델의 표면 속성. 물체의 색상, 밝기, 재질 등을 설정할 수 있다.
  • Camera : 시야 설정. 시야각, 종횡비, 최대 거리, 최소 거리 등을 설정할 수 있다. 여러 카메라 옵션이 있는데 사람의 시선과 같은 시점을 가지는 PerspectiveCamera()가 대체로 많이 사용된다.
    • Controls : 카메라 인터랙션이 필요할 때 Controls 관련 요소들을 사용해 카메라를 제어할 수 있다.

---

2. three.js 시작 - 기초

three.js에서 제공하는 가장 기본 예제를 통해 기본 설정들을 알아보자.

1. scene과 camera 생성
   

• 화면에 보여주고자 하는 모든 오브젝트(light,mesh)는 여기서 선언한 scene에 추가해야 보여지게 된다.

  • PerspectiveCamera(
    fov(시야각, Number, 값이 클 수록 넓은 각도로 화면이 보인다.),
    aspect(종횡비, Number, 원하는 화면의 너비 / 넓이 값으로 설정하면 된다.),
    near(최소거리, Number),
    far(최대거리, Number )
    )

  • 필요에 따라 camera의 position 값을 설정할 수 있다.
    camera.position.x 처럼 각각의 축을 설정할 수도 있고,
    camera.positoin.set(x,y,z) 으로 한 번에 설정할 수도 있다.
    

2. renderer 생성
   

• renderer는 처음에 사이즈를 설정해야 한다.

  렌더링을 하고자 하는 범위의 너비와 높이를 설정해준다.

  이 코드에서는 브라우저 사이즈만큼 렌더링을 하기 때문에 브라우저 가로/세로 사이즈를 전달하고 있다.

  마지막으로 body 태그 밑으로 renderer 엘리먼트를 추가해준다.

  • render.domElement는 three.js에서 생성한 canvas 엘리먼트이다.
    따라서 꼭 body 태그가 아니라도 다른 하위 섹션의 자식 요소로 추가할 수도 있다.

3. 기본 정육면체 생성
   

• Mesh는 기본적으로 geometry와 material로 이루어진다.

  geometry 객체에는 BoxGeometry로 기본 육면체 도형을 생성하고,

  material 객체에는 MeshPhongMaterial로 초록색 재질의 표면 속성을 생성한다.

  MeshPhongMaterial은 빛을 은은하게 반사하는 재질이다. 그 외에도 여러 종류의 material이 있다.
  Material 종류 참고: https://designbase.co.kr/threejs-05/

  Mesh를 생성할 때 앞서 생성한 geometry, material을 인자로 전달하면 #00ff00색의 육면체가 생성된다.

  생성된 Mesh는 항상 scene.add() 메서드로 화면에 추가해주어야 보여지게 된다.
  

4. light 생성
   

• light를 추가한다.

  여기서 사용한 spotLight는 원뿔 형태의 조명이다.

  초기화 시 조명의 색상을 전달하고, 조명의 위치도 position 속성을 통해 설정한다.

  카메라와 동일하게 x,y,z position 값을 따로따로 설정할 수도 있다.

  조명도 scene에 추가해야 한다.
  

5. light helper 생성
   

• helper는 3d 공간 구현의 보조를 담당하는 요소이다.

  light helper 외에도 x,y,z의 방향을 보여주는 axis helper, 3d 모델의 방향을 보여주는 arrow helper, 카메라 영역을 시각화 해주는 camera helper 등 여러 helper가 존재한다.

  여기서는 조명의 방향을 파악하기 쉽도록 spotLightHelper를 사용했고, 사용된 spotLight 객체를 SpotLightHelper의 인자로 전달한다.

  마찬가지로 scene에 추가해야 helper가 보여지게 된.
  

6. 애니메이션 반복 설정
   

• 마지막으로 3d 애니메이션을 동작시킬 함수를 선언한다.

  requestAnimationFrame()을 이용해 animate 함수가 계속 실행 되도록 만든다.

  animate() 함수 내에서는 cube를 회전시킨다.

  rotation 속성을 통해 x,y 회전축을 0.01씩 증가 시킨다.

  회전된 큐브를 화면에 반영하기 위해서는 scene과 camera를 다시 renderer로 전달하여 화면을 갱신시켜야 한다.

예제 실행 결과

html을 실행시키면 다음과 같이 돌아가는 큐브가 나타난다.