20강 - Physics 3부

땅에 떨어진다

들어가는 말

우선 코드를 전체 공개는 하지 않고 있습니다. 왜냐하면 저작권 문제가 있기 때문입니다. 그래서 캡처를 통해 최대한 설명하는 점 양해 부탁드립니다.

Three.js 구와 Cannon.js 구의 위치 결합하기

이번 예제에서는 Cannon.js를 사용합니다. Cannon.js는 물리 시뮬레이션 용 라이브러리입니다. 쉽게 말해 Cannon은 물리적 거동을 담당하고 Three는 시각화를 담당한다고 볼 수 있습니다. 둘은 서로 각자의 객체를 관리합니다. 그러니까 같은 구여도 Three.js의 구와 Cannon.js의 구는 따로 존재하게 됩니다. 아래 구문은 서로 다르게 관리되는 두 구의 좌표를 결합한 내용입니다.

코 들으 좀 더 거슬로 올라가면 three로 만든 sphere와 cannon으로 만든 sphere, 그 sphere를 통해 만든 sphereBody가 존재합니다. 실제 물리적 거동을 하는 것은 sphereBody이기 때문에 해당 구의 위치를 three의 구에 적용시킵니다.

충돌체 설정하기

이제 문법을 계속 보니 어느 정도는 보입니다. 형상을 만들고 바디를 만든다. 그게 Cannon의 핵심 문법으로 보입니다.

우선 바닥의 형상을 정의합니다. 그것은? plane입니다. 그 형상을 body에 넣습니다. 여기에서 보면 body의 mass를 0으로 설정합니다. 설명에 의하면 기본값이 0이기 때문에 굳이 안 해도 됩니다. 0으로 설정해서 얻고자 하는 효과는 plane이 충돌에도 움직이지 않게 하기 위함이라고 합니다. 더 자세한 내용은 docs를 보긴 해야 할 것으로 보입니다.

그럼 위 구문에서 FloorBody를 90도 회전시키는 것을 볼 수 있습니다. 왜 그럴까요? Cannon의 형상이라 눈에 안 보이지만, 바닥 기준 90도 돌아간 상태입니다. 그래서 rotation부분 없이 구동하면 옆으로 튕겨나가는 공을 볼 수 있습니다. 따라서, 이를 다시 90도 돌려서 바닥과 수평하게 맞춰줘야 합니다.

다음시간에 좀 더 진행된 코드로 찾아뵙도록 하겠습니다.