ThreeJS Ray 与隐形平面有交集？答案

【问题标题】：ThreeJS Ray has intersections with invisible planes?ThreeJS Ray 与隐形平面有交集？
【发布时间】：2012-02-20 01:39:37
【问题描述】：

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

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

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

【问题讨论】：

你试过最新版本的 Threejs 吗？
代码中的一个问题是画布未与页面的左上角对齐，因此鼠标坐标有点偏移。使用未修改的平面几何测试代码，一切正常。如果我向顶点 z 坐标添加偏移量，则返回的交点是错误的（对于有趣的可视化，请在 mousemove 处理程序中进行交集测试和可见。

标签： opengl-es 3d webgl three.js

【解决方案1】：

您需要在几何体上调用 computeCentroids 和 computeFaceNormals。即便如此，相交代码也仅适用于平面。如果您需要在几何中使用非平面四边形，则需要使用三角形。或者修复 Three.js 中的错误（在https://github.com/mrdoob/three.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);

【讨论】：