만들어 나가는데 잘되는지 보려면 

캔바스에 그려봐야겠죠 대략 HTML 구조를 대충 짜봤스빈당

 
(main.html)

앞으로

파일 한개 == 하나의 객체 정의

입니다. 그래서 스크립트 파일 로드하는 곳을 보면

그동안 만든거 3개가 있습니다. 



그리고 할 작업은 직전에 3차원 객체를 만들어봤는데

아무기능도 없기 때문에 , 여기다가 기능 추가를 할 것입니다.


3차원 객체라고 했지만 실제로는 하나의 로컬 좌표계라고 보시믄 됩니다.

그래서 해당 로컬 좌표계의 각 축의 방향이 항상 직교가 되게 만들어야 합니당


그러면 lookAt 메서드를 추가해보겠습니다.

 
(Obj3d.js)

lookAt의 인자 x,y,z 들은 실제 월드 좌표계에서 해당되는 어떤 위치를 나타냅니다.

즉 월드좌표계의 특정 지점을 보라고 지시를 하면

해당 로컬 좌표계는 그 지점을  바라봐야 합니다. (z 축)


그래서 at 방향벡터를 세팅을 하고요

 그래서 at 과 up 벡터를 외적한 수평방향의 벡터를 구합니다.

여기서는 _hv 라고 이름을 붙이고 프로퍼티로 추가를 했는데

미리 만들어둔 이유는 new 연산을 줄이기 위해서입니다.

임시 변수라고 생각하믄 됩니다.


근데 재밌게도 다시 한번 더 외적을 구해서 up벡터를 다시 구합니다.

이 이유는 ,  어떤 지점을 바라볼지 모르기 때문에

원래 up 벡터와

새로 지정된 at 벡터가  직교하지 않게 될 가능성이 있습니다.


그래서 구한 _hv 벡터를 이용해서 다시 재계산 합니다.

이렇게 하면 이제 

새로 바라보라는 지점을 바라본 후 서로 전부 직교하게 됩니다. 

위 연산을 잘 살펴보면 현재 좌표계는 

오른손 좌표계를 기준으로 하고 있다는 것을 알수 있스빈당




음 저는 총 모양으로 해서  

검지를 Z 축으로 해서  at 을 향해 겨누는것을 생각했었는데

위 그림처럼 생각하는 사람이 많군요 어차피 똑같긴 하지만요

 


또 하나의 극강의 스킬!!

두 벡터를 감싸쥐는 방향으로 쥘때

엄지가 향하는 방향 입니다. 이는 외적 연산할때

좀 헷갈릴텐데 유용한 스킬이죠


그러면 지금까진 그냥 짜기만 했는데 실제로 맞게 돌아갈까요??

좀 복잡하니까 한번 테스트를 해보겠습니다, 우선

dot 연산 (내적 연산) 을 구현합니다. 쉽습니다. 그냥 각 성분을 곱해서 더하면 되죠



 

만일 두 벡터가 직교한다면 내적연산을 취하면 0이됩니다.

그래서 at, up, _hv 벡터들은 서로 직교한다면 내적을 취할때 전부 0이 되어야 겠죠

테스트입니다.

 



테스트 성공입니다.
Posted by 멍충한아싸

댓글을 달아 주세요