three.js cannon.js로 물리 시뮬레이션 적용하기

// Cannon
const cannonWorld = new CANNON.World();
cannonWorld.gravity.set(0, -9.8, 0);

const floorShape = new CANNON.Plane();
const floorBody = new CANNON.Body({
    mass: 0,
    position: new CANNON.Vec3(0,0,0),
    shape: floorShape,
});
floorBody.quaternion.setFromAxisAngle(
    new CANNON.Vec3(-1, 0, 0),
    Math.PI / 2
);
cannonWorld.addBody(floorBody);

const boxShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5));
const boxBody = new CANNON.Body({
    mass: 1,
    position: new CANNON.Vec3(0, 3, 0),
    shape: boxShape
});
cannonWorld.addBody(boxBody);

물리연산이 적용되는 CANNON 객체로 Plane모양을 만들고, Body를 통해 질량, 위치, 모양 등을 지정하여 물리연산이 적용되는 오브젝트를 만든다.

world객체에 addBody를 통해 생성한 body 오브젝트를 추가하여 물체에 물리 시뮬레이션을 추가할 수 있다.

이 body가 유니티에서 rigidbody의 역할과 동일하다. 

 

function draw() {
    const delta = clock.getDelta();

    let cannonStepTime = 1/60;
    if (delta < 0.01) cannonStepTime = 1/120;
    cannonWorld.step(cannonStepTime, delta, 3)

    boxMesh.position.copy(boxBody.position);
    boxMesh.quaternion.copy(boxBody.quaternion);

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

렌더링 할 때는 delta를 이용하는데, 매 프레임의 시간 단계를 step함수를 통해 결정할 수 있다. 일반적으로 60프레임으로 설정하기 위해 StepTime을 1/60으로 설정한다. delta로 성능을 보정하고, 지연되는 경우 보간하는 횟수를 3회로 지정하였다.

위 코드처럼 delta값 즉 화면 주사율에 따라서 StepTime을 다르게 설정하기도 한다.

 

물리연산이 적용되는 body의 position과 quaternion을 mesh에 copy하여 적용함으로써 mesh에 물리연산이 적용되는 것처럼 보이도록 할 수 있다.