다양한 레퍼런스를 보기 위해 웹 사이트 이곳저곳을 방문하다가 너무너무 멋있는 사이트들 발견!..!
웹에서 이런 것도 구현이 가능하다니!!!✨👁️👁️✨하고 보니 대부분 Three.js를 사용했던 것..
.
.
을 시작으로 Three.js+React Three Fiber를 공부하며 이것저것 시도해보는 중이고 notion에 기록한 내용을 토대로 (내 머릿속을) 슥 정리해보려 한다.
Three.js는 WebGL을 기반으로 웹 상에서 3d를 쉽게 구현할 수 있게 해주는 JavaScript 라이브러리이다.
(여기서 WebGL이란 웹 상에서 3d 구현을 가능하게 하는 기술이고 점, 선, 삼각형 등 간단한 구현이 가능하다. 높은 수준의 콘텐츠를 구현하려면 굉장히 많은 코드가 필요하다..)
https://threejs.org/manual/#en/fundamentals
Three.js 앱의 기본 원리는
오브젝트를 추가한 Scene
과 Camera
를 Renderer
에게 넘겨주면 HTML 캔버스에 2d 이미지로 그려주는 것이다.
Light
와 Mesh
로 구성
Scenegraph의 최상위(root) 노드이고 배경색, 안개 등의 속성을 가진다.
AmbientLight
, HemisphereLight
, DirectionalLight
, PointLight
, SpotLight
, RectAreaLight
와 같이 다양한 종류의 빛 존재Geometry
와 Material
로 구성Mesh
오브젝트는 하나의 Geometry
와 Material
을 참조할 수 있다.PerspectiveCamera
, OrthographicCamera
이 대표적위 내용을 바탕으로 Three.js 앱의 구조를 요약해서 도식화하면 다음과 같다.