관리 메뉴

꿈꾸는 개발자

Three.js 수학 (행렬) 본문

3D

Three.js 수학 (행렬)

rickysin 2024. 7. 24. 21:09

행렬의 곱의 의미 ( Right에서부터 순차적으로 적용된다) 

•  A x B : 행렬  A 의 변환이 먼저 적용되고, 그 다음에 행렬  B 의 변환이 적용됩니다.
•  B x A : 행렬  B 의 변환이 먼저 적용되고, 그 다음에 행렬  A 의 변환이 적용됩니다.

 

예시: 

•  A : 객체를  5  단위만큼 x 축으로 이동하는 행렬
•  B : 객체를  90 도 만큼 z 축을 중심으로 회전시키는 행렬

 

•  A x B: 객체를 먼저  90 도 만큼 z 축을 중심으로 회전시키고, 그 다음에 x 축을 따라  5  단위만큼 이동시킵니다.
•  B x A : 객체를 먼저 x 축을 따라  5  단위만큼 이동시키고, 그 다음에  90 도 만큼 z 축을 중심으로 회전시킵니다.

 

행렬의 곱셈의 경우 A와 B의 각 요소를 곱하고 더한 결과라고 할 수 있다. 


역행렬의 의미

      • 변환의 반전: 행렬의 역행렬은 원래 변환의 반대 방향으로 변환을 적용합니다. 예를 들어, 어떤 객체를 이동시키는 행렬이 있다면, 그 행렬의 역행렬을 적용하면 객체를 원래 위치로 되돌릴 수 있습니다. 
      • 카메라 변환: 카메라의 뷰 행렬은 카메라 좌표계를 세계 좌표계로 변환하는 행렬입니다. 이 뷰 행렬의 역행렬은 세계 좌표계를 카메라 좌표계로 변환합니다. 이를 통해 월드 좌표계에서 카메라의 위치와 방향을 찾을 수 있습니다.
        • 일반: (카메라 => 월드좌표) 
        • 역행렬: (월드좌표 => 카메라 좌표)
      • 카메라 변환:
        • world => local 
        • local => world

3D상에서 각 행렬이 가지는 의미 (4x4) 

const matrix = new THREE.Matrix4();

// 예제: 행렬의 각 요소를 설정
matrix.set(
  1, 0, 0, 10, // 첫 번째 열 (X축 방향 벡터 및 X 위치) 객체의 x축 회전과 크기 변환을 포함
  0, 1, 0, 20, // 두 번째 열 (Y축 방향 벡터 및 Y 위치) y축의
  0, 0, 1, 30, // 세 번째 열 (Z축 방향 벡터 및 Z 위치) z축의
  0, 0, 0, 1   // 네 번째 열 (균등한 스케일링)
);

console.log(matrix);

 


Transpose and Inverse and identity Matrix

Transpose (전치)

transpose는 행과열을 뒤바꾸는 것을 의미한다.행렬 A의 전치 행렬은 A^T 로 표시한다. 

용도:  데이터 변환, 행과 열의 교환

 

Inverse (역행렬)

 

행렬의 역행렬은 원래 행렬과 곱했을 때 단위 행렬을 생성하는 행렬을 의미한다.행렬 의 역행렬은 A^-1로 표시한다. 

 

조건

  • 행렬 A의 행과 열의 수가 같아야 한다. 

용도: 선형 방정식 풀기, 시스템 해석

 

Identity Matrix (단위 행렬)

단위 행렬은 대각선 요소가 모두 1이고 나머지 요소가 모두 0인 정사각 행렬이다. 단위 행렬은 보통 로 표기된다. 

 

 

* 참고사항: 3D 상에서 Rotation [R/t]에서 R의 경우 회전 Matrix의 역행렬은 곧 기존 Matrix의 전치에 해당한다. (S,T의 경우는 다르다)