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

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 พ.ย. 2024

ความคิดเห็น • 48

  • @dangreenheck
    @dangreenheck  11 หลายเดือนก่อน +5

    Have you tried writing your own collision detection code before, or have you always used a library?

    • @abdelrahmanassem5606
      @abdelrahmanassem5606 11 หลายเดือนก่อน +1

      Haha unfortunately library

    • @matteomicari9559
      @matteomicari9559 11 หลายเดือนก่อน +1

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

    • @abdelrahmanassem5606
      @abdelrahmanassem5606 11 หลายเดือนก่อน

      lol me too@@matteomicari9559

    • @dangreenheck
      @dangreenheck  11 หลายเดือนก่อน +1

      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!

    • @genshian
      @genshian 11 หลายเดือนก่อน

      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.

  • @brambekkers
    @brambekkers 10 หลายเดือนก่อน +6

    I usually don't comment on videos but I'll make an exception with this one. I am very impressed with your tutorial. I really appreciate the detailed explanation, quality of the video and balanced pace of the tutorial.
    I am very thankful! Keep up the good work!

    • @dangreenheck
      @dangreenheck  10 หลายเดือนก่อน +1

      Thank you very much! I appreciate the kind words.

  • @bookofflight
    @bookofflight 16 วันที่ผ่านมา

    I got to know your work through the RPG series. You're such an amazing teacher. I'm binging now on all the rest of your videos!

  • @gazehound
    @gazehound 11 หลายเดือนก่อน

    New favorite TH-cam series...

  • @ankurbhardwaj04
    @ankurbhardwaj04 9 หลายเดือนก่อน +2

    We are waiting for more videos of this series

    • @dangreenheck
      @dangreenheck  9 หลายเดือนก่อน +1

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

    • @teturd169
      @teturd169 9 หลายเดือนก่อน

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

  • @608_diesel
    @608_diesel 11 หลายเดือนก่อน +1

    Brilliant work! Thank you so much for sharing and breaking it down, makes me wish I would have paid more attention in math when I was in school haha.

  • @nerex_rsmusic8344
    @nerex_rsmusic8344 9 หลายเดือนก่อน

    Jah bless, with this you have everything to do your own, you have physics, the world, the resources, optimization. I am in a position where I didn't do this part since I was hopping to watch more uploads but in other hand you can study the github but the most great thing is that you Master, teached so well this topic that I feel like with the same logic I can do stuff as for example recolection

    • @dangreenheck
      @dangreenheck  9 หลายเดือนก่อน

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

    • @nerex_rsmusic8344
      @nerex_rsmusic8344 9 หลายเดือนก่อน

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

  • @KskskdodOdkrjen
    @KskskdodOdkrjen 8 หลายเดือนก่อน +2

    This series is amazing but i'm stuck at the applyEuler thing, I learnt a lot of things in this series but I can't understand this one.

    • @dangreenheck
      @dangreenheck  8 หลายเดือนก่อน +1

      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.

  • @lucasnicolasbuttarelli9216
    @lucasnicolasbuttarelli9216 9 หลายเดือนก่อน

    Holuuuu, no puedo esperar mas la parte 3. Saludos!!

  • @xderen_xd
    @xderen_xd 10 หลายเดือนก่อน

    God may bless you, please continue or I will continue programming my own minecraft because this is insane is the first project tutorial where you make a real game with all their futures almost like you build your own game-voxel engine hahaha

    • @dangreenheck
      @dangreenheck  10 หลายเดือนก่อน +1

      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.

  • @hoodwinkedDaDon
    @hoodwinkedDaDon 11 หลายเดือนก่อน

    wow, finally a tutorial i want to follow! awesome job

  • @KskskdodOdkrjen
    @KskskdodOdkrjen 9 หลายเดือนก่อน

    Waiting for part six!😸

    • @dangreenheck
      @dangreenheck  9 หลายเดือนก่อน

      Should be coming next month...

  • @rinkaan
    @rinkaan 2 หลายเดือนก่อน

    Amazing amazing amazing!!!

  • @prashlovessamosa
    @prashlovessamosa 11 หลายเดือนก่อน

    Great stuff glad I found you.

    • @dangreenheck
      @dangreenheck  11 หลายเดือนก่อน

      Thanks and welcome!

  • @vinaciotm
    @vinaciotm 11 หลายเดือนก่อน

    so cool. Thanks, keep doing

  • @SantaGrapa
    @SantaGrapa 8 หลายเดือนก่อน +1

    Looks awesome. Im trying to recreate it in c#, unity but im getting a few errors idk if anyone can help me out with this. First, if gravity is big enough, xz overlap becomes less than yOverlap and kind of pushes player to the center of the block. Second, when walking close to a wall, block corners push player a bit along their normal, which makes walking while facing a wall clunky . Probably its some mistake translating from js to c# or maybe i skipped a few lines of code? Been 2 days and still trying to figure it out.

    • @dangreenheck
      @dangreenheck  8 หลายเดือนก่อน

      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

  • @naveed_snr
    @naveed_snr 5 หลายเดือนก่อน

    I'm working on an fpp college tour project and want to add collision detection to it. Since I didn't use any loops to generate the world and used a 3D model instead, I'm having a hard time following along. Can I get some help?

    • @dangreenheck
      @dangreenheck  5 หลายเดือนก่อน

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

    • @naveed_snr
      @naveed_snr 5 หลายเดือนก่อน

      @@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 TH-cam 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.

  • @GaboomMixes
    @GaboomMixes 8 หลายเดือนก่อน

    @coffeecodecreate 12:53 I have run into an issue where when I go into a block it turns solid red and not kind of red and then it just stays there and doesn't disappear. What is the issue? Could you help me? Thanks!!

    • @dangreenheck
      @dangreenheck  8 หลายเดือนก่อน +1

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

    • @GaboomMixes
      @GaboomMixes 8 หลายเดือนก่อน +1

      ​@@dangreenheck Thank you so much!!

  • @bossgd100
    @bossgd100 3 หลายเดือนก่อน

    Where did you lean all these things ?

    • @dangreenheck
      @dangreenheck  3 หลายเดือนก่อน +1

      Self-taught! I do have a math and engineering background, however, which helps significantly.

  • @innerbytes
    @innerbytes 2 หลายเดือนก่อน

    31:19 - looks like there is a mistake in the sorting function. Should be "return a.overlap - b.overlap" instead of "

  • @genshian
    @genshian 11 หลายเดือนก่อน

    Epic!!

  • @niuage
    @niuage 10 หลายเดือนก่อน

    Did you use AI to create your thumbnail? Looks pretty damn good but usually AI has issues with minecraft-like terrain, from my very small experience with it.

    • @dangreenheck
      @dangreenheck  10 หลายเดือนก่อน +1

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

    • @niuage
      @niuage 10 หลายเดือนก่อน

      @@dangreenheck DALL-E 2 or 3?