카메라 lookAt 함수의 이용 - 예제, 활용법(example, how to)

=================== 이전 장에서 이어집니다 ==================

 

three.js 의 이 예제를 수정해서 어떨때 사용할지 생각해보겠습니다.

https://cyjses.tistory.com/33?category=833857

Three.js - 충돌처리(collision, bullet engine) - part2

사람처럼 방향성을 가진 케릭터를 간략하게 구현해봅니다. 1. character는 group으로 설정해서 여타 mesh를 받을수 있습니다. 2,3에서 box와 cone을 character에 추가하여 다음 모델을 만들었습니다.

 

이 모델의 회전방향은 원뿔의 꼭지점입니다.

 

여기서 three.js 라이브러리의 matrix의 lookAt 함수를 찾아보도록 합시다.

자 여기서 eye, target, up / _x, _y, _z 의 의미를 다시 정리하겠습니다.

 

보통 eye와 target 은 확실히 정해질것입니다. 카메라라 한다면, eye는 카메라의 위치일 것이고, target은 바라보는 방향입니다. 정확한 이해가 되죠. 문제는 up입니다. up은 카메라의 윗방향을 보통 상정하겠죠. 그러나, three.js같은 x-z/y 축에서 y = (0, 1, 0) 같은 단순 벡터를 제외하고는 정확하게 카메라의 머리방향을 사람이 빠르게 알기는 힘듭니다. 그것이 이전 포스트에 말한 내용입니다. 단지 y = (0,1,0) 의 유사방향, 즉 하늘 방향으로 향한다는걸 알죠. 즉 up은 보통 (0,1,0)으로 놓으면 카메라 머리가 위쪽방향으로 간다는 의미입니다.

 

다음 내부에서 쓰인 _x, _y, _z를 봅시다. 이것은 카메라의 위치가 설정되었을때 카메라의 정확한 좌우상하 벡터를 의미합니다. _z는 카메라의 엉덩이 부분의 벡터, _x 는 카메라의 오른쪽 벡터, _y는 카메라의 머리벡터입니다.

 

1번을 봅시다. _z 는 eye - target 입니다. eye쪽을 향하는 벡터겠지요. 즉 카메라의 엉덩이를 향하는 벡터입니다.

2번은 _z가 0일때의 처리입니다. 0이라는것은 eye = target 이라는 말입니다. 즉 방향을 알수 없죠. 그러면 _z.z = 1 , z축 양의 방향이 카메라 엉덩이가 됩니다. 즉 가장 일반적으로 상정하는 상황이 카메라가 z축 방향이라는 의미입니다. 상단의 초기 그림에서 원뿔의 꼭지점이 -z축을 바라보는걸 보세요. 의미를 알수 있을 겁니다.

 

3번 그리고 나서 _x , 즉 카메라의 오른쪽 벡터를 upX_z 로 구합니다. up을 (0 , 1, 0)로 가정하고, _z를 (0, 0, 1)로 가정해 봅시다. 그러면 카메라의 오른쪽, 위의 그림에서 보면 x축의 양의 방향이 오른쪽이 됩니다. 오른손 법칙을 써서 해보세요.

 

4번은 만약, up과 _z가 같은 방향이라면 어떻게 처리하느냐입니다.

_z는 normalize를 하므로, 만약 abs(up.z) === 1 이라면, _z가 (0, 0, 1) 이라는 뜻입니다. 이 경우 _z.z를 키우면 해결을 할수 없겠죠. _z.x를 약간 키워서 에러를 없앱니다. 이 경우가 아니라면 _z.z를 약간 키우는 것이 _z를 최대한 훼손하지 않는 방법이겠죠.

 

5번은 그렇게 구한 _z와 _x로 카메라의 머리방향, _y를 구하고 있습니다.

 

소스로 테스트를 해보겠습니다.

1. 메트릭스를 직접조작하기 위해 matrixAutoUpdate = false 합니다.

2. 위치와 eye를 일치시켰습니다. 그리고 setPosition으로 이동을 시켰습니다. lookAt함수는 회전만 관장합니다.

3.4 target, up을 할당합니다.

만약 position를 3,3,3으로 한다면 어떻게 될까요?

(3,3,3) 방향에서 중점을 바라보는걸 알수 있죠. 오브젝트의 바로 뒤에서 봐봅시다.

오브젝트의 머리는 윗쪽 어느방향으로 향하고 있죠. 우리가 설정한 up (0,1,0)은 아닙니다. 하지만 그 비슷한 방향이죠. 프로그래머가 이걸 바로 계산하기란 쉽지 않습니다. 그게 일반적인 상황입니다. 오브젝트 머리는 그냥 "적당히" 서있으면 되는것입니다. 물체의 방향은 yaw, pitch 는 변경했지만, 좌우의 흔들림은 없습니다. 보통 그게 더 자연스러운것입니다.

===================================================

 

끝으로 물체의 정면을 바라보는 벡터, 오른쪽벡터, 상향 벡터등을 가져오는걸 알아보겠습니다.

lookAt 함수의 6번 부분을 보면 구한 각각의 _x, _y, _z를 바로 매트릭스에 업데이트하는걸 볼수 있습니다. 이걸 가져오면 됩니다.

 

document를 찾아봤을때 이에 딱 맞는 함수는 못 찾았습니다. 개인 함수로 추가하도록 하겠습니다.

amendedThree.js

cameraLookAt.zip

4.95MB