패키지 설치
// 패키지 설치 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 |