본문 바로가기
728x90

3D

 (2)
[Three.js] 3차원 공간구성 (scene graph) 이번에는 Three.js의 구조를 익힌것을 바탕으로 하여, 공간구성을 해보겠다. 앞서 공부했던, Geometry(3차원 객체의 형상) 는 Material(3차원 객체의 색상, 투명도)과 함께 Mesh(3차원 객체를 표시하기 위한 객체)를 구성한다. Object 3D를 하위 클래스는 Mesh, Line, Points 세가지가 있다. 이 객체들은 3차원 공간상에 놓여지게 된다. 3차원 공간에 놓여지기 위해서는 "위치, 회전, 크기" 값이 필요하다. 따라서 Object 3D는 poistion, rotation, scale이라는 속성을 갖는다. 아래 코드는 Object3D의 기본 생성자 코드이다. 추가적으로 Quaternion도 있는게 보이는데, 이 부분은 추후에 알아보겠다. * 3D 객체는 2배의 크기로 표시..
[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의 일부..
728x90

티스토리툴바