geometry (3) 썸네일형 리스트형 [Three.js] Geometry - 다양한 Geometry 객체 지난 포스팅에 이어서 Geometry에 대해서 살펴보겠다. 이전 포스팅에서는 WireframeGeometry, BoxGeometry에 대해서 살펴봤는데 나머지 잘쓰이는 Geometry에 대해서 살펴보겠다. 마찬가지로 같은 코드에서 실습을 해보면서 익혀보겠다. 모든 예제 소스는 유튜브 GIS Developer 님의 강좌를 보면서 작성하였다. 공식문서를 보고, Three.js에서 각 Geometry의 생성자를 보고 각 Geometry객체에대해서 쉽게 알 수 있다. 직접 해보면서 값을 넣어보면서 변화를 보다보면 각 변수가 어떤 역할을 하는지 어렵지 않게 알 수 있을 것이다. 아래는 실습 javascript 코드이다. import * as THREE from 'three' import {OrbitControls.. [Three.js] Geometry - BoxGeometry와 WireFrameGeometry Three.js에서 제공하는 기본 Geometry에 대해서 알아보겠다. Geometry는 앞선 포스팅에서 처럼 Mesh에 들어가는 요소 Geometry, Material 중에 형상을 의미하는 거라고 설명했다. 아래 그림은 Three.js 에서 제공하는 BufferGeometry 를 상속받아 사용할 수 있는 Geometry를 보여준다. 보라색글씨로 쓰여진 Geometry객체들이 자주 쓰이는 Geometry들이며, 본 포스팅에서 예시를 통해 알아 보겠다. Geometry는 3차원 객체 형상을 정의한다. Geometry의 형상을 정의하기 위한 데이터는 아래 그림과 같다. 1. 정점(Vertex) : x,y,z 축의 대한 좌표 2. 정점 인덱스(Vertex Index) : 면을 구성 3. 수직 벡터(Normal.. [Three.js] Three.js 기본개념 Three.js 에서 가장 기본이 되는 것은 Renderer, Scene, Camera이다. 이 개념을 먼저 익히고 라이브러리의 도식화에 대해서 파악한다. Three.js의 기본개념은, Scene을 만들어 그 안에 3D 객체를 넣고, 그걸 Camera로 비추는 것 그리고 그 전체를 Renderer를 통해 HTML Canvas안에 Rendering하여 보여주는 것이다. Three.js 앱의 구조부터 간략히 살펴보면 다음과 같다. Three.js 앱을 만들려면 다양한 객체를 생성해 연결해야 합니다. 아래는 Three.js 앱의 구조를 도식화한 것입니다. 아래는 자주 쓰는 것들을 단순하게 도식화 한 것입니다. Renderer Scene과 Camera객체를 넘겨 받아 카메라의 절두체 안의 3D Scene의 일부.. 이전 1 다음
