Javascript Three.js自定义几何体光线投射器捕捉到错误的对象

我需要使用我自己的gemetry，因为默认立方体在线框模式下看起来不像它应该的样子（现在它由三角形而不是正方形组成）

因此，我制作了自己的几何体，看起来还可以，但光线投射器在处理自己的对象时不如处理内置立方体时效果好

var cube = new THREE.Line( getCube( 5,5, 5), new THREE.LineDashedMaterial( { color: 0x000000,dashSize: 1, gapSize: 0.1, linewidth: 2 } ),THREE.LinePieces );

其中getCube（）返回

见示例：

顶部的6个彩色填充框是defalt THREE.CubeGeometry框，使用raycaster选择它们非常完美，6个线框是我的自定义几何体

问题： 如果你试图在框外点击，但离框很近，它会抓住框，如果你在框内（中间）点击，它也不会抓住

但最烦人的是，如果你在一个框内点击，但靠近另一个框，有时它捕捉不到错误的框

---

我不确定能不能做得更好，尝试了所有的几何。计算。。。方法，但仍然没有效果。

你好，您的自定义多维数据集实际上不是多维数据集。它们只是一堆没有表情的线条。您的选择没有按预期返回，因为您的“立方体”确实有缺口。您可以在

getCube

函数中完成顶点的构建，然后以类似的方式构建所有面

看看这个例子：

通常，您需要仔细地绘制每3组顶点的图案，以便在按时钟方向构建面时，可以正确计算法线。下面是添加面的基本示例

geometry.faces.push(new THREE.Face3(1,2,3));

但是！请注意，这将导致上述对角线穿过线框。因此，对于您的用例，为什么不简单地使用基本立方体网格和拾取并移除线框，然后覆盖线框作为您的自定义线框。两全其美

仅供参考，您可能已经知道，但Face4已经不存在了，因此您需要使用Face3和某种自定义线框来完成此操作

编辑： 我对你的小提琴做了一个小测试，发现了一些奇怪的东西。使用CanvasRender，即使线框脱离默认立方体，您仍然可以看到对角线！我试过Webgl渲染器，它很好。我得进一步调查一下

游说者

WebGLRenderer

再一次提醒我，在Three.js网站上使用

MeshBasicMaterial

的所有画布渲染器示例中，似乎都可以看到这些重影脸线。我唯一能做的就是将立方体网格材质的不透明度降低到0.1以减少效果。我想唯一的其他方法是切换到WebGLRenderer，但我希望在这方面出错：）这是最后一个测试

---

你好，您的自定义多维数据集实际上不是多维数据集。它们只是一堆没有表情的线条。您的选择没有按预期返回，因为您的“立方体”确实有缺口。您可以在

getCube

函数中完成顶点的构建，然后以类似的方式构建所有面

看看这个例子：

通常，您需要仔细地绘制每3组顶点的图案，以便在按时钟方向构建面时，可以正确计算法线。下面是添加面的基本示例

geometry.faces.push(new THREE.Face3(1,2,3));

但是！请注意，这将导致上述对角线穿过线框。因此，对于您的用例，为什么不简单地使用基本立方体网格和拾取并移除线框，然后覆盖线框作为您的自定义线框。两全其美

仅供参考，您可能已经知道，但Face4已经不存在了，因此您需要使用Face3和某种自定义线框来完成此操作

编辑： 我对你的小提琴做了一个小测试，发现了一些奇怪的东西。使用CanvasRender，即使线框脱离默认立方体，您仍然可以看到对角线！我试过Webgl渲染器，它很好。我得进一步调查一下

游说者

WebGLRenderer

再一次提醒我，在Three.js网站上使用

MeshBasicMaterial

的所有画布渲染器示例中，似乎都可以看到这些重影脸线。我唯一能做的就是将立方体网格材质的不透明度降低到0.1以减少效果。我想唯一的其他方法是切换到WebGLRenderer，但我希望在这方面出错：）这是最后一个测试

---

更多的是一种变通方法，而不是解决真正的问题，但它是有效的，因此如果我找不到直接的解决方案，我将使用你的解决方案。谢天谢地，这是一个解决办法。我自己也对这些游说活动感到有点惊讶。我假设你在材料中使用了

线框：true

，但令我惊讶的是，这不是我发现的情况啊，这是从r59到r60的迁移线程，其中删除了四边形。你会发现建议的解决方案是我们在这里偶然发现的：是的，当我的项目在three.js升级后改变了工作方式时，我注意到了这一点。不过，这里的解决方案使要添加到场景中的立方体加倍，当我的屏幕上有超过10^3个立方体时，这将不好。更多的是一种解决方法，而不是解决真正的问题，但它是有效的，因此如果我找不到直接的解决方案，我将使用你的解决方案。谢天谢地，这是一个解决办法。我自己也对这些游说活动感到有点惊讶。我假设你在材料中使用了

线框：true

，但令我惊讶的是，这不是我发现的情况啊，这是从r59到r60的迁移线程，其中删除了四边形。你会发现，建议的解决方案是我们在这里偶然发现的：是的，当我的项目在three.js升级后改变了工作方式时，我注意到了这一点。但是，这里的解决方案会使立方体加倍，以添加到场景中，当我