참고)
https://brm.io/matter-js/
https://paulie.dev/posts/2020/08/react-hooks-and-matter-js/

해볼 내용

리액트에서 Matter.js를 사용하여 바닥을 만들고 공을 생성해보기

라이브러리 설치

npm i matter-js
혹은
yarn add matter-js

1. 캔버스와 캔버스를 담을 컨테이너 생성 및 ref 등록

export default function MatterTest() {
    const containerRef = useRef();
    const canvasRef = useRef();
  
  	...
    ...
    ...
    
  	return (
        <div
            ref={containerRef}
            style={{
                width: 600,
                height: 600
            }}
        >
            <canvas ref={canvasRef} />
        </div>
    );
}

2. 엔진 및 렌더러 생성

useEffect(() => {
        let Engine = Matter.Engine;
        let Render = Matter.Render;
        let World = Matter.World;
        let Bodies = Matter.Bodies;

        let engine = Engine.create();

        /**
         * @element - canvas를 담을 HTMLelement
         * @engine - 사용할 engine
         * @canvas - 렌더링할 캔버스
         * option: {
         *   @width - 렌더링의 넓이
         *   @height - 렌더링의 높이
         *   @background - 렌더링 기본 색상 (배경)
         *   @wireframes - 해당 캔버스가 wireframes만 렌더링할 것인지
         * }
         */
        let render = Render.create({
            element: containerRef.current,
            engine: engine,
            canvas: canvasRef.current,
            options: {
                width: 600,
                height: 600,
                background: 'skyblue',
                wireframes: false
            }
        });

3. 바닥과 공 생성

        /**
         * @param x
         * @param y
         * @param width
         * @param height
         * @param option
         * 
         * option {
         *   @param isStatic 물체를 고정시킬지에 대한 flag
         *   @param fillStyle 도형을 채울 색상 (default: 랜덤)
         * }
         */
		const floor = Bodies.rectangle(300, 600, 600, 30, {
            isStatic: true,
            render: {
                fillStyle: '#99dd33'
            }
        })
        
        /**
        *  @param x
        *  @param y
        *  @param radius
        *  @param restitution 물체의 restitution (elasticity) 정도
		*/
        const ball = Bodies.circle(300, 0, 50, 50, {
            restitution: 0.9,
        });

Bodies를 통해 원하는 도형을 선택하여 그릴 수 있음

4. 생성한 도형을 등록 및 실행

        World.add(engine.world, [floor, ball]);
        Matter.Runner.run(engine);
        Render.run(render);

최종 코드

import { useEffect, useRef } from "react";
import Matter from "matter-js";

export default function MatterTest() {
    const containerRef = useRef();
    const canvasRef = useRef();

    useEffect(() => {
        let Engine = Matter.Engine;
        let Render = Matter.Render;
        let World = Matter.World;
        let Bodies = Matter.Bodies;

        let engine = Engine.create();

        let render = Render.create({
            element: containerRef.current,
            engine: engine,
            canvas: canvasRef.current,
            options: {
                width: 600,
                height: 600,
                background: 'skyblue',
                wireframes: false
            }
        });

        const floor = Bodies.rectangle(300, 600, 600, 30, {
            isStatic: true,
            render: {
                fillStyle: '#99dd33'
            }
        })
        
        const ball = Bodies.circle(300, 0, 50, {
            restitution: 0.9,
        });

        World.add(engine.world, [floor, ball]);

        Matter.Runner.run(engine);
        Render.run(render);
    }, []);

    return (
        <div
            ref={containerRef}
            style={{
                width: 600,
                height: 600
            }}
        >
            <canvas ref={canvasRef} />
        </div>
    )
}