001. 네모박스를 만들어 돌려보자

awesomeyelim 2022. 5. 21. 21:01

728x90

나의 처음인듯 처음아닌 three.js

그 동안의 알고리즘 공부로 인한 탓일까, (사실) 나는 웹 개발에 점점 흥미를 잃어가고 있었다.
하지만 불현듯 내가 어떠한 종류의 웹 구현을 할 때 가장 재밌었는지 관련된 기억들이 스쳐지나갔고,
내 머릿속은 생각보다 재밌고, 유치하다는 사실이 three.js 와 WebGL을 처음부터 다시 공부 해야한다고 말하고 있는것 같았다.

우선 라이브러리를 다운 받아놓자

https://threejs.org/build/three.js

다음과 같은 html파일에 three.js를 연결시켜준다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      // Our Javascript will go here.
    </script>
  </body>
</html>

01. scene 만들기

three.js로 만드는 일은 단순하게 scene, camera, renderer가 필요하다.(촬영을 하고 렌더링을 시켜준다고 생각하자)

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75, //field of view(시야각) -> 각도 값으로 설정한다
  window.innerWidth / window.innerHeight, //aspect ratio(종횡비)
  0.1, // near
  1000 //far 절단면
);

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

02. Cube 만들기

이제 큐브를 만들어보자, 큐브를 만드려면 BoxGeometry가 필요하다.
또한 색칠해줄 요소가 필요하다. -> MeshBasicMaterial
Mesh는 재질을 적용히고 자유로운 움직임을 보장한다.

const geometry = new THREE.BoxGeometry(); //꼭짓점 (vertices) 와 면(faces)이 포함
const material = new THREE.MeshBasicMaterial({ color: 0x201CDA });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); //(0,0,0) 속성을 가짐

camera.position.z = 5;

03. scene 랜더링

이제 만들어논 피사체를 랜더링을 시켜보자 (+ 애니메이팅)

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01; //박스를 x축 기준으로 회전
  cube.rotation.y += 0.01; //박스를 y축 기준으로 회전
  renderer.render(scene, camera);
}

animate();

04. 완성된 소스 코드 !

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);

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

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

좌라란~