Three.js 맛보기

안녕하세요 ! 정만입니다 

이번에 프론트 담당을 맡게 되어 웹사이트 UI/UX를 여기저기 구경하고 있습니다.

멋진 웹사이트엔 Three.js를 활용해 3D를 야무지게 활용한걸 볼 수 있었습니다. 

https://orpetron.com/blog/10-exceptional-websites-showcasing-creative-usage-of-threejs/

프로젝트에 적용할진 모르겠으나.. 한번 배워보고 싶어 Three.js를 맛보기 해보았습니다.

 

Three.js란 ?

three.js는 웹 브라우저에서 3D 그래픽스를 쉽게 생성하고 렌더링할 수 있게 해주는 라이브러리 입니다. 이 라이브러리는 WebGL 위에 구축되어 있습니다. WebGL(Web Graphics Library)은 HTML5의 <canvas> 요소와 함께 사용되어 브라우저 내에서 3D 그래픽스를 제공합니다. WebGL을 사용하면 별도의 플러그인 없이 다양한 그래픽스와 애니메이션을 구현할 수 있습니다. 그러나 WebGL을 직접 사용하여 3D 그래픽을 구현하는 것은 복잡하고 많은 코드가 필요할 수 있습니다. 이때 three.js가 더 쉽게 3D 그래픽을 다룰 수 있게 도와줍니다. 

 

Three.js의 시작 개념 3가지

장면(Scene) : 화면에서 보여주는 객체를 담는 공간입니다. 모든 3D 객체, 조명, 카메라 등이 이 장면에 포함됩니다.

const scene = new THREE.Scene();

카메라(Camera): 장면을 바라볼 시점을 결정합니다. 카메라의 위치와 방향에 따라 장면의 시각적 표현이 달라집니다.

const camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth / window.innerHeight,
  0.1, 
  1000
);

렌더러(Renderer): 장면과 카메라를 화면에 그려주는 역할을 합니다.

const renderer = new THREE.WebGLRenderer();

 

객체를 생성하는 법

구체를 생성해보겠습니다. 형태(geometry)와 재질(materal)을 만들고  mesh에 적용해줍니다.

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(geometry, material);

 

구체를 생성했으니 장면에 추가합니다.

scene.add(sphere);

 

빛을 넣는 방법

구체를 생성했지만 아직 빛이 없기 때문에 입체적으로 보이지 않습니다. 빛을 넣어보겠습니다.

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-5, 10, 5).normalize();
scene.add(directionalLight);

 

빛 또한 장면에 추가합니다. 이제 입체적인 원이 완성이 되었습니다 !