Three.js Raycasting Tutorial for Beginners

[@genshian]

As usual some of the best Three.js content. I've been messing around with Raycasters to create a drag functionality. Similar to DragControls from drei. It needs quite a bit of math to ensure the objects transform based on where the camera's pointing and also the pointer data + raycast data. Would be a great tutorial if possible! :D

[@tedreams]

Great and straightforward tutorial thanks again. Now the step should be how to move the selected object around the scene.

[@dangreenheck]

You are the 2nd person to comment that in 10 minutes so I will definitely consider it!

[@nikhilpsathyanathan]

Quality content

[@maazi3d]

Great tutorial ❤❤ but my mousedown,mouseover, and other events not working only mouseclick event working any solution

[@moodyhamoudi]

Great tutorial. Wondering how to select a larger area with the raycaster 🤔 e.g. a square area around the ray itself, or you can think of it as a fuzzy distance threshold for an object to qualify as intersected

[@dangreenheck]

Check out Box3, which is an axis-aligned bounding box (AABB). This allows you to intersect with simple geometry. Your objects would need to be enclosed in some type of simplified bounding geometry (sphere, box, cylinder, etc.) that you can use for collisions, since doing collision detection with arbitrary geometry is very computationally intense.

[@deathdefier45]

Thank you so much for this

[@thiagoborges2920]

Great tutorial! Didn't vote on the poll, but could you please do one about physics? I feel kinda lost when about using physics libraries and how to set those up.

[@dangreenheck]

You’re in luck! Working on a physics video right now.

[@DeberiasTenerUnGato]

uffff 🔥 thanks man

[@billythekid9714]

New sub here . Thank you for your video . Btw, do you have a course website to learn all of this? If you do, I am very interested in Three.js to create a warehouse system. With the need for drag and drop objects like racks in specific positions, each rack having an ID, and the ability to stack racks.

[@dangreenheck]

Sorry I don’t have any courses available at this time. I do have plans to release a course but that will be later this year.

[@cornkobcob]

Amazing thanks so much

[@ahmada5317]

thank you