three.js에서
.position, .scale =는 바로 set할 수 있다.
myMesh.position.set(10, 0, 0); -> translation matrix 만들어짐.
myMesh.scale.set(2, 2, 2); -> scale matrix 만들어짐.rotation은
//myModel.quaternion -> 이 밑에 녀석으로 회전 해야함.
//FromAxisAngel로 각을 딱 줬을 때 회전행렬 나오면, quaternion 값은??
myMesh.setRotationFromQuaternion(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 4));
myMesh.setRotationFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 4);
로 회전 할 수 있다.
three js에서 곱 순서는
Scale -> Rotation -> Translation이다.
Scale -> Translation
Translation -> Scale
결과가 다르다.
곱 순서를 바꾸고 싶다면 직접 행렬을 만들고 적용시켜야한다.
local transform!!
three.js에서 localtransform을 위한 matrix는 .matrix이다.
local transform은 부모를 기준으로 한 변환이다.
부모
자식
자식의 local transform 은 부모 공간으로 가는 transform!
자식의 world transform 은 local transform * 부모의 world transform!
root의 직속 자식은 .matrix가 .matrixWorld와 같다!
왠줄 알겠죵? root는 world를 의미하고, 직속 자식의 부모로 가는 변환은 .matrixWorld나 마찬가지이다.
.unproject() => projection space의 값을 world space로 mapping해준다.
camera는 viewTransform, projectionTransform을 가지구 있다.
renderer는 viewportTransform을 가지고 있다.
screen space의 값을 projection space로 맵핑해주어야 한다.
(x_ss / render_w) 2 - 1,(-y_ss / render_h) 2 + 1, -1
x_ss 는 사용자가 입력한 마우스 커서의 x위치
y_ss 는 사용자가 입력한 마우스 커서의 y위치, 앞에 음수를 왜 붙였지?
이 이유는
y축의 방향이 반대기 때문이다!
만약 (y_ss / render_h) * 2 -1 을 해서 얻었을 경우,
위에있는 좌표를 마우스를 가져다 댔을 때, 음수 값이 나오고,
아래에 있는 좌표로 마우스를 가져다 댔을 떄, 양수 값이 나온다.
projection space에서는 반대가 되야하기 때문에 꼭 음수를 붙여준다!
아무튼 이렇게 하면 proejection space의 값이 나온다.
이제 이거에 .unproject를 하면 world space에서의 값이 나오는데!
이 vertex들은 near 평면에 있을 것이다.
그러면 이 때 diiference값은 매우 작은데, (마우스 클릭 -> 마우스 후 클릭) 화면에서 유의미하게 동작하려면 많이 움직여야한다.
비례식을 가지고 scale해야함.
