Three.js(1)-시작하기

개미는뚠뚠·2023년 9월 24일
three.js
2

three.js

목록 보기
1/1
post-thumbnail

최근 내가 개인 프로젝트를 준비하기 전에 다양한 웹 사이트들을 많이 둘러본다. 근데 UI상으로 정말 고퀄리티의 메인화면이나 여러가지 요소를 활용하여 다양한 정보를 표현한 사이트를 많이 보게 되었다. 그 중 하나가 3D 모델링을 통한 화면을 표출한 것인데 최근 해당 부분에 관심이 생겨서 Three.js 공부를 시작해보려고 한다. 그렇다면 지금부터 알아보자.

Three.js란?

공식 URL : https://threejs.org/

Three.js 는 자바스크립트의 라이브러리 중 하나로, 웹 페이지에 3D객체를 생성하여 그것을 화면에 랜더링 하도록 도와준다.
대부분의 경우 three.js는 3D객체를 랜더링 하기 위하여, webgL 라는 것을 사용한다.

여기서 말하는WebGL란 점,선,삼각형 등을 그리는 아주 단순한 시스템을 말하는데 three.js는 3D 요소들의 처리를 도와 직관적인 코드를 짤 수 있게 도움을 준다.

Three.js의 구조

위의 이미지는 three.js 공식사이트에서 제공한 구조 이미지이다. 1번 이미지는 전체적이 three.js의 구조를 나타낸 것이며, 2번 이미지는 자주 사용하는 것들을 단순하게 도식화 했다고 보면 되겠다. 자세한 내용은 아래 설명을 참조하길 바란다.

  • Renderer
    Scene과 Camera객체를 넘겨 받아 카메라의 절두체 안의 3D Scene의 일부를 2차원 평면 이미지로 렌더링한다.

  • Scene
    Scene은 광원인 Light와 Mesh로 구성된다.
    Scene graph는 Scene 또는 다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리구조이다.
    Scene은 Graph의 최상위 노드로 Backgroun color, fog등의 요소를 포함한다.

  • Camera
    도식화 그림에서 Camera는 반쯤 나가 있는데, Scene 그래프에 포함되지 않는다.

  • Light
    여러 종류의 광원이다. 다양한 객체가 있다.

  • Mesh(Object3D)
    Mesh는 형상을 정의하는 Geometry와 색상과 투명도를 정의하는 Material로 정의된다.
    Material과 Gemoetry는 재사용이 가능해 여러개의 Mesh가 하나의 Material과 Gemoetry를 동시 참조가 가능하다.

  • Geometry
    구, 정육면체 면, 등등 다양한 것이 될 수 있으며 내장 객체를 통해 만들수도 있고, 파일을 통해 가져와 형상을 만들 수 있다.

  • Material
    표면 속성이라고 보면 된다. 색상, 투명도, 질감등을 사용한다.

Three.js 사용예제

솔직히 공식사이트만 들어가도 활용예시로 정말 고퀄리티의 멋진 3D객체들이 많이 있다. 나는 근데 아직 응애라서 객체를 생성하고 3D 정육면체 하나를 생성하는 것을 목표로 예제를 정했다. 아래는 그 예시다.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Three.js Example</title>
</head>
<body>
</body>
<style>
    body { margin: 0; }
    canvas { display: block; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <!-- Three.js 라이브러리 로드 -->
<script src="main.js"></script> <!-- 메인 JavaScript 파일 로드 -->
</html>

main.js

// 페이지가 로드되면 실행될 함수
window.addEventListener('load', init);

function init() {
  // canvas 엘리먼트 생성
  const canvas = document.createElement('canvas');

  // canvas 크기 설정
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

   // HTML 문서의 body 요소에 canvas 추가
   document.body.appendChild(canvas);
 
   // WebGLRenderer 생성 및 설정
   const renderer = new THREE.WebGLRenderer({ canvas });
   renderer.setSize(canvas.width, canvas.height);

  // 씬(Scene) 생성
  const scene = new THREE.Scene();

   // 카메라(Camera) 생성 (원근 투영 카메라)
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);
 
   // 카메라 위치 설정 (x, y, z 좌표)
   camera.position.z =5;
 
   // 큐브(Geometry) 생성
   const geometry = new THREE.BoxGeometry();
 
   // 재질(Material) 생성 (색상 지정)
   const material = new THREE.MeshBasicMaterial({ color:"red" });
 
   // 메쉬(Mesh) 생성 (큐브와 재질을 결합)
   const cube = new THREE.Mesh(geometry, material);
 
    // 씬에 메쉬 추가 
    scene.add(cube);
  
    function animate() {
      requestAnimationFrame(animate); 
    
      cube.rotation.x +=0.01;
      cube.rotation.y +=0.01;
   
      renderer.render(scene,camera); 
    }
  
    animate(); 
}

여기는 내가 작업하는 영역이고, three.js를 사용하려면 위의 방식처럼 js를 호출하거나

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js">

또는,

공식사이트에서 받은 [build]-[three.min.js] 파일을 프로젝트 디렉토리에 저장하여 호출하고 객체를 생성하는데 활용한다.

이렇게 모든 작업을 마치면?

와!!!!!!!!!!!!!! 라고 하기에는 너무 초라한 3D 정육면체 객체가 생성되었다. 이건 이미지라 멈춰있지만 실제로는 돌아가는 동적 객체를 생성한 것이다.

아무튼 이렇게 three.js 시작에 관한 글을 마치겠다. 아직 지식이 많이 모자라지만 열심히 공부하여 나중에 내 개인 프로젝트나 회사 프로젝트에 자주 사용할 수 있으면 좋을 거 같다.

profile
개미는뚠뚠
404

0개의 댓글