Three.js Raycasting for Mouse Picking [Checkers 3]

In this video, I show you how to use raycasting to perform mouse picking, the act of picking objects in the 3D scene using the mouse. You can find the mentioned function for normalizing mouse coordinates here: threejs.org/do...
Full source code and written tutorial: syntaxbytetuto...

[@chriswarton168]

Very interesting example! Especially, you put classical music while debugging. It made the time to wait being not boring😎

[@relentingVids]

For anyone that can't get the checker to move. I solved the issue by adding && selectedPiece == null in the first if statement in the onClick event function.

[@zBrain0]

Great series I learned quite a bit. The debugging music was pretty funny. I've actually had an idea in the back of my mind of creating a 3D chess set so this gives me some really good starting points

[@harrymason6654]

Very good explain bro.
How I can click/touch for a point on one 3D model to make an action?
I wan't to create my business card with a game console and when I click on on button of the controller put information on the screen, giving different action on each button on the 3D model.

[@datneanimation2336]

Hi guy, "'Draughts' is not defined". Do I miss the "draughts" function? where I can find it? Thanks so muchhhhh

[@vladosononame6376]

thank you so much for this video, super cool, super helpful!

[@abderrahmane_24m]

Hello! thanks for the great content .I did exactly the same thing with the reset function and made sure it's placed before the hover function but it didn't work :/ what could be wrong with it?

[@Forsvinne77]

Good stuff dude, keep it up.

[@ashrafhabrumman1143]

Thank you very much, actually, you save me.

[@harshjain8345]

Hi..i had a doubt..do we require a strong pc for three.js and this kind of 3d stuff..i'm interested to know...i'll be grateful if you reply back...

[@syntaxbyte]

Hi,
For this simple 3D stuff as shown in the video, you don't need a super strong PC. You'll need an average modern PC. This program runs just as well on my Macbook Air as it does on my desktop. If you want to see how well some basic three.js programs run on your computer, you could have a look at the examples: threejs.org/examples/ Of course, if you're building your project out into a full-fledged first-person shooter, you may need some better hardware.

[@harshjain8345]

@@syntaxbyte no i don't have plans for game dev ... I just wanna ..use three.js for cool animations into my website.....so is it fine?

[@user-dt5ys1kg8u]

@@syntaxbyteHi. I didn't notice. Why board squares doesn't become transparent, and only chekers are effected by raycast? The squares are not in scene.children or how?

[@syntaxbyte]

It doesn't do it recursively by default, so yes, it won't do the children of children. Since the squares are not direct children of scene.children, they won't be found. It may find the group. You can have it do a recursive check by passing true as a second parameter to the intersectObject function, but I wouldn't do that unless you need to as it could be a large performance hit for large object trees. More info here: threejs.org/docs/index.html?q=raycaster#api/en/core/Raycaster

[@user-dt5ys1kg8u]

@@syntaxbyte thanks a lot. You have a good tutorials right then, when i need it. You are magician)

[@hadjerhadjer9215]

I just need one object move code please 🥺

[@hadjerhadjer9215]

Hi I'm trying to do chess but I rave problem in moving object can u help me please please please please please please please please please 🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺🥺

[@calculatedcustoms]

No checkers 4? Guess that means I will just have to complete the code!

[@syntaxbyte]

Yes unfortunately never went all the way with this one. If you're able to complete the code and want to share feel free to post a link to the repository here, I'm sure others would love to see it!

[@juliautenkova954]

but how to do deep search on scene.children?

[@syntaxbyte]

You pass recursive as true in the second parameter. So, raycaster.intersectObjects(scene.children, true);

[@tristanrenaud7970]

it makes all my materials transparent automatically before i even hover over heellpppp

[@MG-nn8dy]

from New England? That 'dot'

[@syntaxbyte]

Nope, Canadian

[@MG-nn8dy]

@@syntaxbyte cool!