01_Three.js 기본구조
영화촬영과 비교해보는 Three.js 의 기본 용어들을 알아본다.
계층구조
Scene : 말그대로 “장면” 이라는 뜻. 하위의 Mesh, Object, Light 와 같은 3차원 오브젝트로 표현된다.
표현된 신들을 카메라에 담고 (Camera)
카메라에 담은 장면들을 관객에게 보여주기 위해 상영한다 (Renderer)
02_Camera
PerspectiveCamera : 원근감이 있는 카메라 ↔ orthgraphicCamera
카메라 위치 조정하기
x, y 축은 가로, 세로축이고 z 축은 앞뒤로 이동할수 있는 여부를 따진다.
camera.position.z = 5 //x,z 축으로 일일히 설정하거나 camera.position.set(0,0,5) //set 으로 한꺼번에 설정 가능하다.
PerspectiveCamera
const scene = new THREE.Scene(); //씬에서는 다양한 카메라를 제공한다. const camera = new THREE.PerspectiveCamera( 75, //FOV 시야각 window.innerWidth / window.innerHeight, //aspect 1, //절두체에 대한 가장 가까운 거리, near 500 //절두체에 대한 가장 먼 거리, far ); renderer.render(scene, camera);
카메라로 사물을 비출 때 얼만큼의 시야각으로 물체를 바라볼지 결정한다.
첫번째 인자 : field of view (FOV) 에 해당.
이 각도가 넓어질수록 카메라에 더 많은 범위가 담기게 되면서 어안렌즈의 효과를 가진다.
카메라가 얼마나 가까이(near), 멀리(far) 볼수있는지 설정할 수 있는데,
기본적으로 내가 설정한 범위를 넘어가면 화면에 렌더링 되지 않는다.
하지만 성능적인 문제와 관련이 있어 적절한 값을 설정하여 불필요한 범위에 있는 물체들은 렌더링 되지 않도록 옵션설정을 하는것이 좋다.
orthgraphicCamera
하지만 테스트나 어떠한 상황때문에 모든 위치를 보게 하려면
lookAT 메소드를 이용할 수 있다.camera.lookAt(cube.position)WebGLRenderer
- antialias : true | false
- 표면이 까끌까끌하게 보일때 매끄럽게 해주는 옵션
Scene
좀더 입체적인 효과를 위해 조명옵션을 사용하여 그림자를 넣을 수 있다.
- directionalLight() : 조명의 색과 강도를 인자로 받으며 특정방향으로 직사광선을 쏴줄 수 있는 조명. 만약 MeshBasicMaterial() 메소드를 설정해두면 조명에 영향을 받지 않기 때문에 다른 종류의 MeshStandardMaterial() 메소드로 변경해줘야 한다.
- ambientLight() : Scene 의 은은한 밝기만 조절할 수 있고 그림자의 음영은 표현할 수 없다.
03_Mesh
3dObject 로, 직육면체, 구, 평면과 같은 도형(geometry)을 어떤 종류의 재질(material)을 사용하여 만들지 사용하는 오브젝트.
- BoxGeometry()
- 직육면체 도형 생성하기
- 인자로 높이,너비,깊이를 설정해 줄 수 있다.
- MeshBasicMaterial()
- 가장 기본적인 재질 메소드
- 인자로 color 를 설정할 수 있다.
- 조명에 영향을 받지 않는다.
이 두개의 메소드를 설정했다면 Mesh 메소드에 인자로 전달한고 scene 에 add 해준다.
const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0xcc99ff }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);
기본적으로 3d Object 의 위치를 지정하지 않으면 3차원 공간에 원점에 놓인다.
카메라또한 위치를 설정해주지 않아 Mesh 와 동일한 원점 상태이기 때문에 Mesh 를 담을 수 없는 위치에 놓이게 된다.
Mesh 를 시야에 담을 수 있도록 카메라의 위치는 시야에 보이도록 조절해줘야 한다.
Geometry
BoxGeometry
가장 기본적인 사각형 구조의 도형
geometry 는 기본적으로 여러개의 삼각형으로 구성되어있다.
이 삼각형을 몇개의 분할로 나눌 수 있는지 정하는것이 segment 옵션이다.
그 외
- PlaneGeometry
- 평면을 만들 수 있는 도형으로, 공간의 바닥을 만들때 사용되며 많이 사용되는 Geometry 중 하나이다.
- CapsuleGeometry
- 캡슐 형태의 도형
- CircleGeometry
- 원판 형태의 도형
- ConeGeometry
- 원뿔 형태의 도형
- EdgesGeometry
- 모서리 영역을 표현
- 모서리 영역을 표현하고자 하는 Geometry를 EdgeGeometry 를 통해 생성하기 때문에 다른 Geometry 와 다른 성격을 가지고있다.
- 다른 Geometry 함수를 인자로 받아야 한다.
const geometry = new THREE.BoxGeometry( 100, 100, 100 ); const edges = new THREE.EdgesGeometry( geometry ); const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) ); scene.add( line );
- IcosahedronGeometry
- 20면체와 같은 다면체 형태의 도형
- RingGeometry
- 가운데가 뚫린 링 모양의 도형
- ShapeGeometry
- 사용할 수 있는 마땅한 도형이 없어 직접 조작이 필요할 경우 사용되는 도형
- SphereGeometry
- 구 형태의 도형.
- 지구, 우주 등 표현할때 많이 사용된다.
Material
재질을 나타내는 Material 메소드
MeshBasicMaterial
- 조명의 영향을 받지않는 재질이기 때문에 빛이 있든 없든 잘 보인다.
- 하지만 음영표현이 전혀 되지 않는 특징이 있다.
- 컬러나 투명도(transparent,opacity),뼈대만 보이는 와이어프레임, 내가 렌더하여보여주고 싶은 면만 보여주는 사이드설정(size:THREE.BackSide) 등을 설정할 수 있다.
LineBasicMaterial
- 라인의 컬러,width, 등 옵션을 사용할 수 있다.
그 외
- MeshDepthMaterial
- 카메라와의 간격여부에 따라 진하거나 옅게 표시
- MeshLambertMaterial
- 빛에 반응하여 반사,굴절효과를 표현할 수 있다.
- MeshPhongMaterial
- MeshLambertMaterial 는 물체가 빛을받았을때 생기는 반사점을 표현하기에는 한계가 있다.
- 대신 MeshPhongMaterial 를 사용하여 더 매끄럽게 반사점 표현이 가능하다.
- MeshStandardMaterial
- PBR 이라는 물리기반 렌더링모델사용
- 재질의 거칠기와 금속성이 표현 가능.
- 나머지 MeshMaterial 메소드들에 비해 기능이 많지만 그만큼 성능이 떨어질 수 있기 때문에 필요에 따라 적절히 사용해야 한다.
- MeshToonMaterial
- 좀 더 만화적인 재질로 구성
- 톤의 갯수에 따라 각진 그림자의 개수를 조절할 수 있다.