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

📕 add, libraries/Three.js 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();

좌라란~

'📕 add, libraries > Three.js' 카테고리의 다른 글

002. 선그리기 (0)	2022.05.23

ABOUT ME

yelim’s developer journey

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

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

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

01. scene 만들기

02. Cube 만들기

03. scene 랜더링

04. 완성된 소스 코드 !

'📕 add, libraries > Three.js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

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

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

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

01. scene 만들기

02. Cube 만들기

03. scene 랜더링

04. 완성된 소스 코드 !

'📕 add, libraries > Three.js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바