ThreeJS Ray 与隐形平面有交集吗？

Question

我一直在研究ThreeJS，但我无法弄清楚当前的问题。

当我从相机投射光线时，它有太多的交叉点，其中一些甚至不靠近我的实际平面。我应该找到交叉点，它实际上刺穿了我的可见平面。有什么想法如何做到这一点吗？

示例（双击平面，每个框代表交点。应该与 Chrome 和 FF 一起使用）： http://concurio.com/webgl/thirdjs-plane.html

Answer 1

您需要在几何体上调用computeCentroids 和computeFaceNormals。即使如此，相交代码也仅适用于平面。如果您的几何体中需要有非平面四边形，则需要使用三角形。或者修复 Three.js 中的错误（在 https://github.com/mrdoob 提交问题/two.js/issues/1357 )

另外，将 renderer.domElement 移动到页面的左上角。

简而言之，试试这个：

var s = renderer.domElement.style;
s.left = s.top = '0px';
s.position = 'absolute';

var planeGeo = new THREE.PlaneGeometry(400, 200, 40, 40);
for ( var i = 0, l = planeGeo.vertices.length; i < l; i ++ ) {
  // planar quad faces 
  var p = planeGeo.vertices[i].position;
  p.z = Math.sin(p.y / 20)*40;
}
planeGeo.computeFaceNormals();
planeGeo.computeCentroids();

[更新]在 Three.js 的 dev 分支中，有 THREE.GeometryUtils.triangulateQuads 您可以将其用作解决方法。它已经计算了面法线和质心，因此您只需将这一行添加到代码中：

THREE.GeometryUtils.triangulateQuads(planeGeo);