# BabylonJS + cannon-es + raycastVehicle **URL:** \ **Category:** Questions\ **Tags:** cannon-es\ **Created:** [August 19, 2022, 2:49pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194 "2022-08-19T14:49:47Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [August 19, 2022, 2:49pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/1 "2022-08-19T14:49:47Z")
Hi, I’m trying to replace AmmoJS with cannon-es in my project. I’m using this cannon-es example > and at this point I’m stuck with how to get the vehicle to be shown in the scene? My (not working, I mean it’s working but it’s not adding the body to the scene) code so far: > The examples in the cannon-es are using Three.js. I checked that they are using some `demo.addVisual` function, which uses `bodyToMesh` function. So I guess I should do something similar and create BabylonJS meshes? I think probably @Cedric is the person that may give me some hints 🙂 Thanks in advance! ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [August 19, 2022, 3:46pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/2 "2022-08-19T15:46:18Z")
The general idea is - after the physics is done calculating the next position, update the babylon meshes corresponding the impostors. for example, in the postStep event in cannonjs, iterate over each impostor and “copy” its transformation to a babylon mesh you have already created ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [August 19, 2022, 4:34pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/3 "2022-08-19T16:34:25Z")
Thanks @RaananW! I’ve found your demo in some old topic 😃 > [@Cannon raycast vehicle not moving](https://forum.babylonjs.com/t/cannon-raycast-vehicle-not-moving/2678): > > G’day All! I’ve been trying to setup a raycast vehicle with a gltf model attached to it and I cannot for the life of me figure out how to get it to move correctly. It was working fine when I tested it out with plane old cubes and cylinders, but when I added the gltf model it stopped moving. I’ve tried changing the quaternions about but that just causes it to fly off in all directions. Here is a quick playground I setup replicating the problem [https://www.babylonjs-playground.com/indexStable.…](https://www.babylonjs-playground.com/indexStable.html#XG5FUV#1) > **[Babylon.js Playground](https://www.babylonjs-playground.com/#UGMIH%2315)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes I think I can get some inspiration from that code. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [August 19, 2022, 4:49pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/4 "2022-08-19T16:49:01Z")
That’s what I call “travel the world” 🙂 This must be 6 years old! ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 2, 2022, 1:10pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/5 "2022-09-02T13:10:26Z")
@RaananW I would be thankful if you could take a look at my code. As I told before I’m trying to marry this example > with BabylonJS. So at first I’m creating the meshes: > and later I’m creating the bodies for the physical engine > And at the end I’m setting the positions of the wheels but it doesn’t work. The whole PR is just here > I had “working babylon vehicle” with usage of `mesh.parent` but I can’t get it working with physics engine. Gosh, I feel like I should take some “basic gamedev course”. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 2, 2022, 1:16pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/6 "2022-09-02T13:16:27Z")
pulling this PR will be enough to run the project? ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 2, 2022, 1:19pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/7 "2022-09-02T13:19:13Z")
Yes, it works locally. @RaananW I can try creating PG. I think it should work with cannon, it’s pretty basic stuff. ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 2, 2022, 5:56pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/8 "2022-09-02T17:56:36Z")
Here is the PG: > **[Babylon.js Playground](https://playground.babylonjs.com/#112EAM%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 2, 2022, 6:02pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/9 "2022-09-02T18:02:41Z")
that seems to be causing a fight between babylon’s physics loop and the cannon changes, no? You are using babylon’s phyiscs impostors on the wheels, and then update them in the postStep again. Do you need the physics impostors? or better - do you need the physics engine plugin in this case? ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 2, 2022, 6:15pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/10 "2022-09-02T18:15:09Z")
You know, I’m really like ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/b/2b10f0c16e3991d8ca43f1658057cb63b096c353.jpeg) Removing the physics impostors on the wheels doesn’t seem to change anything. Maybe there is something wrong with this `postStep` function. I copied it from cannon-es example. > [@RaananW](#): > > do you need the physics engine plugin in this case? If I use only BabylonJS Physics, and I have box as parent with wheels it doesn’t work because mesh children impostors don’t work - so I guess I need the physics engine plugin. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 2, 2022, 6:22pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/11 "2022-09-02T18:22:07Z")
> [@neu5](#): > > You know, I’m really like > > ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/b/2b10f0c16e3991d8ca43f1658057cb63b096c353.jpeg) The story of my life! 😉 This kind of hybrid solution would require a lot of playing around with the babylon cannon plugin and special configuration to the impostors. You want to avoid transforming your meshes twice. either the babylon physics engine is doing it (as in my example), or youa re doing it manually (and then you don’t need enabling the babylon physics engine. I will be happy to find time and show you a simple example of this way of working, but i won’t make it today, that’s for sure… ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 2, 2022, 6:29pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/12 "2022-09-02T18:29:54Z")
No problem! I’m also done for today. Thank you for your help - it really opens new doors in my head 🙂 So when you wrote about the `physics engine plugin` you meant the Babylon impostors? If so - I think I won’t need it. I want to build simple car racing game with heightmaps so I will need Cannon plugin - it should do all the work. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 2, 2022, 7:39pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/13 "2022-09-02T19:39:01Z")
---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 5, 2022, 3:02pm UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/14 "2022-09-05T15:02:19Z")
Hey, I followed your instructions and I removed Babylon impostors and at the moment I’ve got something like this: > **[Babylon.js Playground](https://playground.babylonjs.com/#112EAM%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Don’t know what a heck is going on with the wheels but I’m heading somewhere definitely 😃 EDIT: Ok, so the `chassisBody.angularVelocity.set(0, 0.5, 0);` was the reason of the rotating wheels. So I’ve got > **[Babylon.js Playground](https://playground.babylonjs.com/#112EAM%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes @RaananW do you think it looks ok? If so I’ll try to add driving code to it. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 12, 2022, 11:00am UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/15 "2022-09-12T11:00:18Z")
It does look ok! There were a few issues with the data conversion, but this should work now - [cannon simple vehicle | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#112EAM#5) (I switched the camera’s position). There seems to be an issue with the force application. This might be the version of cannon we are using over the version of cannon this was developed for. It is possible that cannon-es has fixed a but (or added params), that are not supported in the old cannon implementation. that’s probably why steering is not working as you expect. ---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 12, 2022, 11:05am UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/16 "2022-09-12T11:05:01Z")
Thanks @RaananW, I’m on that too atm. But it doesn’t go forward / backward 😃 it goes to the sides… Did I messed up something while building the vehicle for the physics engine? ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 12, 2022, 11:06am UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/17 "2022-09-12T11:06:30Z")
No, i really believe this is a difference between cannon and cannon-es. In my demo I fixed it by changing the axis for every wheel and applied difference force on both wheels. I can’t seem to find the line that does it, but it seems like the force is applied incorrectly. ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 12, 2022, 11:06am UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/18 "2022-09-12T11:06:32Z")
---
**Author:** ![neu5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/neu5/32/24720_2.png) [@neu5](https://forum.babylonjs.com/u/neu5)\ **Post date:** [September 12, 2022, 11:13am UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/19 "2022-09-12T11:13:56Z")
Okey, so I opened the demo you shared > **[Babylon.js Playground](https://playground.babylonjs.com/#112EAM%235)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes and I’m just clicking WSAD and I see ![car](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/e/6e388557c2d6de3d4aab4361ecb68d366dcba1d9.gif) ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [September 12, 2022, 11:17am UTC](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194/20 "2022-09-12T11:17:40Z")
Sorry, I meant - the demo I have created 6 years ago. You can see how I solve it there, to fix the cannon architecture [Next page](https://forum.babylonjs.com/t/babylonjs-cannon-es-raycastvehicle/33194.md?page=2)