[Three.js] 기본 구성요소

three.js 설치 및 import

---

npm i three

import * as THREE from ‘three’;

 

Renderer

---

const renderer = new THREE.WebGLRenderer({
	canvas: canvas,
	antialias: true,
	alpha: true
})

속성

▪️ canvas : render할 canvas

▪️ antialias : 계단현상 없애기

▪️ alpha : 배경 투명도

 

methods

▪️ setSize : 가로 세로 사이즈 정하기

renderer.setSize(window.innerWidth, window.innerHeight);

 

▪️ setPixelRatio : 해상도 정하기

renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

 

▪️ setClearAlpha : 배경 투명도 정하기

renderer.setClearAlpha(0.5);

 

▪️ setClearColor : 배경 color 정하기

renderer.setClearColor(’red’);

•  

 

Scene

---

const scene = new THREE.Scene();

속성

▪️ background : 배경 설정

scene.background = new THREE.Color('blue');

•  

➕ 모든 mesh와 light scene에 add 해주어야 함

 

Camera

---

1️⃣ perspective camera : 원근 카메라 - 원근법이 반영됨

2️⃣ orthographic camera : 직교 카메라 - 원근법이 반영되지 않음

 

속성

▪️ position : 위치

camera.position.z = 5;

 

▪️ zoom : 카메라가 당겨진 정도

camera.zoom = 0.5;</code

•  

methods

▪️ lookAt : 특정 점을 바라보도록

camera.lookAt(0, 0, 0);

 

▪️ updateProjectionMatrix : 카메라 정보 update 시 반영되도록

camera.updateProjectionMatrix();

•  

 

Mesh

---

💡 mesh = geometry(모양) + material(재질)

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 'red' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

속성

▪️ position : 위치 값 ⇒ 속성 x, y, z

▪️ scale : 늘어나는 값 ⇒ 속성 x, y, z

▪️ rotation : 회전 radian 값 ⇒ 속성 x, y, z

mesh.roatation.x = THREE.MathUtils.degToRad(10);

•  

methods

▪️ position.set : 위치 설정

mesh.position.set(0, 2, 5);

 

▪️ position.length : 원점으로부터의 거리

mesh.position.length();

 

▪️ position.distanceTo : 특정 점으로부터의 거리

mesh.position.distanceTo(new THREE.Vector3(1, 2, 3));

 

Light

---

const light = new THREE.DirectionalLight(
	0xffffff, // color
	1, // 빛의 강도

 

Fog

---

scene.fog = new THREE.Fog(
	'blue', // fog color
	3, // near
	7 // far
);

➕ fog color를 뒷 배경과 맞추면 더욱 원근감을 줄 수 있음

 

Group

---

object 끼리 group지어주는 것 가능 ⇒ 함께 transform 가능