Three.js Raycaster collision detection with spheres


I was working with an example from a previously answered question here: Three Js Object3D Button Group Detect Single Object Click While Mouse Movement Causes Object3D Button Group Zoomi

I was making some changes to make it work the way I wanted, and ran into a few issues that I am having trouble figuring out.

Here is my jsbin:

1) I switched the objects from CubeGeometry to SphereGeometry and the collisions are not as accurate, it seems like I can only click on certain parts of the spheres to trigger a collision. The spheres are the same size as the cubes were, also sometimes when I click outside a sphere it triggers a collision. I alert a number unique to the sphere on collision. Is there some kind of setting or position I have wrong?

2) When a sphere is clicked on, I try to change its color to red, however all the sphere's colors change to red, not just the one clicked on. I looked at what the intersects array is when sphere is clicked, and it only returns the one clicked on, I have no idea why it changes all of them.

3) Lastly, I have been looking for good resources, tutorials, examples, that are up to date or have good explanations of how things are working, but I haven't really found any I tried the official documentation, but a lot of sections just say 'todo'. I was just wondering if anyone had any just resources they could lead me to to help me learn this stuff.

Thanks for any help.

1) The CSS margin must be zero in your case.

body { background: black; margin: 0; overflow: hidden }

Alternatively, you can see the answer to this question.

2) The color of all the objects changes because all your objects are sharing the same material. Do this instead:

ButtonsMesh = new THREE.Mesh( ButtonsGeometry, new THREE.MeshBasicMaterial() );

3) You are going to have to learn three.js by studying the examples and perusing message boards. Also have a look at this answer for additional tips.