과제 때문에 three.js 강제 공부 중

three.js 진짜 너무 어려운데 결과물 보는게 너무 재밌다.

---

3. 기본 뼈대 이해하기 Renderer, Scene, Camera

• Renderer : 카메라에 담긴 장면을 웹사이트에 구현해주는 렌더러
• Scene 배경색, 안개 등의 요소 포함 여러개의 3D 오브젝트와 빛들이 모인 장면
  
• Camera 장면을 화면에 담기 위한 카메라 시야각, 종횡비, 카메라 시작 끝 지점, 카메라 위치 등 설정
  

4. 3D 도형 추가하는 방법(+반응형 적용)

Geometry(물체의 형태)와 Material(물체의 색, 밝기, 질감 등)을 이용해 Mesh를 만듭니다.

Mesh는 Geometry, Material외에도 물체의 위치, 방향, 크기 등을 담은 객체입니다.

• Mesh는 어떤 Material로 하나의 Geometry를 그리는 객체입니다. Material, Geometry는 재사용이 가능하여 여러개의 Mesh가 하나의 Material 또는 Geometry를 동시에 참조할 수 있습니다. 파란색 정육면체 2개를 그린다고 해보죠. 일단 두 정육면체의 위치가 달라야 하니, 2개의 Mesh가 필요합니다. 그리고 정점(vertext, 꼭지점) 데이터를 가진 한 개의 Geometry와 채색을 위한 하나의 Material이 필요하겠죠. 이때 각 Mesh는 객체를 복사할 필요 없이, 같은 Geometry 그리고 Material을 참조할 수 있습니다.
• Geometry는 기하학 객체의 정점 데이터입니다. 구(sphere), 정육면체(cube), 면(plane), 개, 고양이, 사람, 나무, 건물 등 아주 다양한 것이 될 수 있죠. Three.js는 기본적으로 몇 가지의 내장(built-in) 기하학 객체를 제공합니다. 물론 직접 기하학 객체를 만들 수도 있고, 파일에서 기하학 객체를 불러올 수도 있죠.
• Material은 기하학 객체를 그리는 데 사용하는 표면 속성입니다. 색이나 밝기 등을 지정할 수 있죠. 하나의 Material는 여러개의 Texture를 사용할 수 있습니다. 기하학 객체의 표면을 이미지로 덮어씌울 때 주로 사용하죠.
• Texture는 이미지나 파일에서 로드한 이미지, canvas로 생성한 이미지 또는 다른 Scene 객체에서 렌더링한 결과물에 해당합니다.
• Light는 여러 종류의 광원에 해당합니다

도형 모양 바꾸는 법 : Gemoetry 객체 생성할 때 Docs에서 geometry 찾아서 생성

WebGLRenderer( parameters : Object )

자주 사용하는 parameters

• canvas : A canvas where the renderer draws its output. This corresponds to the domElement property below. If not passed in here, a new canvas element will be created.
• alpha : controls the default clear alpha value. When set to true the value is 0. Otherwise it's 1. Default is false. 투명도 조절.
• antialias - whether to perform antialiasing. Default is false. 계단현상 제거.

5. 도형 재질 추가하는 방법 (Material)

Light 추가하는 법

PointLight 객체 생성 (색, 강도)

PointLight 위치 set(x, y, z)

scene에 추가

Material 이해하기

MeshBasicMaterial - 도형이 제대로 불러와졌는 지 확인하는 용도. 빛의 영향을 받지 않음.

MeshStandardMaterial - 자주 사용

MeshDepthMaterial - 깊이감을 확인할 때 사용

MeshPhysicalMaterial - Basic 상위호환 버전 느낌?

clearcoat : 투명막 같은 것

Lambert vs Phong

둘 다 빛에 대해서 표현

MeshPhongMaterial : 반사 하이라이트가 있는 반짝이는 하이라이트가 있는 금속 재질을 표현할 때 좀 더 유리

6. Material에 Texture 추가하는 방법

TextureLoadaer load 메소드 이용해서 원하는 이미지 불러오기 import 같은 것임.

이 로드한 이미지 텍스쳐를 사용하고 싶은 Material에 가서 map 속성 값으로 넣어주기.

속성 값 map, normoalMap, displacementMap 더 공부해야 함.

이러한 값들이 모여서 하나의 도형이 완성 됨

7. 카메라 완벽 이해하기

Fov

시야각, 화각
인간에 시야범위는 대략 160도 정도

렌즈의 종류 (화각을 이해하기 위한 첫 단추) | 렌즈 초점거리 | 화각 (Fov)

• 광각 렌즈 | 35mm 이하 | 63도 이상
• 표준 렌즈 | 50mm | 47도
• 망원 렌즈 | 75mm 이상 | 28도 이하

따라서, Fov 값이 클수록 더 멀리 있는 것처럼 보이게 됨

Aspect

종횡비 = 가로 세로 비율

Near, Far

Near은 카메라의 시점이 시작되는 위치를 말하고, Far은 카메라의 시점이 끝나는 위치를 말한다.

앱의 성능향상을 위해서 필요할 수 있는 옵션

카메라가 바라보는 위치 설정

camera.lookAt 메소드 사용

참고자료

디자인베이스 유튜브 강의