three.js body에 힘 가하기 (applyForce)

// event
canvas.addEventListener('click', () => {
    if (preventDragClick.mouseMoved) return;

    sphereBody.velocity.x = 0;
    sphereBody.velocity.y = 0;
    sphereBody.velocity.z = 0;
    sphereBody.angularVelocity.x = 0;
    sphereBody.angularVelocity.y = 0;
    sphereBody.angularVelocity.z = 0;
    sphereBody.applyForce(new CANNON.Vec3(-500, 0, 0), sphereBody.position);
});

body객체에는 유니티의 addForce와 동일한 기능인 applyForce가 있어 특정 위치에 특정 벡터 방향으로 힘을 가할 수 있다. 위 코드는 이벤트로써 구현하였다.

 

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

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

    sphereMesh.position.copy(sphereBody.position);
    sphereMesh.quaternion.copy(sphereBody.quaternion);

    // reduce velocity
    sphereBody.velocity.x *= 0.98;
    sphereBody.velocity.y *= 0.98;
    sphereBody.velocity.z *= 0.98;
    sphereBody.angularVelocity.x *= 0.98;
    sphereBody.angularVelocity.y *= 0.98;
    sphereBody.angularVelocity.z *= 0.98;

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

공기저항을 구현하고 싶다면 위 코드처럼, 매 프레임마다 속도와 각속도에 1보다 작은 값을 곱해주는 방법이 있다.