Three.js click object

Question

I've been trying to make this example work for me. I'm almost there. My problem is that I'm not using a full screen canvas. I'm using a smaller div that might be placed differently depending on resolution.

What I have working is getting the coordinates of the mouse click inside this div, and clicking objects are working as well. But Everything is a little bit offset and the clickable area is bigger than the object itself.

So my question is how I can make this more accurate.

This code http://jsfiddle.net/phacer/FHD8W/1/ works in my browser but not in JSFiddle. So in this context, how can I click my objects?

I think line 180 is what is wrong.

var vector = new THREE.Vector3((x / WIDTH) / 1 - 1, -(y / HEIGHT) / 1 + 1, 0.5);

Duplicate of stackoverflow.com/questions/13542175/…

WestLangley
– WestLangley

2013-10-17 12:15:14 +00:00
Commented Oct 17, 2013 at 12:15 — WestLangley
– WestLangley, Commented Oct 17, 2013 at 12:15

Darryl_Lehmann · Accepted Answer · 2013-10-17 12:17:05Z

1

your very close. The big problem is the use of the old r54 library. As of r58 Raycasting became a lot better. So check out this new fiddle http://jsfiddle.net/FHD8W/3/ I've removed the r54 link and added an external resource to the github.io.

Also, you were correct line 180 needed a slight tweak to look like this:

var vector = new THREE.Vector3((x / WIDTH) * 2 - 1, -(y / HEIGHT) * 2 + 1, 0.5);

That should do it

answered Oct 17, 2013 at 12:17

Darryl_Lehmann

2,20816 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

just_user Over a year ago

Thanks, that pretty much did it. But it only works if the div is fixed. Currently my div is absolute. Any idea of how to get that working?

just_user Over a year ago

Figured out a way to do it with a fixed position.

Darryl_Lehmann Over a year ago

Glad to hear, yeah it can be finicky to get the right nested offset values to get the mouse coordinates over the element just right.

Collectives™ on Stack Overflow

Three.js click object

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related