Questions about building a 3D racer game using PlayCanvas

Hello, guys,

I am creating a 3D racer game using PlayCanvas and another framework called MAF (framework for TV apps).

So, as you can imagine there are two broad categories of objects I have: cars (3D models of Ferrari, Lamborghini, etc.) and levels (3D models of tracks with turns, obstacles, etc.).

So the first problem I had was with collision detection between the car and the surrounding level it should move onto. I tried making the cars → rigid body: mesh/collision: mesh and the level rigid body: mesh/collision: mesh, but the collision detection didn’t work. Then I read a bit in the API documentation and changed the level to mesh/static and the car to mesh/box and it did work. My first question is is this the best approach in your opinion? Could I have done this better?

Second question: I am moving the car using an iPad (or any other device that has accelerometer; there is a complex interaction with the app using WebSockets that works ok). The problem is that due to my very little (2 week) experience with PlayCanvas I didn’t knew what the best way to move the car was (and also keep track of the speed it moves with). So, I used linearVelocity and eulerAngles to move and swerve the car. My current implementation of this works VERY BAD. Please, suggest a better way to do this or provide some code snippets or help resources.

Third question: Can I somehow enable seing the collision box of an object explicitly when I am using the PlayCanvas API directly and I am not in the PlayCanvas editor? I am looking for something like seing a red wireframe around where the collision box should be. Is there some sort of development/debug mode in PlayCanvas?

I really hope you will help, guys.

Thanks in advance.

P.S.: I don’t use the PlayCanvas editor to make the game, I use the PlayCanvas API directly and instantiate everything programatically. It has to be this way because the PlayCanvas code exists in the context of the TV framework code.


Hi Trifon,

You have discovered that mesh->mesh collision is not supported. Usually this is very slow so it is better if you use primitive collision shapes. In the case of car collision a box for the road and a box for the car is one way. Depending on your car physics model. (e.g. are you simulating wheel contacts?)

If you are using a dynamic rigidbody for the car. Then the best way to control it is to use forces, impulses and torques in the rigidbody API. entity.rigidbody.applyForce(), entity.rigidbody.applyImpulse(), entity.rigidbody.applyTorque() and entity.rigidbody.applyTorqueImpulse(). You can modify the velocity directly but you may run into problems with the collision response.

If you are using a kinematic rigidbody, you can modify the velocity directly, but you will have to do collision response yourself.

There isn’t a built in way to display collision volumes currently, but you can use the line drawing API to draw wireframe shapes app.renderLine().

1 Like

Hey, Dave,

I am not simulating wheel contacts currently. How would you do this?

I tried using entity.rigidbody.applyForce() and the rest of the recommended methods, but ran into a problem which is that it is a bit hard for me to convert this force into actual metrics such as km/h. For instance if we have entity.rigidbody.applyForce(100, 0, 0) what’s this force measured in and how can I convert it to real-life speed?

Thanks in advance.

Kind regards,

Well, that very much depends on how you want to simulate your car. Basically, you apply various forces to the car to simulate: engine torque, air resistance and lateral forces (from the tires) when you are cornering. Something like this article is a good starting point:

However, I suspect that is overly complicated for what you are trying to do. There are many simpler ways of doing the car simulation. For example, you can just set the linearVelocity property as you described. The problem with doing that is how you then handle collision response. For example, if you are setting the velocity to 10m/s every frame and the car drives head-on into a wall then the physics engine has no way of behaving correctly.

You can experiment with setting the linear velocity directly until you detect a collision. Or you could make the car a kinematic object and handle all the collision response your self. If you are designing an “arcade-y” style game this might be the way to go.

One thing to note, if you haven’t realized this already. If your car is being simulated by the rigidbody physics world then you can’t use the Entity transformation methods (setPosition, setRotation, setEulerAngles, etc) because the result is overwritten by the physics engine. In these cases you should be using rigidbody methods like: teleport, applyForce or linearVelocity.

I realize that is a bit vague, but it really depends on exactly what sort of game you are trying to create.

1 Like

I am trying to setup a skybox for my level programmatically.

I searched on the Internet and here on how to do this entirely programmatically via the API but could not find anything helpful. So, I had to look at the source code and figure out how things work. Unfortunately the following code does not work for me:

  var backImage = new Image();
  backImage.src = backImageUrl;
  var leftImage = new Image();
  leftImage.src = leftImageUrl;
  var frontImage = new Image();
  frontImage.src = frontImageUrl;
  var rightImage = new Image();
  rightImage.src = rightImageUrl;
  var topImage = new Image();
  topImage.src = topImageUrl;
  var bottomImage = new Image();
  bottomImage.src = bottomImageUrl;

  var skyboxCubemapTexture = new pc.Texture({
    cubemap: true
  skyboxCubemapTexture.source = [
  app.scene.skybox = skyboxCubemapTexture;

Can you provide more information or example on how this is done programmatically?

And one more question: if you had to create a rigid body system like skeleton (e.g.: a car body that is somehow physically connected to car wheels), how would you go about it?

Thank you so much.

Kind regards,