[1. 준비사항]
1. node.js
- npm으로 three js를 설치해야한다
2. visual studio code
- 폴더명: threeTutorial
- main.js
- index.html (기본 코드: 접은 글)
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<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>
[2. three js 설치]
1. threeTutorial에서 터미널을 연다
2. 터미널에 npm install --save three 입력
3. 터미널에 npm install --save-dev vite 입력
4. 위 두가지 설치가 완료되면 node_modules/ 와 package.json 이 설치된다.
5. 터미널에 npx vite 입력
6. 설치가 완료되면 아래와 같이 뜨고, http://localhost:5173 는 작품이 실행되는 페이지로 ctrl+click으로 열 수 있다.
[3. main.js 기본]
1. three js를 사용하기 위해 모든 기능을 불러온다
- 명칭은 THREE라고 하겠음
// main.js
import * as THREE from 'three';
2. 장면 생성
- 명칭은 scene이라고 하겠음
// main.js
// 장면
const scene = new THREE.Scene();
<참고 페이지>
Installation – three.js docs (threejs.org)
'three js' 카테고리의 다른 글
| [three js] 외부 3d 객체 불러오기 (0) | 2023.10.15 |
|---|---|
| [three js] 개체 위치 설정하기, 이동시키기 (0) | 2023.10.09 |
| [three js] 정육면체 렌더링하기 (0) | 2023.09.05 |
| [three js] 카메라, 렌더링 (0) | 2023.09.05 |
