javascript - Three.js 相交 CircleGeometry 在使用 THREE.Line 时有效，但在使用 THREE.Mesh 时无效

Question

请参阅以下 fiddle :

https://jsfiddle.net/1jmws2bp/

如果将鼠标移动到线条或圆圈上，它应该将颜色更改为白色(对我来说，本地有效，在 jsfiddle 中有时会有一点偏移，不完全确定原因)。

问题是，如果将第 22 行:更改为 varcircle = new THREE.Mesh(geometry,material)，则圆圈将被填充(按预期)，但如果您现在将其悬停在其上，它不会更新颜色。

这是为什么呢？如果我手动添加:scene.children[0].material.color.setHex(0xff0000);

它确实有效。因此，在我看来，使用网格时，RayCaster 看不到交叉点。 (通过添加此行进行验证alert("intersection"); 在 if (intersects.length > 0) 之后，如果我使用 Mesh 而不是 Line<，则不会发出警报)

Answer 1

如果要与圆的网格相交，请从 newCircle() 函数中删除行 geometry.vertices.shift(); 。

当您调用.shift()时，您将从顶点数组中删除第一个元素。几何图形中的这种“移位”数组对于 THREE.Line() 来说是可以接受的，因为它只需要顶点，但对于 THREE.Mesh() 来说是 Not Acceptable ，因为它需要顶点和基于顶点的面。

此外，如果您想使用 THREE.Mesh()，请将 Material 从 THREE.LineBasicMaterial() 更改为 THREE.MeshBasicMaterial().