Car physics mini game with React Three Fiber and Three.js [ Tutorial part 2 ]

Here's part two! Now it's time to introduce our physics engine, cannon.js, and the wrapper library that makes it easy to integrate it with react three fiber: useCannon!
On this video we'll focus on preparing all the physics entities that are necessary to create a raycast vehicle, and we'll later use this code as a base for the next part where we'll jump into keyboard controls for the car!
Project's repo:
github.com/Domenicobrz/R3F-in...
Try it live in your browser!
domenicobrz.github.io/youtube...
Intro: 0:00
Physics component: 0:10
Car chassis: 1:19
Ground: 3:32
Wheels: 4:35
Wheels Debug: 6:44
Conclusion: 8:02
#react #threejs #javascript

[@AndersonMancini]

Just unbelievably magnificent work man. Thank you so much for sharing this. Congrats 👏🏻 👏🏻 👏🏻

[@irradiance730]

too kind :) your work is super inspiring, I have planned to watch your course on youtube

[@judithbosmans2878]

I am trying to learn how to make in browser games using React Three Fiber, and these videos are really helping!

[@thehero9]

I'm so glad I found your tutorials! I'm making a portfolio and I need the moving car mechanics! I hope you will upload soon!

[@irradiance730]

Thank you! you wont have to wait for too long :)

[@thehero9]

@@irradiance730 can you make a tutorial for how to upload the project to github pages. I have followed several tutorials, but I get an error

[@davidch6746]

Tercero 😎👍👍👍 keep going thank you

[@user-jm5pw7zq6o]

The difference between the two sentences is what causes the material to darken
import { TextureLoader } from "three/src/loaders/TextureLoader" :lighten
Or
import { TextureLoader } from "three" :darken

[@irradiance730]

That's super interesting, thanks for the insight! I suspect theres a bit of a mismatch in threejs for the color handling in those versions of the imports but overall if it works it works... Thanks!

[@richardramirez5746]

impossible to get 4 wheels from cannon

[@abedelrazzakchreim4988]

all the wheels are spawning in the same place, any advice?

[@abedelrazzakchreim4988]

solved it : in the wheel info, it's "directionLocal" not "directionalLocal"

[@richardramirez5746]

@@abedelrazzakchreim4988 not working

[@paschalasobirionwu1183]

same bro did u manage to get it working?

[@paschalasobirionwu1183]

@@richardramirez5746 did u manage to get it working? having the same issue

[@richardramirez5746]

@@paschalasobirionwu1183 I was using chassis instead of chassisBody. It is mandatory to use wheels =[ useRef(), useRef(), useRef(), useRef()]. I was using new Array(4).fill(useRef()). And the most useful advice: use Debug component from cannon, it let you watch the real physics bodies

[@user-jm5pw7zq6o]

import { TextureLoader } from "three" :darken

[@GuiDduck]

first

[@Francois3k]

2nd