인프런 1분코딩 three.js 강의를 듣고 정리한 내용입니다. 더 친절하고 자세한 설명은 강의 영상을 참고하세요.
three.js 기본 장면 구성요소
Scene - 모든 요소가 올라가는 전체 배경, 장면
Mesh - 화면에 등장하는 사물, Geometry 와 Material 로 구성
Geometry - 사물의 모양
Material - 사물의 재질
Cmera - 화면을 찍는 카메라
Field of View -카메라가 가지는 시야각
Light - 빛, 조명 (재질에 따라 필요 없을 수 있음)
Renderer - 카메라가 찍는 장면을 화면에 그려주는 역할
x축 - 카메라 시점에서 좌우
y축 - 카메라 시점에서 위 아래
z축 - 카메라 시점에서 앞뒤
기본 장면 만들기 - Renderer
웹팩을 사용할 경우 아래와 같이 three.js 를 import 합니다. 콘솔을 찍어보면 어떤 값을 불러오는지 확인할 수 있습니다.
import * as THREE from 'three';
console.log(THREE);화면에 그림을 그려주는 렌더러를 만들고, 사이즈를 설정해줍니다.
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);이제 렌더러가 가진 돔 요소를 화면에 보여주면 됩니다. 아래와 같이 콘솔을 찍어서 확인할 수 있고, 확인 한 요소를 body 태그에 넣어주면 됩니다.
console.log(renderer.domElement);
document.body.appendChild(renderer.domElement);결과적으로 아래 코드로 동적으로 캔버스를 조립하게 됩니다.
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);다른 방법으로는 html 에서 캔버스를 가져와 사용하는 방법이 있습니다. 이렇게 하면 html 의 다른 요소와 위치를 잡는 것이 편합니다. html 의 바디 태그안에 아래처럼 캔버스 를 만들고,
<body>
<canvas id="three-canvas"></canvas>
</body>연결한 css 파일에서 캔버스의 영역을 전체 화면으로 설정해줍니다.
#three-canvas {
position: absolute;
left: 0;
top: 0;
}이제 js 파일을 작성해보면,
const canvas = document.querySelector('#three-canvas');
// 캔버스를 선택하고
const renderer = THREE.WebGLRenderer({ canvas });
// 해당 캔버스로 렌더러를 세팅하고
renderer.setSize(window.innerWidth, window.innerHeight);
// 브라우저 창 크기로 셋 사이즈를 맞춤기본 장면 만들기 - Camera
전체 요소가 포한되는 공간인 씬을 만들고 카메라를 추가합니다. 카메라의 종류는 여러가지인데, 가장 기본인 원근 카메라 PerspectiveCamera 를 많이 쓰고, 인자로 시야각, 종횡비, near, far 값을 넣습니다.
// 씬
const scene = new THREE.Scene();
// 카메라
const camera = new THREE.PerspectiveCamera(
75, // 시야각(field of view)
window.innerWidth / window.innerHeight, // 종횡비(aspect)
0.1 // near, 눈에 보이는 가장 가까운 거리
1000 // far, 눈에 보이는 가장 먼 거리
);
// 씬에 카메라 추가
scene.add(camera);기본 카메라 위치는 물체와 같은 0, 0, 0.. 이므로 카메라를 뒤로 빼주어야 합니다.
camera.position.z = 5;기본 장면 만들기 - Mesh
장면에 올라가는 사물, mesh 는 geometry 와 material 의 조합으로 만듭니다. 기본적인 직육면체 모양을 만들어보면,
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
color : 'red'
antialias: true; // 계단 현상이 보인다면 이렇게 처리
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh); // 만든 메쉬를 씬에 추가그리고 렌더러로 최종 렌더까지 해주면 화면에 보입니다.
renderer.render(scene, camera);