Select an object using mouse click

Questions
1

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…
http://jsfiddle.net/g76cma5t/

Any help will be greatly appreciated…

2

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

3

@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?

4

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

So, it should look like this:

mouse.set( 
  ( ( 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

event.preventDefault();

because that function has no parameters.

5

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

i’ve used updated the code in the jsfiddle… http://jsfiddle.net/g76cma5t/1/

6

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?

7

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

same in the incognito

image

Any help?

8

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

ReferenceError: event is not defined

in Firefox.

9

@ 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…
image

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

image

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 http://jsfiddle.net/g76cma5t/2/

image

I hope i was able to explain you…

10

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: