Javascript 使用球体的Three.js Raycaster碰撞检测

Javascript 使用球体的Three.js Raycaster碰撞检测,javascript,html,three.js,webgl,Javascript,Html,Three.js,Webgl,我使用的是之前回答的问题中的一个示例: 我做了一些改变,让它以我想要的方式工作,并遇到了一些问题,我很难弄清楚 这是我的jsbin: 1) 我把物体从立方体测量法切换到了球体测量法,碰撞没有那么精确,似乎我只能点击球体的某些部分来触发碰撞。球体的大小与立方体的大小相同,有时我在球体外部单击时也会触发碰撞。我在碰撞时警告球体的唯一编号。 有没有什么设置或位置我弄错了 2) 单击球体时,我会尝试将其颜色更改为红色,但球体的所有颜色都会更改为红色,而不仅仅是单击的颜色。我看了一下当球体被点击时,int

我使用的是之前回答的问题中的一个示例:

我做了一些改变,让它以我想要的方式工作,并遇到了一些问题,我很难弄清楚

这是我的jsbin:

1) 我把物体从立方体测量法切换到了球体测量法,碰撞没有那么精确,似乎我只能点击球体的某些部分来触发碰撞。球体的大小与立方体的大小相同,有时我在球体外部单击时也会触发碰撞。我在碰撞时警告球体的唯一编号。 有没有什么设置或位置我弄错了

2) 单击球体时,我会尝试将其颜色更改为红色,但球体的所有颜色都会更改为红色,而不仅仅是单击的颜色。我看了一下当球体被点击时,intersects数组是什么,它只返回被点击的那个数组,我不知道为什么它会改变所有的数组

3) 最后,我一直在寻找好的资源、教程、示例,这些都是最新的,或者对工作原理有很好的解释,但是我没有找到任何我尝试过的官方文档,但是很多章节都说“todo”。我只是想知道是否有人有任何正当的资源可以引导我去帮助我学习这些东西


谢谢您的帮助。

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

for(变量i=0;i 0){
//在这里换颜色
break;//中断循环很重要
}
}
至于文件;这些很好。但目前它主要是通过sourcecode和github来查找您需要的内容

1)在您的情况下,CSS
边距必须为零

body { background: black; margin: 0; overflow: hidden }
或者,您可以看到的答案

2) 由于所有对象共享同一材质,因此所有对象的颜色都会更改。改为这样做:

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

3) 您必须通过学习示例和阅读留言板来学习three.js。另外,还可以查看其他提示。

您好,谢谢您的回复,我已经尝试了您的建议,但没有效果。单击时,所有球体都变为红色。我还试着改变循环的内部结构,看看是否能找到答案,但仍然得到了相同的结果。谢谢你的帮助。谢谢你的洞察力,似乎正在工作。我将继续浏览示例并仔细阅读董事会。再次感谢。
ButtonsMesh = new THREE.Mesh( ButtonsGeometry, new THREE.MeshBasicMaterial() );