New to Three.js looking for help in the right direction

Hey guys, I’m really really new to Three.js and I’ve been trying to teach myself as I go along. I’m trying to make it so I have a globe that is interactable with either clickable markers or the countries itself (I thought markers might be easier to learn first before I try go too into detail). However I’m clueless with raycasting and I don’t think I’m storing the spheres anywhere, plus if I try to get co-ordinates of the sphere (mouse.x, mouse.y) it is giving me them as if its a 2d plane, it does not take into account the spheres rotation or anything.

Your code as a graphic can hardly be read. Better would be a live example (e.g. jsfiddle) or copy your source code into your post and format it with the symbol 2021-10-19 20.08.45

Take a look at the Collection of examples from

See there


You can move your raycaster.setFromCamera() to the mouse down- click or up event. The object that is returned (if any) has multiple properties like for example the 3d vector ‘point’ where the raycast hits the object in 3d.

var object= raycaster.setFromCamera(mouse, camera)

Sorry for the late reply thank you so much for the advice and help! those examples were really helpful! :smiley:

Thank you for the help! I’m completely new but super excited, every little trick is a benefit! :blush: