Three.js 학습을 시작하며, 처음에는 js 파일을 다운로드해서 쓰거나 cdn을 이용하여 간단한 기능을 구현해보았다. 하지만 node 모듈을 깔지 않고는 사용할 수 없는 기능들이 있었다. 그래서 결국 Node.js에 three dependancy를 추가해서 쓰는 방법으로 기본 세팅 방법이 귀결되었다. 개발용 서버로는 Vite 를 사용하고 있다.
Node.js로 Three.js를 시작하는 방법을 두 가지로 나누어 설명하고자 한다. 첫 번째는 nodejs가 이미 깔려 있는 경우로, 첨부해둔 Starter 파일을 다운받아서 npm install로 한방에 세팅하는 방법, 두 번째는 학습을 위해 처음부터 한땀한땀 직접 설치해 나가는 방법이다. 코드 에디터는 Visual Studio Code(VSCode)를 사용하였으며, 두 경우 다 node.js가 필요하고, Vite와 Three.js가 node모듈의 dependancy로 들어가는 구조이다. 필요에 따라 선택 가능하며, 자세한 내용은 본문에 기술해두었다.
Three.js, Starter Pack 받아서 간편하게 설치하기
Node.js가 깔려 있어야 한다(14.18버전 이상). 혹시 없다면 뒤에 나오는 '장인정신으로 한땀 한땀 설치해보기'로 가서 Node.js 설치를 마친 후 여기로 다시 올 수 있다.
1. Starter 설치
- 아래의 Starter 압축파일(GettingStarted) 다운로드
- 압축해제 후 VSCode로 해당 폴더 열기
- VSCode의 Terminal을 Command Prompt로 열어서 npm install 명령어 치기. 이 때 프롬프트 화면에 뜨는 기본 경로가 GettingStarted여야 한다. 다르면 cd 명령어를 사용해서 바꿔줘야 함
npm install
2. 개발서버 구동하기
- 개발서버 구동 npm 명령어를 쳐준다
npm run dev
- 아래와 같이 웹브라우저에 Three.js Website 라는 문구가 뜨고 F12를 열었을 때 'Module'이 나오면 성공
- 이제 Three.js의 개발을 시작하면 된다.
Three.js, 장인정신으로 한땀 한땀 설치해보기
1. Node.js 설치
1) 다운로드 웹사이트로 이동
- URL: https://nodejs.org/en/
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2) Node.js 다운로드
- v.14.18 이상의 LTS(Long Term Support) 버전 다운로드. Current 버전은 호환성이 떨어지는 경우가 있다.
3) Node.js 설치
- 모두 디폴트 세팅으로 next만 눌러서 설치
- Command Prompt(windows) 혹은 Terminal(mac) 열어서 버전 확인 코드를 입력, 다음줄에 버전 번호가 나오면 설치 완료
node -v
2. 프로젝트 생성
- 프로젝트 만들 곳에 폴더 생성
- Command Prompt(windows) 열어서 해당 경로로 이동
cd/디렉터리 경로
- npm 설치. 끝에 -y를 붙여주면 package.json이 자동생성된다
npm init -y
- 결과(npm init)
3. 개발용 서버 Vite 설치
'vite'는 프랑스어로 "빠르다"는 의미를 가지고 있다. Vite는 Vue의 제작자인 Evan You가 창안한 것으로, 자바스크립트 기반 프론트엔드 개발용 서버이다[출처: Wiki]. 리액트, Vue와 같은 자바스크립트를 기반으로 한 프레임워크 개발을 위해 사용하며, 네이티브 자바스크립트 코드를 번들화해서 구동시킴으로써 코드 수정사항을 화면상에 빠르게 업데이트한다.[출처: Wiki]
1) Vite 설치
- Command Prompt(windows), 프로젝트 디렉터리 경로에서 npm으로 vite 설치
npm install vite
- 결과(npm install vite)
2) 서버 구동 준비작업 Package.json 수정
- VSCode 로 프로젝트 폴더를 열어준다. 에디터는 무얼 쓰든 무관하며, 아무것도 깔린 게 없는 사람은 Visual Studio Code 공식 웹사이트에서 다운로드하여 설치
- VSCode로 package.json 열어서 “scripts” 부분을 다음과 같이 수정
{
// ...
"scripts": {
"dev": "vite",
"build": "vite build"
},
// ...
}
- 서버 시범 구동을 위해 임의의 index.html 파일 하나 추가. 자체적으로 만들어도 되며, 샘플 필요한 사람은 아래 코드 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Project</title>
</head>
<body>
<h1>Three.js website</h1>
</body>
</html>
3) 개발 서버 구동하기
- VSCode의 Terminal 열기
- Command Prompt 추가
- 서버 구동 명령어 입력
npm run dev
- 그럼 아래와 같이 http://127.0.0.1:5173 과 같은 Local 주소를 반환한다.
- Local 주소를 복사해서 웹브라우저 주소창에 붙여 넣기하면 구현된 화면을 실시간으로 확인할 수 있다
참고사항
* npm: node package manager를 뜻함
* 구동중인 서버 중단 단축키: ctrl + c
4. Three.js 구동하기
1) Three 설치
- 구동중인 프롬프트는 놔두고 Command Prompt를 하나 더 추가한다
- npm으로 three dependancy를 다음과 같이 설치한다
npm install three
- 설치가 완료되면 아래 화면과 같이 node_modules 폴더 안에 "three" 폴더가 생긴다.
2) 샘플코드 작성
- index.html 파일 수정: javascript 파일을 .html과 분리해서 만들 거라서, 먼저 html 파일에 연결용 스크립트 태그 하나를 추가한 뒤, script.js라는 JavaScript 파일을 추가한다
- 이때 type은 "module"로 지정한다
<script type="module" src="./script.js"></script>
- script.js 파일 안에 three 모듈을 다음과 같이 import 한다
import * as THREE from 'three'
- 그리고 확인을 위해 console.log 메소드를 다음과 같이 추가한다
console.log(THREE)
3) 결과 확인
- 아까 구동시켜 놓은 웹브라우저로 돌아가 F12를 누름. Console 탭에 'Module' 이라는 글자가 떠있고, dropdown 목록을 펼쳤을 때 다음과 같이 three 라이브러리의 methods 등이 나온다면 세팅 완료이다.
5. Vite 설정 추가하기(옵션)
- 필수는 아니지만, '127.0.0.1' 대신 'localhost'로 주소를 바꾸고 싶어 Three.js Journey 강의에서 제공하는 vite 설정값을 빌려왔다. 'pakage.json' 파일이 있는 디렉터리에 'vite.config.js'라는 파일을 다음과 같은 내용으로 추가하면 된다.
export default {
root: 'src/',
publicDir: '../static/',
base: './',
server:
{
host: true, // Open to local network and display URL
open: !('SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in process.env) // Open if it's not a CodeSandbox
},
build:
{
outDir: '../dist', // Output in the dist/ folder
emptyOutDir: true, // Empty the folder first
sourcemap: true // Add sourcemap
},
}
'Three.js' 카테고리의 다른 글
| Three.js 객체의 이동, 리사이즈, 회전 | position, scale, rotation (0) | 2023.12.22 |
|---|---|
| Three.js 한 눈에 보는 Geometry 종류 (0) | 2023.12.21 |
| Three.js 반응형 canvas + 전체화면 만들기 (0) | 2023.12.20 |
