Collision detection in javascript

Help & Support
,
1

I am making a little game using playcanvas in a web browser. I build it in javascript, and I am trying to add collisions. However, they seem to not be implemented.

I defined two entities : a cube and a ball, where you control the ball. I am trying to detect when the ball touches the cube. I defined them like this :

// Define the cube here
const cube = new pc.Entity("cube");
cube.addComponent("model", {
    type: "box"
});
cube.addComponent("collision", {
    type: "box",
    scale: cube.getLocalScale().divScalar(2)
});
cube.addComponent("rigidbody", {
    type: "static",
    friction: 0.5,
    restitution: 0.2
});

cube.on("collisionstart", (result) => {
    console.log(result) // Just to see what it is
});

// Define the ball here
const ball = new pc.Entity("ball");
ball.addComponent("model", {
    type: "sphere",
    castShadows: true,
    receiveShadows: true
});
ball.setLocalScale(0.2, 0.2, 0.2);
ball.setPosition(-5, 0, 0);
ball.addComponent("collision", {
    type: "sphere"
});
ball.addComponent("rigidbody", {
    type: "dynamic"
});
ball.on("collisionstart", (result) => {
    console.log(result) // Just to see what it is
});

I use key inputs in the app.on("update") event to move the ball with the ball.translate method, with these methods :


const forward = (delta) => {
    const forward = ball.forward;
    ball.translate(0, 0, forward.z * delta);
}
const backward = (delta) => {
    const forward = ball.forward;
    ball.translate(0, 0, -forward.z * delta);
}
const left = (delta) => {
    const right = ball.right;
    ball.translate(-right.x * delta, 0, 0);
}
const right = (delta) => {
    const right = ball.right;
    ball.translate(right.x * delta, 0, 0);
}

I searched for event to add to the entities, I tried a bunch of them (collisionstart for example), but they logged nothing.

Did I do something wrong or do I miss something?

2

Hi @Greensky and welcome!

I’m not sure if there is something wrong in this part of code.

What does your other code look like? For example, how do you move the ball and what does your event look like?

3

Thank you for your quick reply ^^
I updated my post, I use translates to move the ball, and a simple event listener on the entities

1 Like
4

A dynamic rigidbody need to be moved by forces, otherwise only the entity is moving while the rigidbody stays at the same position.

If you want to move your entity with translate, you can use a kinematic rigidbody instead.

I also don’t see where you add the entities to the scene, but I’m not sure if this is necessary.


this.app.root.addChild(cube);
this.app.root.addChild(ball);
5

Thank you, for your answer, I didn’t know that.

However, when I try to apply a force to a rigidbody, it’s still not moving. I tried to use 3D vectors and just regular numbers as forces, I also try to modify some parameters (like the mass, the linear/angular damping, friction…)

Here’s one of the test I tried :

const force = new pc.Vec3(-100, 0, 0);
ball.rigidbody.applyForce(force)

Also, I forgot to ask, is there an event fired when a collision is detected? If so, how is it called?

6

If the entity is moving this way, the rigidbody is also moving.

Maybe you can check the result with a kinematic rigidbody first?

Checking your code again, there seems to be a problem with your event as well.

I guess ball.on should be ball.collision.on.