안녕하세요. 에디터M입니다.
오늘은 어제에 이어서 Three.js 공부하기 3D 큐브 만들기 해볼게요.
혹시 이전 내용을 못 보신 분들은 이전 내용을 보고 오시는 걸 추천드려요.
2023.07.12 - [공부일지/Frontend] - Three.js 공부하기 : Three.js 알아보기
Three.js 공부 하기 : Three.js 알아보기
안녕하세요. 에디터M입니다. 오늘은 어제에 이어서 Three.js 공부하기 Three.js 알아보기 포스팅을 해볼께요. 먼저 Three.js가 무엇인지 알아볼까요? Three.js 란? Three.js는 웹 기반 3D 그래픽을 생성하고
min-webstory.tistory.com
2023.07.11 - [공부일지/Frontend] - Three.js 공부 하기 : WebGL 알아보기
Three.js 공부 하기 : WebGL 알아보기
안녕하세요. 오랜만에 돌아온 에디터M 입니다. 최근에 Three.js에 관심이 생겨서 검색해보고 개인적인 일들이 있어서 몇주 동안 블로그를 포스팅 하지 못했네요. 요즘 장마라서 기분도 별로 좋지
min-webstory.tistory.com
3D 큐브를 만들기 전에 저번시간에 Three.js의 간략한 내용을 알아보았는데 오늘은 심화 학습을 해볼게요.
Three.js는 3D 객체를 렌더링 하는데 WebGL을 사용해요. 그래서 Three.js를 WebGL이라고 착각하는데 WebGL은 점, 선, 삼각형만 그리는 단순한 시스템이에요. 그래서 WebGL로 작업물을 만들기 위해선 많은 코드가 필요해요. 이런 부분을 쉽게 해 주는 게 Three.js이에요.
Three.js의 구조
위의 이미지에서 중요한 것들을 알려 드릴게요.
Render
Three.js의 핵심 객체입니다. Render은 Scene와 Camera를 받아 카메라의 절두체 안 3D장면의 일부를 평면 이미지로 렌더링 합니다.
Scene
Scene는 Mesh, Light, Grop, Object3D, Camera로 이루어진 트리 구조로 입니다.
쉽게 말해서 우리가 작업하고 눈에 보이는 화면이 Scene에서 작업이 되어 canvas에 출력한다고 보면 됩니다.
Scenc는 제가 지금 설명드리기엔 조금 복잡해서 추후 Scene부분만 따로 다뤄서 보도록 할게요.
Camera
이미지에서 Camera만 파란색 테두리 밖으로 나간 게 보이시나요??? 다른 객체와 달리 Camera는 굳이 씬 그래프에 포함될 필요가 없다고 합니다.
물론 다른 객체의 자식 객체로 들어갈 수도 있습니다. 그렇게 되면 부모 객체에 따라서 Camera의 움직임이 달라진다고 해요.
Mesh
Material로 하나의 Geometry를 그리는 객체입니다.
Mesh를 사용하기 위해선 Geometry와 Material이 필요하다. 이 두 속성은 여러 Mesh에도 적용이 가능하다.
Material과 Geometry는 종류가 너무 많고 옵션이 다양하기 때문에 다음시간에 좀 더 상세하게 이야기해야 될 거 같다.
Geometry
Geomery는 도형을 나타내는 객체이다. 원형, 정육면체, 면, 동물, 사물 등 다양한 도형을 만들 수 있다.
Three.js에는 기본적으로 제공하는 도형이 있는데 직접 도형의 객체를 만들어 사용도 가능하다.
Material
Material은 Geometry을 그리는 데 사용한다. 도형의 색상, 밝기 등을 정의할 수 있고 그 외 다양한 옵션들을 제공한다.
Geometry와 Material은 따로 상세 글을 작성해야 될 정도로 다양하기 때문에 현재 파트에서는 간단히 설명하고 넘어가겠습니다.
Texture
Texture는(은) 이미지나 완성된 도형의 디테일을 수정할 수 있다.
Light
Light는 다양한 광원 효과를 설정할 수 있다.
이렇게 Three.js의 기본 구조에 대해 알아보았습니다. Three.js는 위의 옵션들만 알아도 기본적인 도형은 만들 수 있다고 해요.
Three.js : 2D 큐브 만들기
1. Three.js 시작하기
<body>
<canvas id="cube"></canvas>
</body>
<script type="module">
import * as THREE from 'three'
function main() {
const canvas = document.querySelector('#cube');
const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
}
</script>해당 포스팅은 React에서 설치하는게 아니라 HTML파일에서 Import 해서 사용 작업 진행 할께요.
그렇기 때문에 꼭 type="module" 를 적어 주셔야 Import 됩니다. 그래서 Three.js 모듈을 사용 할 수 있습니다.
canvas태그를 만들고 id를 cube로 선언 해줍니다.
그리고 WebGLRenderer를 생성해 줍니다. WebGLRenderer은 Canvas 그려주는 기능을 합니다.
Three.js 각 옵션 설명
- fov : field of view(시야각)의 줄임말 입니다. 위에 코드에서는 75도로 지정 했는데 Three.js는 대부분 각도 단위를 호도(radians)를 사용합니다. 하지만 원근 카메라는 도(degress)를 사용합니다.
- aspect : canvas의 가로 세로 비율을 나타냅니다. canvas는 기본사이즈가 가로 300 세로 150입니다. 위의 코드에서는 비율을 2로 설정 하였습니다.
- near, far : near과 far은 카메라앞에 렌더링 되는 공간의 범위를 지정하는 요소 입니다. 해당 영역 바같에 있느 ㄴ요소는 화면에서 잘려 나가 렌더링 되지 않습니다.
near과 far 평면의 높이는 시야각(fov), 너비는 시야각과 aspect에 의해 결정 됩니다.
위의 이미지에 나와있는 영영 외는 렌더링 되지 않습니다.
카메라는 기본 설정으로 -Z축 +Y축, 즉 아래를 바라 보게 됩니다. 정육면체의 원점에 카메라를 옮겨 보아요.
camera.position.z = 2;
카메라는 z = 2 위치에서 -Z 방향을 바라봅니다.
절두체는 카메라 앞(near) 0.1칸에서 far의 5칸까지 설정을 합니다.
이제 위에서 만든 도형을 출력하는 Scene에 출력하기 위해 scene를 선언 해줍니다. scene는 제일 상단에 선언 해줍니다.
<body>
<canvas id="cube"></canvas>
</body>
<script type="module">
import * as THREE from 'three'
function main() {
const scene = new THREE.Scene();
const canvas = document.querySelector('#cube');
const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
}
</script>카메라 세팅은 끝이 났으니 이제 도형을 만들어 출력을 해볼께요.
정육면체 도형을 만들어야 하니 Geometry에서 BoxGeometry를 만들어 줍니다.
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);가로, 세로 값은 1 박스의 깊이 즉 너비를 말하는거 겠죠? 그것도 1로 해서 정육면체의 크기를 BoxGeometry에 전달해 줍니다.
저렇게 변수로 하지 않고 직접 값을 넣어서 지정해 주어도 됩니다.
도형을 만들어 주었으면 이제 색상을 지정해 볼께요.
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);이렇게 색상을 지정하고 Mesh를 생성해 geometry와 material을 넣어 줍니다.
color는 css처럼 사용합니다. 대신 #대신 0x를 적어주셔야 됩니다.
마지막으로 scene에 cube를 넣어주면 완성됩니다.
그럼 이제 2D로 된 사각형 박스가 나올꺼에요.
오늘은 이렇게 2D 사각형을 출력시키는거 까지 해보았는데요.
다음시간에는 2D를 3D로 변경해 볼게요.
그럼 다음시간에 봐요~
'공부일지 > Three.js' 카테고리의 다른 글
| Three.js 공부하기 3D 큐브 만들기 (7) | 2023.07.19 |
|---|---|
| Three.js 공부 하기 : Three.js 알아보기 (8) | 2023.07.12 |
| Three.js 공부 하기 : WebGL 알아보기 (10) | 2023.07.11 |
