Matter JS

Matter.js는 2D 물리 엔진으로. 웹에서 움직이는 물체(예: 공, 상자 등)의 충돌, 중력, 마찰, 반동 등을 현실처럼 동작해주는 자바스크립트 라이브러리이다.

Matter.js

🔹의존성 패키지 추가

npm install matter-js

🔹matter 모듈을 불러온다.

import Matter from 'matter-js';

🔹Component를 생성한다.

const MatterCanvas: React.FC = () => {
  const sceneRef = useRef<HTMLDivElement>(null);
  .........

React.FC는 함수형 컴포넌트를 의미하는 Typescript이다.

🔹Matter.js의 구성요소를 생성한다.

const Engine = Matter.Engine;
const Render = Matter.Render;
const Runner = Matter.Runner;
const Bodies = Matter.Bodies;
const Composite = Matter.Composite;