0

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: http://jsbin.com/agadiw/1/

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.

Community
  • 1
  • 1
dotfury
  • 192
  • 4
  • 12

2 Answers2

1

You are using intersectObjects() to check the intersection. However the intersection therefore includes all those objects. To fix it you need to loop through the objects with intersectObject() instead

 for (var i=0; i<=(objects.length-1); i++) {
     var intersect = raycaster.intersectObject(objects[i]);
     if (intersect.length > 0) {
         //change the color here
         break; //important to break the loop
     }
 }

As for documentation; These are good examples. But currently it's mainly digging through sourcecode and github to find what you need

Chris Laarman
  • 1,513
  • 12
  • 24
  • Hi, thank you for the response, I have tried what you suggested and it did not work. All the spheres turned red on click. I also tried altering inside the loop to see if I could figure it out, but still got the same result. Thank you for you help. – dotfury Jul 05 '13 at 21:12
1

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.

Community
  • 1
  • 1
WestLangley
  • 92,014
  • 9
  • 230
  • 236
  • Thanks for the insight,Seems to be working now. I will continue looking through examples and perusing the boards. Thanks again. – dotfury Jul 06 '13 at 07:51