자바스크립트/threeJS

[threeJS] cos, sin, tan 함수를 사용해서 배치하기

KIMJAVAN 2023. 8. 7. 09:58
728x90

 

 

cos, sin함수를 사용해서 x, z 좌표를 설정하는 이유

card.position.x = 1 * Math.cos(angle);
card.position.z = 1 * Math.sin(angle);

원의 중심을 기준으로 일정 각도만큼 거리가 떨어져 있기 때문이다.

각도가 중요하지 않고 거리만 사용할거면 그냥 상수 써도 되는데

45도씩 증가 + 이동하면서 카드가 배치되어 있기 때문에 cos, sin 함수를 이용한다

card.position.y = 1 * Math.tan(angle);

position y값을 설정할 때에는 tan를 사용한다

 

 

오답노트

이번 모델링에게 각도를 부여했는데 원하는대로 되지 않았음.

카드가 모두 앞면을 바라보게 설정되어있었는데, 시계바늘처럼 배치하고 싶은 경우 각각의 카드에 다른 값으로 rotation값을 줘야한다.

card.rotation.y = (angle) + (- Math.PI / 4); card.rotation.y = i * (360 / 8) * (Math.PI / 180);

상위의 코드에서 주석 처리한 이 부분은 카드를 같은 각도만큼 돌게한다.