Select an object using mouse click

Hello there, i’m trying to get the object that the mouse is clicked over. I’m getting the click event by using raycaster but when i want to get the object details when clicked on. currently i;m getting an empty object.

the jsfiddle is shown here…

Any help will be greatly appreciated…

You need to find mouse NDC relatively to the size and position of the renderer’s canvas, not relatively the size of the window.

@prisoner849 my canvas width and height is 800/800.\

but when i use change the NDC to like this then

    mouse.set( ( event.clientX / 800 ) * 2 - 1, - ( event.clientY / 800 ) * 2 + 1 );

then also it is not working… can u please send me the working code?

You don’t take in count the position of the canvas.

So, it should look like this:

  ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1, 
  - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1 

Moreover, your onDocumentMouseDown() function causes error in the line


because that function has no parameters.

@ prisoner849 the same is happening. the object is still showing blank in the console.

i’ve used updated the code in the jsfiddle…

TBH, I can’t get why you have it in the console.

Your code works as expected, at least in Chrome. If I click that Add Object button, then I get a box in the scene. If I click on that box, I’ll get a non-empty array in the console log. What do I do wrong?

@ prisoner849 See the image, i always get the an empty array

same in the incognito


Any help?

By the way, I’m still getting that error:

ReferenceError: event is not defined

in Firefox.

@ prisoner849 let me tell you the problem i’m facing so that you can get a clear idea…

before changing the code you have given me for the mouse.set, i used window.innerWidth and window.innerHeight.

i was getting the array . see the image…

but when i move the block above or bottom to some specific location, i dont get the values


but when i used your code and changed the mouse.set according to your code, i get nothing…

I’ve edited the code and solved the error for firefox but still not working. the updated fiddle is


I hope i was able to explain you…

You have a good example of how to manage the mouse in DragControls.js.
Having this, you could simply have a look over there and repeat it in your code: