20강 - Physics 2부

오늘도 10분 공부한 것에 대하여

by 코드아키택트

안녕하세요, 코드아키텍트입니다. 오늘도 열심히 공부를 이어가보겠습니다.

이번 시간에는 물리 법칙을 적용하기 위해 Cannon.js 라이브러리를 설치하고 설정하는 방법을 알아보겠습니다.

Screenshot 2024-07-13 at 12.07.49 AM.png

물리법칙을 적용하기 위한 내용들이 슬슬 나오기 시작합니다. 이전 시간에 cannon 라이브러리를 사용한다고 했습니다. 그럼 설치부터 이야기를 시작합니다.


설치 방법: Yarn 또는 NPM

저는 개인적으로 yarn을 선호합니다. 설치 방법이 더 간결하며, 병렬화 덕분에 npm보다 빠르다고 알려져 있습니다. 설치 명령어는 다음과 같습니다:

yarn add cannon

위 명령어를 통해 설치를 합니다.

Screenshot 2024-07-13 at 12.10.28 AM.png

위 명령어를 통해 설치를 하면 package.json 파일에 cannon이 추가된 것을 확인할 수 있습니다.


Cannon 설정

Three.js와 마찬가지로 Cannon.js도 매우 직관적인 문법을 가지고 있습니다. Three.js에서 장면(scene)을 만들고 그 안에 객체(object)를 넣고, 카메라(camera)를 설정하는 것처럼 Cannon.js에서도 비슷한 절차를 따릅니다.


우리가 물리적인 세계를 만들며녀 먼저 세계를 만들고 중력을 설정해야 합니다. 그리고 중력이 작용할 물체를 추가해야 합니다. 이를 코드로 표현하면 다음과 같습니다:

Screenshot 2024-07-13 at 12.13.25 AM.png

위 코드를 보면 프로그램의 구조가 매우 명확합니다. 세계를 만들고, 중력을 설정하고, 물체를 생성한 후, 그 물체를 세계에 추가하는 순서로 이루어져 있습니다.


이렇게 해서 물리 법칙이 적용된 세계를 설정할 수 있습니다. 오늘은 여기까지 짧게 마치겠습니다.


다음엔 좀더 발전된 내용과 그림으로 돌아오겠습니다.

이전 03화20강 - Physics 1부