[JavaScript] Three.js로 쉽게 만드는 우주 !

Intro

랜딩 페이지를 3D를 이용해 시각적으로 더욱 예쁘게 만들고 싶어 three.js를 배우게 되었습니다. 최근 깃헙 랜딩 페이지에서 한국어 지원을 시작하였는데 , 저기 나오는 3D 지구본도 바로 이 three.js를 이용하여 만든 것입니다..!!

GitHub: Where the world builds software

Three.js

What is Three.js

Three.js는 WebGL을 이용하여 웹페이지에 3D 객체를 쉽게 렌더링 하도록 도와주는 자바스크립트 3D 라이브러리입니다. 여기서 WebGL은 html의 캔버스 요소를 이용하여 웹 브라우저에서 인터렉티브 한 3D 그래픽을 사용할 수 있도록 하는 도구입니다. 웹 브라우저에서 CPU가 아닌 GPU를 사용하여 화면을 렌더링 하여 굉장히 빠릅니다! 그래서 이 WebGL을 가지고 웹 게임 , 인터렉티브 페이지, VR 콘텐츠 등 여러 3D 작업물을 만들 수 있습니다.

"Hello Cube"

프로그래밍 언어를 배울 때 가장 먼저 "Hello World!"를 출력했다면, Three.js에서는 3차원 세계에서 정육면체 큐브를 만드는 것이 시작이라고 할 수 있습니다.

먼저 이렇게 three.js를 사용할 html 파일 하나와 three.js 코드가 들어갈 script.js 파일 하나를 생성하고 <body> 태그 안에 불러와줍니다.

<!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 type ="module" src="./js/script.js"></script>
	</body>
</html>

이것은 Three.js 앱의 구조를 도식화한 것입니다. 이것을 처음 보면 이해가 안 될 수도 있지만 코드를 직접 짜 보고 다시 이 구조도를 보면 무슨 소리인지 바로 이해가 될 것입니다.

Three.js는 npm을 통하여 설치하거나, CDN이나 static 호스팅으로 빠르게 사용이 가능합니다. Three.js 공식 문서에서는 npm을 통한 설치를 권장하지만 저는 UNPKG CDN을 이용하여 사용하였습니다.

npm install --save three

three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요합니다. 이를 통해 카메라로 장면을 구현할 수 있습니다.

카메라의 첫 번째 속성은 **field of view(시야각)**입니다. FOV(시야각)는 해당 시점의 화면이 보이는 정도를 나타냅니다. 값은 각도 값으로 설정합니다.

두 번째 속성은 **aspect ratio(종횡비)**입니다. 대부분의 경우 요소의 높이와 너비에 맞추어 표시하게 할 텐데, 그렇지 않으면 와이드스크린에 옛날 영화를 트는 것처럼 이미지가 틀어져 보일 것입니다.

다음 두 속성은 near와 far 절단면입니다. 무슨 뜻인가 하면, far 값 보다 멀리 있는 요소나 near 값보다 가까이 있는 오브젝트는 렌더링 되지 않는다는 뜻입니다. 지금 시점에서 이것까지 고려할 필요는 없지만, 앱 성능 향상을 위해 사용할 수 있습니다.(위 내용은 three.js 공식문서 내용입니다)

import * as THREE from "https://unpkg.com/three@0.126.1/build/three.module.js";

const scene = new THREE.Scene();
//장면 생성
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//카메라 세부 설정
const renderer = new THREE.WebGLRenderer({ antialias: true });
//renderer 생성
renderer.setSize(window.innerWidth, window.innerHeight);
//화면 사이즈 설정
document.body.appendChild(renderer.domElement);
//html 화면에 구현

이제 큐브를 추가해봅시다.

const geometry = new THREE.BoxGeometry();
//BoxGeometry 생성 , 이 안에 vertices(꼭짓점)과 faces(면)이 포함
const material = new THREE.MeshBasicMaterial( { color: 0x00ff80 } );
// MeshBasicMatreial 생성 , color: 형광색 
const cube = new THREE.Mesh( geometry, material );
//Mesh를 이용하여 geometry에 material을 적용하고 자유롭게 움직일 수 있도록 함
scene.add( cube );
// 장면에 cube를 추가함

camera.position.z = 5;
//기본 카메라 셋팅은 (0,0,0)이므로 카메라의 z 값을 5로 함

이제 페이지를 열어보면 놀랍게도 아무 일도 일어나지 않을 것입니다. 왜냐하면 아직 아무것도 렌더링 하지 않았기 때문입니다. 이 코드로 인해 1초에 60번씩 화면이 렌더링 될 것이고 , 큐브는 1초에 60번씩 애니메이팅 할 것입니다! 여기까지가 공식문서에 나와있는 헬로 큐브이지만 간단한 코드 몇 개만 더 써서 카메라가 사용자의 요구에 맞게 움직이도록 해보겠습니다.

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

먼저 js 맨 윗줄에 CDN을 이용한 OrbitControls 모듈을 가져와줍니다. 그리고 코드에 아래 3줄을 써줍니다.

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

그 후 animate 함수에 controls.update();를 추가해줍니다.

const animate = function () {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  controls.update(); // 추가 !
  renderer.render(scene, camera);
};

이제 실행을 해보면 돌아가는 형광색 정육면체 큐브와 컨트롤할 수 있는 카메라가 빰!!

See the Pen <a href="https://codepen.io/jungin7612/pen/zYZGKKe"> hello cube</a> by 김정인 (<a href="https://codepen.io/jungin7612">@jungin7612</a>) on <a href="https://codepen.io">CodePen</a>.

How to make my landing page

중앙에 도넛 모양으로 돌아가는 도형과 랜덤으로 퍼져있는 원들이 마치 우주 같은 느낌을 줄 것입니다. script.js 파일에 아까 큐브를 만들 때와 같이 scene, camera, renderer를 만들어 줍니다.

// Scene
const scene = new THREE.Scene();
//size
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
		// 화면 맞춤을 위해 sizes라는 상수 정의
  };
//camera
const camera = new THREE.PerspectiveCamera(
    75,
    sizes.width / sizes.height,
    0.1,
    100
  );
  camera.position.z = 2;
  scene.add(camera);
//renderer
const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
//canvas가 흐릿하게 출력해주는 것을 막음
  renderer.setClearColor(new THREE.Color("#21282a"), 1);
// 배경색을 어두은 gray로 설정
  document.body.appendChild(renderer.domElement);

그리고 랜딩페이지를 만들 때 사용자가 화면의 크기를 조정하는 것에 대응하기 위해 반응형으로 만들기 위해 resize event를 추가해주었습니다.

window.addEventListener("resize", () => {
    // Update sizes
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;
  
    // Update camera
    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();
  
    // Update renderer
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  });

이제 도넛형 도형*~~(맞는 표현인지 모르겠음)~~*을 만들 차례입니다. TorusGeometry를 이용하면 도넛형 도형이 만들어집니다. TorusGeometry의 첫 번째 속성은 radius입니다. 비어있는 원의 반지름을 뜻합니다. 두 번째 속성은 tube입니다. 이는 tube(비어있지 않은 부분)의 반지름입니다. 세 번째 속성은 radialSegments이고 네 번째 속성은 tubularSegments입니다. 이는 직접 수치를 조절해가면서 느낌을 잡아가는 것을 추천합니다. 아까는 Mesh를 이용하여 표현하였지만 이번에는 점으로 만드는 것이기에 Points라는 것을 이용해줍니다. 이렇게 해주면 중앙에 있는 도넛형 도형은 다 만든 것입니다! (animate에서 돌아가게만 하면)

const geometry = new THREE.TorusGeometry(0.7, 0.2, 16, 100);
const material = new THREE.PointsMaterial({
  size: 0.005,
  color: 0x87a7ca,
});
const sphere = new THREE.Points(geometry, material);

이제 우주 같은 느낌을 주기 위해 paticles을 만들어주면 됩니다. paticlesGemotry는 BufferGeometry를 이용해서 만들어줍니다. BufferGeometry는 사용자 정의 도형이고 , 사용자가 직접 vertices의 position, normals, colors, uv 들을 정의할 수 있습니다. 또한 three.js에서 별 모양 material은 없기에 포토샵을 이용하여 직접 png파일로 별 모양을 만들어 준 다음에 material에 maping 해주었습니다.

const particlesGeometry = new THREE.BufferGeometry();
const loader = new THREE.TextureLoader();
const star = loader.load("./star.png");
const particlesmaterial = new THREE.PointsMaterial({
  size: 0.005,
  map: star,
  transparent: true,
});

이제 본격적으로 별들을 랜덤으로 뿌릴 차례입니다. 먼저 별 700개의 xyz 값을 랜덤 하게 돌리기 위해 posArray에 2100개짜리 배열을 32비트 부동 소수점 배열을 만듭니다. 그다음 반복문으로 랜덤 하게 위치를 돌려줍니다. posArray[i] = Math.random() 이런 식으로 돌리게 된다면 별들이 한 곳에 뭉치고 다른 이상한 곳에 위치할 것입니다. posArray[i] = Math.random() - 0.5 이렇게 해준다면 가운데로 뭉치기는 하지만 별들이 분포하지 않습니다. 추가 설명을 하자면 Math.random 함수는 기본 범위가 0 이상 1 미만입니다. 여기서 -0.5를 함으로써 범위는 -0.5 이상 0.5 미만이 됩니다. three.js에서 기본 position은 (0,0,0)이 중앙이므로 별들은 중앙에서 뭉쳐있을 것입니다. posArray[i] = (Math.random() - 0.5) * 5 이렇게 해주면 뭉쳐있던 것이 5배 커 보여 거의 자연스럽지만 이것은 그냥 단순히 아까 전 코드를 크게 해 준 것일 뿐입니다. posArray[i] = (Math.random() - 0.5) * (Math.random() * 5) 마침내 이 코드를 써주면 별들은 중앙에서 자연스럽게 퍼질 것입니다!

const particlesGeometry = new THREE.BufferGeometry();
const loader = new THREE.TextureLoader();
const star = loader.load("./star.png");
const particlesmaterial = new THREE.PointsMaterial({
  size: 0.005,
  map: star,
  transparent: true,
});

사실 이제 렌더링만 하면 완성이지만 이렇게 하면 web의 인터렉티브 한 맛이 없습니다. 그래서 저는 마우스가 움직일 때마다 별들이 움직이는 event를 넣어주었습니다. 이렇게 설정을 해주고 animate 함수에서 해주면 됩니다!

document.addEventListener("mousemove", animateParticles);

let mouseX = 0;
let mouseY = 0;

function animateParticles(event) {
  mouseY = event.clientY;
  mouseX = event.clientX;
}

이제 animate 함수를 작성하고 여기서 도형들을 애니메이팅 해주면 모든 것이 끝!! 이 외 다른 부분은 three.js 가 아닌 CSS 만을 이용하여 만든 것이기에 이 포스트 내용에서는 제외했습니다.

const clock = new THREE.Clock();

const animate = () => {
  window.requestAnimationFrame(animate);

  const elapsedTime = clock.getElapsedTime();
  // 경과시간

  sphere.rotation.y = 0.5 * elapsedTime;
	//도넛형 도형의 y축을 회전
  particlesMesh.rotation.y = -1 * (elapsedTime * 0.1);
	//별들이 경과시간마다 음의 방향으로 이동

  if (mouseX > 0) {
		//사용자가 마우스를 움직이면 그에 맞춰 인터렉티브하게 움직임
    particlesMesh.rotation.x = -mouseY * (elapsedTime * 0.00008);
    particlesMesh.rotation.y = -mouseX * (elapsedTime * 0.00008);
  }

  renderer.render(scene, camera);
};

animate();

See the Pen <a href="https://codepen.io/jungin7612/pen/jOBPmZg"> my landing page</a> by 김정인 (<a href="https://codepen.io/jungin7612">@jungin7612</a>) on <a href="https://codepen.io">CodePen</a>.

Reference

Three.js - JavaScript 3D library

Working with Three.js Particle Systems - They're AWESOME!

본 포스트는 위 유튜브 내용을 제가 해석한 대로 쓴 것입니다.

'Develop 💻 > JavaScript' 카테고리의 다른 글

JS 자료 공유 / JS 기초 / 코드베이커리 (0)	2021.09.01
[JavaScript] ES7 - 12 문법 / ECMAScript 2016 ~ 2021 (2)	2021.07.25

Jungin

[JavaScript] Three.js로 쉽게 만드는 우주 !

Intro

Three.js

What is Three.js

"Hello Cube"

How to make my landing page

Reference

'Develop 💻 > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] Three.js로 쉽게 만드는 우주 !

Intro

Three.js

What is Three.js

"Hello Cube"

How to make my landing page

Reference

'Develop 💻 > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바