three.js 기본 구성요소
Scene : 오브젝트들이 있는 공간 (카메라, 빛, 메쉬 등등)
Mesh : 웹에서 직접 보여줄 요소, Geometry(모양)과 Material(재질)로 구성되어 있음
Camera : 사용자가 볼 화면을 찍고 있는 카메라
Renderer : 카메라가 찍은 화면을 사용자 화면에 그림
Light : 재질에 따라 빛이 있어야 보이는게 있기도 함
입력할 값들의 단위는 정해져 있지 않음 즉 제작자가 1은 1m다 라는 기준을 잡고 하면 그것이 단위가 되는것이다
Camera
PerspectiveCamera : 3D 장면을 렌더링하는데 가장 널리 쓰이는 투영 모드
PerspectiveCamera(fov, aspect, near, far)fov : 카메라의 시야각
aspect : 카메라의 가로,세로 비율
near : 카메라 기준 어느지점부터 보이게 할껀지 (설정 값 보다 가까이 있으면 존재한다고 해도 안보임)
far : 카메라 기준 어느지점부터 안보이게 할껀지 (설정 값 보다 멀리 있으면 존재한다고 해도 안보임)
Light
DirectionalLight : 태양과 비슷하게 빛을 쏴 그림자를 만듬
const directionalLight = new THREE.DirectionalLight(색상, 투명도);Mesh
BoxGeometry : 직육면체를 생성
const geometry = new THREE.BoxGeometry(width, height, depth);MeshStandardMaterial : 표준재질, Light에 반응하여 그림자를 나타냄
MeshBasicMaterial : Light가 없어도 보임
const material = new THREE.MeshStandardMaterial({ color: "#5f5f5f" });
const material = new THREE.MeshBasicMaterial({ color: "#5f5f5f" });
출처
https://threejs.org/
https://www.inflearn.com/course/3d-%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9
