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);

Answer 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