three.js 기본요소 익히기 - 기본장면만들기
재밌어보여서 학습해보는 three.js!
three.js로 구현된것을 연극무대로 생각해보자
object하나하나를 mesh라고 한다. obejct는 저기 서있는 캐릭터
mesh 는 geometry(모양)+ material(재질) 로 구성이된다.
카메라. 카메라는 시야각을 가진다.
빛. three.js 필수요소는 아닌데 거의 다 사용이된다.(재질에 따라서 조명이 필요하고 아니고가 있다.)
얘네를 화면에 그려주는애? Renderer!
three.js는 3차원이다. 3D
정면앞은 화살표라고 써져있는 쪽이 정면앞이다.
x측은 좌우이동 오른쪽으로가면 + 왼쪽이면 -
z측은 앞에있을수록 + 뒤에있음 -
y축도 위로가면 + 밑으로가면 -
Renderer만들기
기초 웹팩 작업을 끝낸 후, 필요한 요소들을 npm i 를 통하여 다운받는다.
renderer를 만드는 작업을 해줘본다.
콘솔을 찍으면 신기하게도 canvas가 나오는것을 확인할 수 있다.
이렇게 appendChild를 통하여 붙여넣을 수 있지만
import * as THREE from 'three';
const renderer = new THREE.WebGL1Renderer();
//브라우저창사이즈로 사이즈를 지정해준다.
renderer.setSize(window.innerWidth, window.innerHeight);
//렌더러가 생성이된다면 렌더러가 가진 dom엘리먼트가있다. 렌더러가 가진 캔버스다.
console.log(renderer.domElement);
document.body.appendChild(renderer.domElement);
실질적으로
html파일에 body태그안에
<canvas></canvas>를 만들수도있다.
이것은 개발자의 취향에따라서 선호도에 따라서 원하는 대로 작업을 해주면된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>import * as THREE from 'three';
//동적으로 캔버스 조립하기
// const renderer = new THREE.WebGL1Renderer();
// //브라우저창사이즈로 사이즈를 지정해준다.
// renderer.setSize(window.innerWidth, window.innerHeight);
// //렌더러가 생성이된다면 렌더러가 가진 dom엘리먼트가있다. 렌더러가 가진 캔버스다.
// console.log(renderer.domElement);
// document.body.appendChild(renderer.domElement);
const canvas = document.getElementById('#three-canvas');
const renderer = new THREE.WebGL1Renderer({ canvas }); //canvas라는 값을 canvas로 가져오는것
renderer.setSize(window.innerWidth, window.innerHeight);Camera 만들기
perspective camera -> 3D 장면을 렌더링하는데 가장 널리 쓰인다
Constructor
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.
fov- 시야각을 의미하는것
aspect - 쉽게 말해 가로세로 비율을 의미한다. 화면의 높이 / 화면의 넓이
near, far - 어느정도 가까이 오면 안보이게하고 얼마나 멀리가면 안보이게 할지 설정하는것
(카메라에 너무 가까우면 또 안보이고 너무 멀어도 안보이고 이런것을 설정해줌)
사진을 보면 똥같은경우에는 far보다 멀리있어서 맨뒤에있는것은 안보이고
near를 보면 아이스크림은 보이지만 near앞에있는 똥은 안보인다
저 옆에있는 똥같은경우는 시야각안에 없기에 안보이는것
import * as THREE from 'three';
import { Scene } from 'three';
//동적으로 캔버스 조립하기
// const renderer = new THREE.WebGL1Renderer();
// //브라우저창사이즈로 사이즈를 지정해준다.
// renderer.setSize(window.innerWidth, window.innerHeight);
// //렌더러가 생성이된다면 렌더러가 가진 dom엘리먼트가있다. 렌더러가 가진 캔버스다.
// console.log(renderer.domElement);
// document.body.appendChild(renderer.domElement);
const canvas = document.getElementById('#three-canvas');
const renderer = new THREE.WebGL1Renderer({ canvas }); //canvas라는 값을 canvas로 가져오는것
renderer.setSize(window.innerWidth, window.innerHeight);
//Scene
const scene = new THREE.Scene();
//Camera
const camera = new THREE.PerspectiveCamera(
75, //시야각 field of view
window.innerWidth / window.innerHeight, //aspec
0.1, // near
1000 //far
);
//카메라와 object가 같은위치면 보이지않으니 뒤로 약간 빼주는 작업을 해야한다.
camera.position.z = 5; //5정도 거리로 뒤로 빼주는것 + 방향으로
scene.add(carmera);
카메라는 셋팅이 되었다.
Mesh 물체만들기
import * as THREE from 'three';
//동적으로 캔버스 조립하기
// const renderer = new THREE.WebGL1Renderer();
// //브라우저창사이즈로 사이즈를 지정해준다.
// renderer.setSize(window.innerWidth, window.innerHeight);
// //렌더러가 생성이된다면 렌더러가 가진 dom엘리먼트가있다. 렌더러가 가진 캔버스다.
// console.log(renderer.domElement);
// document.body.appendChild(renderer.domElement);
const canvas = document.querySelector('#three-canvas');
const renderer = new THREE.WebGL1Renderer({ canvas }); //canvas라는 값을 canvas로 가져오는것
renderer.setSize(window.innerWidth, window.innerHeight);
//Scene
const scene = new THREE.Scene();
//Camera
const camera = new THREE.PerspectiveCamera(
75, //시야각 field of view
window.innerWidth / window.innerHeight, //aspec
0.1, // near
1000 //far
);
//카메라와 object가 같은위치면 보이지않으니 뒤로 약간 빼주는 작업을 해야한다.
camera.position.z = 5; //5정도 거리로 뒤로 빼주는것 + 방향으로
scene.add(camera);
//mesh
const geometry = new THREE.BoxGeometry(1, 1, 1); //직육면체geometry 박스를 하나만든다
const material = new THREE.MeshBasicMaterial({
// color: oxff0000
// color: '#ff0000'
color: 'red',
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh); //씬에 올려주기
//그리기
//렌더러가 렌더를 해줘야지 우리눈에보인다.
renderer.render(scene, camera);
이렇게 scene 위에 물체가 생긴다.
신기하다!
z축으로 앞으로만 조금 이동했으니 당연히 정면으로 보일것이다.
그렇다면?
카메라를 x,y축으로 이동하면될것이다
y축으로 한번 이동을 해본다면
x축도 이동해보면?
옆에보면 계단같이 찌그러지는 현상이있다.
방지하기위해
renderer에 옵션을 추가해준다
const renderer = new THREE.WebGL1Renderer({ canvas, antialias: true });
단 추가하면 성능은 조금 떨어짐!
직교카메라
방금전까지 한 것은 PerspectiveCamera
이제 배워볼것은 직교카메라!
OrthographicCamera
어떤 차이가 있는가?
perspective camera => 원근이 조절이되어있었으나
orthographic camera => 원근이 조절 되어 있지않다. => 디아블로 롤같은거 여기서 많이쓰임 아래와같이
하늘에서 기울여서 보는거같은것!
Constructor
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — Camera frustum left plane.
right — Camera frustum right plane.
top — Camera frustum top plane.
bottom — Camera frustum bottom plane.
near — Camera frustum near plane.
far — Camera frustum far plane.
frumstum = 절두체
절두체란?
near랑 far면을 끝면으로 가지고있는거 !
그림으로 보면 위와같은 차이를 가지고있다. 원근에 상관없이 크기가 똑같이보이는 Orthographic 반면 원근차이가있는 perspective