Three.js 3D 그래픽 적용하기

hyunho4562·2023년 9월 14일

WebGLRenderer three.js

Three.js

목록 보기

2/2

시작하기 전, Three.js 설치를 안했다면 아래 링크를 클릭하자!

three.js 설치하기

이제 본격적으로 시작해보자, 아래 링크는 3D 웹 디자인 예시이다.

3D 웹 포트폴리오 보기

장면 만들기

카메라로 장면을 렌더링할 수 있도록 장면, 카메라, 렌더러의 세 가지가 필요하다.

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

코드 분석

Three.js 라이브러리를 가져와서 별칭을 THREE로 지정한다.

import * as THREE from 'three';

3D 장면을 만든다.

const scene = new THREE.Scene();

투시 카메라를 생성.

// 시야각이 75도, 종횡비는 현재 창의 가로세로 비율, 
// 카메라는 0.1부터 1000까지의 깊이 범위 내에서 물체를 볼 수 있다.
const camera = new THREE.PerspectiveCamera ( 
  75, window.innerWidth / window.innerHeight, 0.1, 1000 );

WebGLRenderer 생성

const renderer = new THREE.WebGLRenderer();

렌더러의 크기를 현재 창의 크기와 동일하게 설정

renderer.setSize(window.innerWidth, window.innerHeight);

렌더러의 DOM 요소를 현재 문서의 바디에 추가

document.body.appendChild(renderer.domElement);

rendererHTML 문서에 요소를 추가하기

렌더러가 장면을 표시하기 위해 사용하는 <canvas> 요소를 사용한다.

🤔🤔 다 좋은데 큐브는 어디 있지?

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

코드 분석

BoxGeometry는 정육면체를 생성한다.

const geometry = new THREE.BoxGeometry(1, 1, 1);

MeshBasicMaterial은 물체의 재질을 정의한다.

// 녹색으로 된 기본 재질을 사용한다.
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

Mesh는 Geometry와 Material을 결합하여 렌더링할 객체를 생성

const cube = new THREE.Mesh(geometry, material);

앞서 만든 정육면체(cube)를 추가

scene.add(cube);

장면 렌더링

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

큐브 애니메이션

매 프레임마다 실행되며 큐브에 멋진 회전 애니메이션

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

결과

index.html

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="/main.js"></script>
	</body>
</html>

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

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;

function animate() {
	requestAnimationFrame( animate );

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

	renderer.render( scene, camera );
}

animate();

현호

유연한 자세

이전 포스트

웹 사이트에서 멋있게 3D 모델을 적용해보자!

2개의 댓글

judymango

4일 전

cube를 생성할 때 position 을 설정하지 않으셔서 좌표(0,0,0) 에 생성되어 있습니다
camera처럼 cube의 position을 옮겨보세요!!

1개의 답글