Three.js + Cannon.js Tutorial (part 2/2) | Rigid Vehicle Physics Example

In this coding tutorial, we go over a car example in Three.js to get a better understanding of how Cannon.js physics works. We start off by initializing the physics world and adding a rigid vehicle to it. Then we add wheels to the car and ensure that it is moving in accordance with the physics world. After that, we set up event listeners that apply forces to the vehicle based on user inputs. Finally, we sync the Three.js game world with the Cannon.js physics world.
📖 Code - github.com/SuboptimalEng/thre...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Three.js - threejs.org
Cannon.js - pmndrs.github.io/cannon-es
Rigid Vehicle - github.com/pmndrs/cannon-es/b...
== [ Timestamps ] ==
00:00 Intro Three.js Physics
00:41 Cannon.js Setup Guide
01:56 Initialize Rigid Vehicle
03:01 Add Wheels to Car
05:04 Confirm Car Physics Works
05:37 Add Controls to Physics Body
07:52 Sync Three.js with Cannon.js
== [ Tags ] ==
#suboptimal #metaverse #threejs

[@WAKN___]

Dudeee! I was looking for a good three js tutorial and was considering paying for some expensive one, but I found your channel and you taught me everything I need for the project I have in mind! thanks!

[@SuboptimalEng]

Thanks Josue! My main goal was to help people get started with the basics of Three.js and it's great to hear that it worked for you!

[@KwamenaRoyce]

I just wanted to say your channel and a few others have been very helpful to me in navigating the Three.js learning curve. I plan to make videos demonstrating what I've learned from you guys. Your efforts are much appreciated.

[@SuboptimalEng]

Thank you! It's great to hear that some of my videos helped you in learning Three.js 🙌

[@carloscepeda8663]

Excelent work!
In just 30 minutes I understood physics in Three.js whereas before I had NO idea of where to start lol

[@SuboptimalEng]

That’s awesome, glad the video was helpful!

[@khaledchawa5695]

Hey man this is a really cool video and I wanted to thank you for breaking the code down the way you did. Super great and easy to understand. Also, please make a video on how to change the shape of the floor, you used a plane here and my only issues with that is its flat. Can you make a video explaining how to make a surface with bumps and ups and downs in cannon.js? It would help a ton, thanks.

[@nothing_is_real_0000]

Thank you so much. Much appreciated!!!

[@erfrandarmawan]

Thank you very much for great work for this tutorial ! Right now, I'm understand about physics world in Three.js 🔥🔥

[@smyrkphace]

What would you have to do differently if you want to implement the raycast car instead?

[@smyrkphace]

Would love one of these on the raycast car.

[@ruentgen2941]

This is awesome! Next: Add Physics to a Skinned Mesh

[@doctor_no_]

Thanks so much for this!

[@SuboptimalEng]

Glad the video helped!

[@HuynhLuong227]

big thanks for sharing

[@madzr3093]

Can I control the steering speed? Instead of having is instantly turn, can I ease in ease out the steering? How may I achieve that?

[@joaopaulofreiredossantos2454]

No errors appear on inspect, but the wheels do not appear on the screen, only the vehicle. Could you tell me where I went wrong?

[@ree2453]

Hello, can you PLEASE PLEASE do this tutorial but with raycast instead of Rigid?

[@myselfsk5908]

Hi I have one issue please help me resolve it please please it's very important, so instead of npm install cannon-es I am using the build cannon.js file and using pure javascript so on using it I am able to create the vehicle and all but the car is not moving at all and to make it worse it is stationary and just rotating about y axis and nothing is happening on pressing the keys.

[@antoniofuller2331]

Trust me, I have been there and done that. Don't use vanilla JavaScript or CDN because it won't work for cannon-es-debugger

[@suzyash1958]

Greetings Suboqtimal Engineer i have an inquiry about something, How can i create visual space like OnCyber using WebGL. i dont have any idea from where to start my learning curve. i dont know if it can be done through unity or three.js

[@SuboptimalEng]

Hi Suzy. I’m not fully sure what OnCyber is but using something like Unity would be a bit easier to make 3D experiences. Three.js is not a game engine so it can take more time to set everything up.

[@suzyash1958]

@@SuboptimalEng for creating virtual spaces on website like with W-A-S-D movement, is it better to learn unity or three.js?

[@SuboptimalEng]

@@suzyash1958 I think you may want to compare Unity with Babylon.js (a 3D JavaScript game engine). I am not familiar with either technology so you would have to look into this yourself.

[@doggo9757]

Is there a CDN available for cannon debugger?

[@antoniofuller2331]

Nope, threejs is moving to npm module format now. They stopped producing CDN support as of Threejs version 147

[@user-hd3pz2ow1b]

cool

[@user-bf9lu2zs5r]

hi, which vs code theme do you use?

[@SuboptimalEng]

I usually use a custom variation of Gruvbox dark and the settings are in my Dotfiles repository on GitHub.

[@YasinNabi]

awesome and beautiful video. subbed and liked ! a fellow creator

[@SuboptimalEng]

Appreciate the support Yasin!

[@ThesniperScythe]

What font are you using?

[@SuboptimalEng]

I believe it is the Iosevka font.

[@NEXC]

ok