카메라 셋팅
카메라의 경우 기본적으로 PerspectiveCamera를 사용하는데
three.js 카메라 문서를 보면 이해하기 편하다!
카메라 변수를 선언해주고 PerspectiveCamera의 속성들을 더 이해하기 쉽게 이미지와 함께 설명해주면
- fov - 카메라의 시야각도
- aspect - 종횡비,가로세율비율, 화면의 높이 분의 화면의 넓이
- near - 가까운 구역 (mesh가 near보다 앞에 있으면 보이지 않음)
- far - 먼 구역 (mesh가 far보다 뒤에 있으면 보이지 않음)
mesh는 near와 far 사이에 있어야 렌더러에 노출된다.
<script>
// Camera
const camera= new THREE.PerspectiveCamera(
75, //시야각
window.innerWidth / window.innerHeight, //종횡비
0.1, //near
1000 //far
);
camera.position.z = 5;
scene.add(camera);
</script>camera 변수를 선언해주고 PerspectiveCamera라는 threeJS의 기능을 사용해 해당 속성들을 셋팅해주었습니다! 여기서 near와 far의 수치는 추후에 설명!
camera.position.z = 5; 는 카메라의 위치를 z축으로 +5 한다는 말로
3d상에서의 z축은 앞뒤로 생각하면 된다!
해당 코드에서 position은 three.js에서만 사용하는 메서드로
뒤이어 나오는 add 또한 three.js에서만 사용하는 메서드이다.
scene.add(camera); 과 같이 camera를 scene에 추가!
여기서 헷갈리지 말아야 하는것이
.add는 jquery에서는 다른 의미로 사용되는데!
- Three.js - add() : 3D 객체 계층에서 자식 객체를 추가할 때 사용.
scene.add(camera); - jQuery add() : DOM 요소 셀렉션을 확장할 때 사용합니다.
$('p').add('div');
<!-- 값
<body>
<p>문단입니다.</p>
<div>박스입니다.</div>
</body>
-->
이건 요소를 DOM에 추가하는 게 아니라, "선택된 요소 집합을 확장"하는 의미!
📎 더 디테일한 정리!!
웹 퍼블리셔의 코딩 일기