[Three.js] Three.js의 기본 구성

loopydoopy·2023년 4월 20일
0

Three.js

목록 보기
1/1

다양한 레퍼런스를 보기 위해 웹 사이트 이곳저곳을 방문하다가 너무너무 멋있는 사이트들 발견!..!
웹에서 이런 것도 구현이 가능하다니!!!✨👁️👁️✨하고 보니 대부분 Three.js를 사용했던 것..
.
.
을 시작으로 Three.js+React Three Fiber를 공부하며 이것저것 시도해보는 중이고 notion에 기록한 내용을 토대로 (내 머릿속을) 슥 정리해보려 한다.

Three.js란?

Three.js는 WebGL을 기반으로 웹 상에서 3d를 쉽게 구현할 수 있게 해주는 JavaScript 라이브러리이다.
(여기서 WebGL이란 웹 상에서 3d 구현을 가능하게 하는 기술이고 점, 선, 삼각형 등 간단한 구현이 가능하다. 높은 수준의 콘텐츠를 구현하려면 굉장히 많은 코드가 필요하다..)


Three.js 앱의 구조

https://threejs.org/manual/#en/fundamentals

Three.js 앱의 3가지 주요 객체

  1. Renderer
  2. Scene
  3. Camera

Three.js 앱의 기본 원리는
오브젝트를 추가한 SceneCameraRenderer에게 넘겨주면 HTML 캔버스에 2d 이미지로 그려주는 것이다.

Scene

  • LightMesh로 구성

  • Scenegraph의 최상위(root) 노드이고 배경색, 안개 등의 속성을 가진다.

    Light

    • AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight와 같이 다양한 종류의 빛 존재

    Mesh

    • GeometryMaterial로 구성
    • 서로 다른 Mesh 오브젝트는 하나의 GeometryMaterial을 참조할 수 있다.

      Geometry

      • 구, 정육면체, 평면 등과 같은 형태
      • 내장된 객체나 직접 커스텀한 객체를 파일로 불러올 수 있다.

      Material

      • 오브젝트의 표면을 나타냄
      • 색상, 밝기 표현

Camera

  • Scenegraph에 포함되지 않는다. (위 이미지에서 Scenegraph에 반쯤 걸쳐 있음)
  • PerspectiveCamera, OrthographicCamera이 대표적

위 내용을 바탕으로 Three.js 앱의 구조를 요약해서 도식화하면 다음과 같다.



참고자료

https://threejs.org/manual/#en/fundamentals

profile
일단 해보기🐢

0개의 댓글