본문 바로가기

반응형

DEV/THREE

(2)
[THREE] three.js의 camera와 contols 알아보기! camera 아래의 사진처럼 camera는 scene에 담긴 3d 공간을 비추어 랜더러에게 넘겨주는 역할을 합니다. 카메라는 시야각(fov), 시작(near) / 끝(far) 지점 등을 조절할 수 있습니다. camera 기본개념 fov (field of view) 시야각 이라고 합니다. 시야각이 커질 수록 카메라가 담는 화면의 영역이 넓어집니다. Three.js에서 다루는 각도들과는 다르게 radian이 아닌 일반적인 각도를 씁니다. aspect fixel ratio → 화면의 가로세로 비율 near / far 카메라의 시야의 가장 먼 곳(far)과 가장 가까운 곳(near)을 뜻합니다. far는 near보다 항상 커야합니다. camera의 종류 카메라의 종류에는 perspective, orthograp..
[THREE] three.js의 renderer와 scene알아보기! 요즘은 업무상 three.js를 공부하고 있습니다. 이전에도 사용했던 기술이지만 기초부터 천천히 다져보기 위해 다시 공부하고 있는데요! 블로그에 내용을 공유해보고자 합니다! Three.js의 기본구조 아래의 사진과 같이 가장 큰 바탕이자 뷰포트와 같은 역할을 하는 renderer, 가장 큰 node이자 모든 요소들이 실질적으로 보여지는 scene, 그러한 요소들은 바라보는 즉 우리가 보는 눈의 역할을 해주는 camera로 볼 수 있습니다. renderer three.js의 핵심 객체로 camera, scene등을 객체로 넘겨 받아 표현합니다. 기본적으로 WebGL을 사용하며, renderer가 canvas에 대한 이미지를 생성 할 때, GPU가속 이미지 처리와 효과를 허용합니다. // 랜더러 생성 - 매..

반응형