설치 및 세팅
npm init -y -> package.json 생김
npm install vite -> node_modules 파일과 package-lock.json 생김
npm install three -> Three.js 설치이제 로컬로 웹사이트를 vite로 실행해보자
파일 : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>03 - First Three.js Project</title>
</head>
<body>
<canvas class="webgl"></canvas>
<script type="module" src="./script.js"></script>
</body>
</html>오랜만이구먼....
파일: package.json
"scripts": {
"dev": "vite", //local에서 웹사이트 실행
"build": "vite build" // 최종버전 웹사이트을 output 한다.
},
package.json script에 위 명령어를 추가해준당.
npm run dev 하면 vite가 실행된다.
Three.js 시작
- scene : that will contain objects
- objects
- camera
- renderer
이 네개의 요소가 필요하다. 또한 canvas도 필요한데, 웹에 렌더링할때 캔버스에 렌더링할것이므로!
import * as THREE from 'three'
// Canvas
const canvas = document.querySelector('canvas.webgl')
// scene
const scene = new THREE.Scene()
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// Sizes - canvas의 size이기도함.
const sizes = {
width: 800,
height: 600,
}
// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
==> field of view(75), aspect ratio
fov 숫자가 커지면 더 멀리서 찍는다.
camera.position.z = 3 // 카메라를 뒤로 이동시켜서 물체를 볼 수 있게한다.
scene.add(camera)
// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)
By default, Three.js considers the forward/backward axis to be z.
이렇게 뜹니다요
👩💻안녕하세요🌞