-
Three.js / [2] 시작하기 - 장면 만들기, 큐브 만들기DEV/Three.js 2022. 12. 5. 13:54728x90반응형
- 본 게시글은 Three.js 홈페이지 및 Three.js and TypeScript 강의를 바탕으로 작성한 글입니다. -
일단 강의를 보면서 진행했긴 했는데, 강의는 버전도 다른것 같고 완전히 공식문서를 보고 만든것 같지 않아서
공부한 내용을 재구성해서 공식문서를 바탕으로 시작부터 작성해보려고 한다.
우선 ThreeJs가 무엇인고 하는 것부터 설명을 해봐야할것같다.
Three.js 는 WebGL 을 사용하여 웹 브라우저 에서 애니메이션 3D 컴퓨터 그래픽 을 만들고 표시하는 데 사용되는 브라우저 간 JavaScript 라이브러리 및 API( 응용 프로그래밍 인터페이스 ) 입니다
(threeJs wiki - https://en.wikipedia.org/wiki/Three.js)
그러니까 WebGL 기반인데, 내가 만들고 싶은 것들을 조금더 편한게? 만들수 있도록 하는 라이브러리라고 생각하며 될것같다.
비유해보자면, 그냥 html,css,js 만 사용해서 홈페이지 만들수도 있는데, 우리는 조금 더 편하거나 새로운 기능을 위해 React를 사용한다 정도로 이해한다.
그러면 이 three.js를 시작해보려고 한다.
설치하기
사실 밑에서 부터 쓰다가, 뭔가가 이상한데 해서 설치하기부터 다시 작성한다.
설치를 해야 쓰지 으이궁
three.js는 npm을 통해 설치 가능하다.
npm install three
이렇게 설치를 하고나면 원하는대로 불러와서 사용을 하면 된다.
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@<version>/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; const scene = new THREE.Scene(); </script>CDN을 활용해 설치해줘도 괜찮당
정면 만들기(Creating a Scene)
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> 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(); </script> </body> </html>코드가 조금 긴데 하나씩 풀어서 설명해보갔음
JS 파일 불러오기
<body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body>기본적으로 script로 three.js를 불러와서 사용한다.
씬 만들기
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 );우선 Scene을 만들어야하니 새로운 객체로 scene를 불러온다.
그리고 이 장면을 볼 카메라를 불러온다.
카메라에는 다양한 종류가 있지만 기본 예제에서는 PerspectiveCamera 메소드를 불러와서 사용한다.
PerspectiveCamera는 기본적으로 4가지 인자를 받는다.
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 카메라 절두체 수직 시야
aspect — 카메라 절두체 종횡비
near — 카메라 절두체 근평면
far — 카메라 절두체 원평면Fov는 field of view의 약자로 시야각, 즉 화면이 보여지는 정도를 나타내고, 각도값으로 해당 값을 정한다.
aspect는 aspect ratio며 시야각을 의미한다. 대부분의 경우 요소의 너비와 높이에 맞추는데 원하는대로 만들면됨.
near, far 이 두 요소는 near값보다 가까운 그리고 far 값보다 먼 요소는 렌더링 하지 않는다는 의미이다.
그리고 렌더를 해준다.
이 또한 다양한 렌더 방법이 있는데, 여기서는 기본적인 렌더 방법을 사용한다.
renderer 인스턴스를 생성해서 setSize를 통해 사이즈를 정해 준다.
만약 해상도를 낮추고 싶다면, 3번째 인자로 false를 지정해주면 해상도가 낮게 렌더링 된다.
그리고 일반적인 js문법으로 만든 객체를 html에 붙여준다.
도형 만들기
기본적으로 사용하는 도형은 큐브다.
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인데, mesh는 기하학을 받아 재질을 적용하고, 화면안에 삽입해서 자유롭게 움직이도록 도와주는 녀석이다.
그리고 기본 설정으로 위에서 설정했던 secen에 add함수를 불러와 추가된 모든것들을 진행시킨다.
cene 렌더링
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();그리고 난 후 화면이 새로고침될때 마다 계속해서 렌더링이 될 수 있도록 해준다.
setInterval과 비슷해 보이지만, 화면에서 벗어낫을때 이를 멈춰 에너지를 아끼기 위함이라고 한다
cube 애니메이팅
cube.rotation.x += 0.01; cube.rotation.y += 0.01;그리고 난 후 큐브가 돌아갈 수 있도록 해당 값을 animate 함수의 renderer.render위에 놓아준다.
[결과물]
몽충몽충한 돌아가는 네모가 생겼다!
반응형'DEV > Three.js' 카테고리의 다른 글
Three.js / [5] Object3D - 기본 개념과 상속 (0) 2022.12.12 Three.js / [4] Panel - Stats & Data GUI (0) 2022.12.09 Three.js / [3] animate & requestAnimationFrame (0) 2022.12.08 Three.js / [1] Intro (0) 2022.12.04