I have tried to build a Game like Need For Speed using Cannon-es and Three js

https://need-for-speed-clone.onrender.com/

9 Likes

This is a great start! You’ve clearly put a lot of work into this, nice one! I’m not sure how to solve the curbs sometimes imparting quite an extreme amount of flip-you-upside-down potential :smiley: also those multiple yellow lines across the road and the road barriers, though interestingly not so much the cones. Also pretty sure I hit the “C” mid air on track 1 and it put me into a mid air spin which I thought was a little cruel :joy: Great work though so far :slight_smile:

1 Like

Amazing! Where did you get the models?

1 Like

Thanks a lot, really appreciate the feedback! :raising_hands: Yeah, the curbs can be a bit evil right now :sweat_smile: — I’ll work on softening that so they don’t flip cars so much. The multiple yellow lines and barriers are on my to-fix list too. Haha, hitting ‘C’ mid-air spinning you out was totally unintentional, but I kinda love that you experienced it :joy:. Glad you enjoyed it so far — I’ll keep polishing!

Thanks! :raising_hands: I got the models from Sketchfab and did some small edits in Blender — like adjusting textures, removing logos (to avoid copyright issues), and separating the car chassis from the wheels so I could load them properly into the game.

2 Likes

Sick! I played with it and found it awesome! Good job!! Keep it up.

1 Like

Thanks a lot! Really glad you liked it :blush:

I just played the game, graphic is nice, accuracy is very good. For a beginner it’s AWESOME!

Keep up the good work.

Thanks so much! That really motivates me to keep improving :+1:

1 Like

I like it. The engine sounds could be pitched a bit lower…
There is a .detune property on the Audio type, that you might be able to use.. like .detune = -10000 might pitch it down a bunch. I know some games also run 2 different sounds for engine rumble to give it more texture.. like a lower pitched sound that ramps a little differently, behind the high pitch.
(edit: tried the orange car instead.. it had better engine sound so, seems like you have a handle on this. :slight_smile: Overall has a decent feel… you could take this places…

1 Like

Nice work on this, it’s always great to see more racing experiments with Three.js and Cannon.

I’ve also been experimenting with a Three.js + Cannon.js Need for Speed style project. It’s still evolving but you might find it interesting to compare approaches for vehicle physics and tracks.

Red Rock Ridge
https://theneoverse.web.app/#threeviewer&&redrock-ridge

London Circuit
https://theneoverse.web.app/#threeviewer&&london-circuit

Vineyard
https://theneoverse.web.app/#threeviewer&&vineyard

Big Rock
https://theneoverse.web.app/#threeviewer&&big-rock

Would be cool to hear what settings you ended up using for the RaycastVehicle suspension and friction, that part is always the hardest to tune.

Sorry again for the delayed reply.

And yes — I had actually come across your project earlier, I remembered the NeoVerse name immediately.

Regarding RaycastVehicle, my setup is a bit structured differently because I built the flow around a class system. The constructor only sets up the raw config (dimensions, mass, suspension/physics parameters), but doesn’t touch the world yet.

init() is the main trigger — it branches into loading the 3D models, creating the physics chassis, adding the four wheels, and wiring up controls. Since model loading is async, brake/reverse/front lights and the animation mixer are initialized inside the GLTF onLoad callback.

After everything is ready, update() registers a CANNON postStep listener, which acts as the per-frame heartbeat. That syncs physics back to the Three.js meshes every tick, updates wheel positions, runs flip detection, updates flare positions, and checks the health system.

I’m still refining some of the suspension and friction tuning, and soon I’ll share the whole code as well — would be great to compare approaches when I do.

Also, I should be honest that I made plenty of mistakes in this build too. I haven’t implemented culling or LOD for the cars yet, and the first map has far too many vertices and faces, so some lag there is expected. That’s something I need to optimize properly.

For AI/path following too — in standard engines like Unity or Unreal, spline tools are usually the natural way to handle vehicle paths. I wasn’t able to create a system as stable as that in this project, but I still tried to build my own approach and learn through it. It’s very much an evolving experiment.