5. COLLISION DETECTION // Coding a Minecraft Clone with JavaScript + Three.js 

Haha unfortunately library

Rapier, spent about two days screaming at a screen to make collision for custom 3d models

lol me too@@matteomicari9559

I feel you! I tried getting Cannon.js working first and threw my hands up after a few hours. I’m sure I could have gotten it working eventually, but I had more fun writing this!

The crazy thing is I was trying to do this yesterday using react three rapier. The issue is creating your custom hooks are impossible without going into some of the principles you shared here. Excited to continue watching your videos! I understand their some what niche and that's why Im so grateful of you sharing this to the community.

Thank you very much! I appreciate the kind words.

Should be coming next month...

I’ll be releasing the next video in this series in the next week or two.

@@dangreenheck plz do ur great at explaining stuff and not just showing code

Don’t worry, I definitely plan on finishing it! I haven’t had much time to make videos due to the holidays, but plan on recording the rest of the videos in the next few months.

Thank you! I will be uploading the rest of the videos in this series over the next month or two.

@@dangreenheck Thank you too! I will be noticing your uploads then, keep going your channel is unique and really helpful :)

Thanks and welcome!

1. If you increase gravity, you'll likely need to increase the physics simulation rate. Higher forces/speeds require faster simulation rates since objects are moving a large distance between each frame. 2. The jerky motion while walking next to walls is not present in the JavaScript version, so it is something with your implementation. First, make sure you are running physics at a fixed rate or you'll get very strange behavior. Second, you need to re-check all other collision points each time you resolve a collision (i.e. update player position), since the player may no longer be colliding with that point. This is likely your issue. See this line in the source code: github.com/dgreenheck/minecraft-threejs-clone/blob/07a50a5ee3e390de334f467c6a4f553dd564f636/scripts/physics.js#L171

Understandable, vector transformations and coordinate frames can be confusing! I didn’t explain it great either. There are two coordinate frames: the world and the player. The world coordinate frame is the “reference” frame that never moves. The player coordinate frame is centered on the player, with one axis always pointing where the player is looking, the other pointing up, and the other is to the side of the player. This player frame moves relative to the world frame. When the player moves forward, the user is applying a velocity along the forward axis of the player. We need to convert this to world coordinates so we know which direction to move the player in the world frame. So if the player has a velocity of 5 m/s along its forward axis and the player is pointing East, applyEuler will rotate the vector 90 degrees clockwise, so the world velocity will be 5 m/s to the East and we can move the player in that direction. It’s hard to explain without pictures but I hope that clarified it somewhat.

Make sure you are clearing the collision helpers each frame. Otherwise they will persist forever.

​@@dangreenheck Thank you so much!!

You will need to use a 3rd party physics library like Rapier.

@@dangreenheck I tried using rapier and it was kinda overwhelming. I followed the documentation but couldn't get collision detection to work. I couldn't find many relatable tutorials on RU-vid either. I also tried enable3d and physijs as I heard them being a bit easy to use but they are not completely documented yet. Can you make a tutorial about adding physics with rapier (most tutorials are about adding physics to basic shapes like cube, capsule etc. and not imported 3D models). I would highly appreciate any help.

Indeed I did! DALL-E has come a long ways.

@@dangreenheck DALL-E 2 or 3?