ThreeJS 시작하기

NPM 및 빌드 도구로 설치

npm 패키지 레지스트리 에서 설치하고 빌드 도구를 사용한다

1. Node.js 설치하기
   종속성 관리를 로드하고 빌드 도구를 실행하는 필요하다
2. 프로젝트 폴더의 터미널 을 사용하여 three.js 및 빌드 도구인 Vite를 설치한다

npm init

# three.js
npm install --save three

# vite
npm install --save-dev vite

• npm은 package.json 사용하여 설치한 각 종속성의 버전을 설명한다. 프로젝트에서 함께 작업하는 다른사람이 있는 경우 npm install 실행하여 각 종속성의 원래 버전을 설치할수 있다. 버전 기록을 사용하는 경우 package.json 커밋을 한다

• node_modules 폴더는 각 종속성에 대한 코드를 npm 한다

3. 터미널에서 다음을 실행한다

npx vite 

장면 만들기

three.js 는 카메라로 장면을 렌더링 할수 있도록 장면,카메라 및 렌더러 3가지가 필요하다.

main.js

import * as THREE from 'three';

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

• PerspectiveCamera

  • field of view: 주어진 순간에 디스플레이에 표시되는 장면의 범위
  • aspect ratio: 요소의 너비를 높이로 나눈 값을 사용
  • near: 근처 평면
  • far: 원거리 평면

• WebGLRenderer

  • WebGL을 사용하여 장면을 표시한다

큐브 추가하기

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

• 큐브를 만들기 위해서는 기하학 BoxGeometry와 재질MeshBasicMaterial 필요하다
• Mesh생성자 인스턴스에 BoxGeometry + MeshBasicMaterial 넣어준다
• 만든 큐브 Mesh 를 Scene 넣어준다

장면 렌더링 애니메이션 추가

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

• requestAnimationFrame 사용하면 화면이 새로 고쳐질때 마다 렌더러가 장면을 그리는 루프가 생성된다(일반적인 화면에서 초당 60회를 의미)
• 장점은 사용자가 다른 브라우저 탭으로 이동할때 일시 중지되어 처리능력 및 배터리 수명을 낭비하지 않는다

큐브 애니메이션 추가하기

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

결과