Three.js Raycaster与球体的碰撞检测

Question

我正在处理以前回答的问题中的示例： 三个Js Object3D按钮组检测单个对象单击鼠标移动导致Object3D按钮组Zoomi

我正在进行一些更改，使其按照我想要的方式工作，并遇到了一些我无法搞清楚的问题。

这是我的jsbin： http ：//jsbin.com/agadiw/1/

1）我将对象从CubeGeometry切换到SphereGeometry并且碰撞不准确，似乎我只能点击球体的某些部分来触发碰撞。 球体的大小与立方体的大小相同，有时当我在球体外部点击时会触发碰撞。 我在碰撞时警告球体特有的数字。 是否有某种设置或位置我错了？

2）当点击球体时，我尝试将其颜色更改为红色，但是所有球体的颜色都变为红色，而不仅仅是单击的颜色。 我查看了点击球体时相交数组是什么，它只返回点击的数据，我不知道为什么它会改变所有这些。

3）最后，我一直在寻找最新的资源，教程，示例，或者对事情如何运作有很好的解释，但我还没有找到任何我试过的官方文档，但很多部分只是说'todo'。 我只是想知道是否有人有任何公正的资源他们可以带我去帮助我学习这些东西。

谢谢你的帮助。

Answer 1

您正在使用intersectObjects（）来检查交集。 但是，交叉点因此包括所有这些对象。 要修复它，您需要使用intersectObject（）来遍历对象

 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
     }
 }

至于文件; 这些都是很好的例子 。 但目前它主要是通过源代码和github挖掘来找到你需要的东西

Answer 2

1）在您的情况下，CSS margin必须为零。

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

或者，您可以看到此问题的答案。

2）所有对象的颜色都会发生变化，因为所有对象都共享相同的材质。 改为：

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

3）你将不得不通过研究这些例子和阅读留言板来学习three.js。 另请参阅此答案以获取更多提示。