패키지 설치
// 패키지 설치
npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server
npm i three
동적으로 캔버스 조합
html의 canvas 태그를 미리 넣어 진행하는 방법
src/index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<canvas id="three-canvas"></canvas>
</body>
</html>
- canvas 태그 넣기
src/main.css 파일
body {
margin: 0;
}
/* 스크롤 방지를 위함 */
#three-canvas {
position: absolute;
left: 0;
top: 0;
}
src/main.js 파일
import * as THREE from "three";
// html의 캔버스 태그 가져오기
const canvas = document.querySelector("#three-canvas");
// 랜더러를 만들고 캔버스의 속성의 값을 캔버스로 지정하주기 { canvas : canvas } = { canvas }
const renderer = new THREE.WebGLRenderer({ canvas });
// 랜더러 사이즈를 브라우저 사이즈로 맞추기
renderer.setSize(window.innerWidth, window.innerHeight);
// document.body.appendChild는 하지 않아도 됨 이미 html에 캔버스 태그를 만들어 놨기 때문;
'Frontend > Three.js' 카테고리의 다른 글
| 직교 카메라(Orthographic Camera) (0) | 2024.04.20 |
|---|---|
| 기본장면 만들기 - Mesh (0) | 2024.04.20 |
| 기본장면 만들기 - Camera (0) | 2024.04.20 |
| three.js 기본 장면 구성요소 (0) | 2024.04.20 |
| three.js란? (0) | 2024.04.20 |