# Three.js란?
- Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리
- WebGL을 쉽게 사용할 수 있도록 해주는 JS 기반 라이브러리
- WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있음
# Three.js 를 사용하기 위한 기본 개념
* Camera
- PerspectiveCamera
- 원근감이 존재하는 일반적인 카메라 - OrthographicCamera
- 원근감이 존재하지 않는 카메라
- fov : 시야각
- aspect : 카메라의 가로, 세로 비율
- near : 카메라가 가장 가까이 잡을 수 있는 곳
- far : 카메라가 가장 멀리 잡을 수 있는 곳
* Scene
- 배경 및 장면
* Mesh
- 배경, 장면에 올라가는 모든 오브젝트
* Renderer
- 완성된 영상을 송출하는 Renderer
# 설치
npm i three- 정상적으로 설치가 완료되면 package.json에 three 추가됨
# Vite로 프로젝트 생성
[React] - Vite 시작하기
# Vite란? - 속도 빠른 웹 개발용 빌드 도구 - Node.js가 설치되어 있어야 사용 가능 - Create React App대신 사용하여 리액트 프로젝트를 생성 가능 # Vite 설치 npm create vite@latest ${디렉터리 명} -- --template ${
d0u0b.tistory.com
# Three.js 기본 코드
* index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>* main.js
import "./style.css";
import * as THREE from "three";
// 장면 생성
const scene = new THREE.Scene();
// 카메라 생성
const camera = new THREE.PerspectiveCamera(
60, // fov : 시야각
window.innerWidth / window.innerHeight, // aspect : 카메라의 가로, 세로 비율
0.1, // near : 카메라가 가장 가까이 잡을 수 있는 곳
100 // far : 카메라가 가장 멀리 잡을 수 있는 곳
);
camera.position.z = 5; // 카메라 z 값 설정
// Mesh 오브젝트 생성
const geometry = new THREE.BoxGeometry(1,1,1); // 박스 오브젝트 생성
const material = new THREE.MeshBasicMaterial({color:0xff0000}) // 오브젝트 스타일
const mesh = new THREE.Mesh(geometry, material); // Mesh 오브젝트 생성
// 생성한 오브젝트를 scene에 추가
scene.add(mesh);
// 생성한 scene을 renderer로 송출
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // renderer 사이즈 설정
document.body.appendChild(renderer.domElement) // 완성된 결과물을 html에 추가
renderer.render(scene, camera);* style.css
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}# 실행
# 현재 프로젝트 위치에서 실행
npm run dev
- http://localhost:5173/ 접속
- 박스 오브젝트가 잘 나오면 성공
'Framework > Three.js' 카테고리의 다른 글
| [Three.js] Three.js 시작하기(3) : StandardMeterial, 빛, OrbitControls 설정 (0) | 2024.01.05 |
|---|---|
| [Three.js] Three.js 시작하기(2) : renderer, camera 설정 (0) | 2023.12.12 |
