javascript - IntersectObjects - THREE.Line - Three.js

Question

我有一个用于编排自定义网格的 THREE.Line 对象。现在我遇到的问题是，当用户鼠标可能越过此网格时使用光线转换 intersectObjects 时，intercept 只有在用户鼠标“直接”越过时才会成功任何网格线。

请看附件照片:

所以最终我想要完成的是，如何用“不可见”的面孔甚至形状填充线条之间的空间，以便当用户鼠标经过这个网格时，我可以触发一个 Action 。这是我目前正在做的事情:

var response = this.buildGridGeometry(modelStep,modelSize,gridtype);
var geometry = response['geometry'];
geometry.computeBoundingBox();
// #  Setup the material
var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
// #  Draw each individual line
var line = new THREE.Line( geometry, material, THREE.LinePieces );

有什么建议吗？

Answer 1

最简单的解决方案是创建一个与网格形状相同的自定义几何图形，然后使其初始位置、旋转和比例与网格匹配(如果尚未匹配)。之后，您可以将自定义几何图形作为子元素添加到网格中，以便它相应地移动。最后一步是通过设置其属性 .visible = false; 使自定义几何网格不可见。

现在您只需要在自定义几何网格上使用光线转换器 intersectsObject()，当它相交时，您就知道网格也相交了。