Question

我正在使用之前回答的问题中的示例：Three Js Object3D Button Group Detect Single Object Click While Mouse Movement Causes Object3D Button Group 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
     }
 }

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

Answer 2

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

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

或者，您可以看到this question的答案。

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

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

3）你将不得不通过研究这些例子和阅读留言板来学习three.js。另请查看this answer了解其他提示。

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

2 个答案: