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 http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div — WestLangley, Oct 17 '13 at 12:15

score 1 · Accepted Answer · answered Oct 17 '13 at 12:17

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 '13 at 12:17

Darryl_Lehmann

2,178
15
21

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 Oct 17 '13 at 13:21
Figured out a way to do it with a fixed position. – just_user Oct 17 '13 at 13:54
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. – Darryl_Lehmann Oct 17 '13 at 14:59

Three.js click object

1 Answers1

Linked