Question

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

所以我制作了自己的几何体，看起来还不错，但是raycaster对我自己的对象的效果不如内置立方体那么好。

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

其中getCube（）返回

var geometry = new THREE.Geometry()

参见示例： http://jsfiddle.net/QHjSM/12/

顶部有6个颜色填充的盒子是defalt的THREE.CubeGeometry盒子，用raycaster选择它们是完美的，6个线框是我的自定义几何体。

问题：如果你试图在盒子外面点击，但非常靠近它，它会抓住盒子，如果你在盒子里面点击（在它的中间）它也不会捕获它。

但最令人讨厌的是，如果你在一个盒子里面点击，但是接近另一个盒子，有时它会捕获错误的盒子。

我不确定它可以做得更好，尝试了所有的geometry.compute ...方法，但仍然无效。

Answer 1

美好的一天，您的自定义多维数据集实际上不是多维数据集。它们只是一堆没有相应面孔的线条。您的选择没有按预期返回，因为您的“立方体”确实有正确的投掷孔。在构建顶点后，您可以在getCube函数中执行的操作，然后以类似的方式构建所有面。

看一下这个例子：Issue with custom geometry and face normal

一般来说，你需要仔细地模仿每3组顶点，以便在顺时针方向构建面时，以便法线正确计算。这是添加面部的基本示例。

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

BUT！请注意，这将导致穿过线框的上述对角线相同。因此，对于您的用例，为什么不简单地同时使用基本立方体网格和拾取线框，然后将线条绘制框重叠为自定义线框。两全其美。

仅供参考，您可能已经知道但是Face4已经不见了，所以无论如何你都需要使用Face3和某种自定义线框。

编辑：我对你的小提琴做了一点测试，注意到一些奇怪的事情。使用CanvasRender，即使线框偏离默认立方体，您仍然可以看到对角线！我试试WebGLRenderer，没关系。我将不得不进一步研究那个。

CanvasRenderer http://jsfiddle.net/QHjSM/13/

WebGLRenderer http://jsfiddle.net/QHjSM/14/

我再次，嗯，看起来那些在Three.js网站上使用MeshBasicMaterial的CanvasRenderer示例中可以看到那些幻影的面线。我唯一能做的就是简单地将立方体网格材料的不透明度降低到0.1以减少效果。我想唯一的另一种方法是切换到WebGLRenderer，但我期待这个错误:)这是最后一次测试

http://jsfiddle.net/QHjSM/16/

Three.js自定义几何raycaster捕获错误的对象

1 个答案: