6강 사용자 정의 지오메트리 three.js가 제공하는 지오메트리 외에도 직접 정의하는 지오메트리를 만들어보자 geometry는 three.js에서 BufferGeometry 클래스를 통해 정의한다. BufferGeometry에 정의할 수 있는 속성 position: geometry를 구성하는 3차원 좌표에 대한 정점(Vertex) normal: 각 정점에 대한 수직 벡터 color: 각 정점에 대한 색상 uv: 각 정점에 대한 텍스쳐 맵핑 좌표 Vertex index: position 속성으로 지정된 정점에 대한 인덱스 배열 mesh를 구성하는 면의 최소 단위는 삼각형이고 이 삼각형은 3개의 정점으로 구성된다. 이 삼각형을 구성하는 3개의 정점에 대한 position 속성에서의 정점 인덱스 번호가 Ve..

5강 재질 part4 - 텍스쳐2 [three.js] Material에 텍스쳐를 입혀보자 5강 재질 part3 - 텍스쳐 map 속성 텍스쳐 객체를 지정하면 지오메트리의 표면에 지정된 텍스쳐의 이미지가 옷처럼 입혀짐 메쉬의 모든 material에 적용할 수 있다 텍스쳐 객체 이미지나 동영상 등을 tech-hayo.tistory.com 저번 시간에는 Material의 map 속성으로 이미지를 텍스쳐로 만들어 입히고, 이 텍스쳐의 여러 가지 속성을 다뤄보았다. 이번 시간에는 다양한 map을 통해 더 세밀하게 텍스쳐를 고도화하는 방법을 배워본다. 준비하기 연습하기 전, 사용할 텍스쳐 이미지를 준비해야 한다. 여기에서 텍스쳐 이미지를 다운로드한다. [Glass Window 002 Glass Window 002..

핵심 요약 주석이 필요하다는 것은 코드가 명확하게 짜여있지 않다는 뜻이다. ⇒ 주석을 잘 작성하는 것보다 코드의 표현력을 개선해서 주석을 제거하려고 노력하는 것이 바람직하다. 주석으로 나타내려는 설명을 함수나 변수로 표현하라. 코드가 이미 표현하고 있는 정보를 주석으로 중복 설명하지 마라. 소스 코드 관리 시스템이 줄 수 있는 정보를 주석으로 표현하지 마라. 주석 근처에 있는 코드에 대한 정보만 기술하라. 전역적인 정보나 다른 위치에 있는 코드에 의존하는 정보는 기술하지 않는다. 4장 주석 주석을 사용하는 이유는 코드로 의도를 표현하지 못했기 때문이다. 주석은 순수하게 선하지 못하다. 프로그래머들이 주석을 유지하고 보수하기란 현실적으로 불가능하기 때문이다. 따라서 주석은, 거짓말을 자주 한다. 오래될수록..

5강 재질 part3 - 텍스쳐 map 속성 텍스쳐 객체를 지정하면 지오메트리의 표면에 지정된 텍스쳐의 이미지가 옷처럼 입혀짐 메쉬의 모든 material에 적용할 수 있다 텍스쳐 객체 이미지나 동영상 등을 통해 생성된다 TextureLoader를 통해 변환할 수 있다 UV 좌표 텍스쳐 맵핑은 지오메트리에 UV 좌표로 맵핑되어 있다. 0과 1 사이의 값을 가진다. U: 수평 방향에 대한 축, V: 수직 방향에 대한 축 three.js의 uv 좌표 (0,0)은 좌측 하단이고, (1,1)은 우측 상단이다. PRACTICE: MeshStandardMaterial에 텍스쳐 적용하기 가장 많이 사용되는 MeshStandardMaterial에 적용해 보자 이미지로 텍스쳐 객체 생성하기 이미지가 네트워크에서 성공적으..

5강 재질 (part1 ~ 2) Material은 지오메트리와 함께 Object3D 객체를 생성하기 위한 필수 요소 Object의 세 가지 파생 클래스 (Mesh, Line, Points) 각각을 위한 클래스로 분류되어 제공된다 Material 모든 material 파생 클래스는 부모 클래스인 Material의 속성을 사용할 수 있다 const material = new THREE.MeshBasicMaterial({ // Material의 속성값 (기본값으로 설정) visible: true, transparent: true, opacity: 1, depthTest: true, depthWrite: true, side: THREE.FrontSide, // MeshBasicMaterial의 속성값 color..

시작하기 전에 3차원 공간 상에 놓이는 Object3D의 파생 클래스는 3가지가 있다. Mesh: 삼각형 면으로 구성된 객체 Line: 선형 객체 Points: 점 이 3D 오브젝트가 3차원 공간 상에 놓이기 위해서는 다음 값을 필요로 한다. Position: 위치 Rotation: 회전 Scale: 크기 이 값들은 4x4 크기의 행렬 정보로 변환된다. 목표 xyz 공간 상에 여러 3D 객체를 구성하는 코드를 작성해 본다. 공간 구성에 Scene Graph를 이용한다. 태양과 지구, 달의 자전과 공전을 구현한다. Scene Graph로 3D 공간 구성하기 scene graph를 코드로 작성하는 것 = 3차원 객체를 공간상에 구성한다는 것 ** 화살표는 부모 → 자식을 뜻한다 부모-자식 관계로 각 Obje..

3장 함수 함수는 프로그램의 가장 기본적인 단위이다. 이 장에서는, 의도를 분명하게 표현하는 함수를 만드는 방법 프로그램 내부를 직관적으로 파악할 수 있도록 함수를 쉽게 읽고 이해할 수 있도록 만드는 방법 에 대해서 알아본다. 작게 만들어라! 함수는 작을수록 더 좋다. 그래야 읽고 이해하기 쉬워진다. 조건문, 반복문 등에 들어가는 블록은 한 줄이어야 한다. 즉, 중첩 구조가 생길 만큼 함수가 커져서는 안 된다. 함수에서 들여 쓰기 수준은 2단을 넘어서면 안 된다. 한 가지만 해라! 함수는 한 가지를 해야 한다. 그 한 가지를 잘해야 한다. 그 한 가지만을 해야 한다. 여기에서 ‘한 가지를 한다’가 의미하는 것은 추상화 수준이 하나인 단계만 수행한다는 것이다. 단순히 다른 표현이 아니라 의미 있는 이름으로..

3강 Geometry BufferGeometry Geometry는 기본적으로 BufferGeometry를 상속받는다. Geometry의 형상을 정의하기 위한 데이터는 총 6가지이다. Geometry의 형상을 정의하기 위한 데이터 정점: xyz 축에 대한 좌표 정점 인덱스: 3차원 오브젝트의 면을 구성하는 정점에 대한 인덱스 수직 벡터: 정점에 대한 수직 벡터 정점 색상: 벡터 정점의 색상 텍스쳐 맵핑을 위한 UV 좌표 사용자 정의 데이터 3차원 시각화는 이 여섯 가지 데이터가 GPU에 전달되면서 처리된다. ❓UV 좌표란 UV 좌표는 텍스쳐 이미지를 3차원 오브젝트에 입히기 위한 변환 기준. 3D 모델의 표면을 2차원 좌표로 전개하면 UV 좌표가 된다 좌표값은 0 ~ 1 사이의 값만 가질 수 있다. thr..