xtk - 从屏幕坐标中查找世界坐标

Question

这个问题有很多答案，但我不确定它们是否都适用于 XTK，例如在 Three.JS 中看到了多个答案，但当然 XTK 和 Three.JS 没有相同的 API明显地。使用光线和 Matrix 似乎与其他框架的许多其他解决方案非常相似，但我仍然没有掌握这里可能的解决方案。现在只要找到坐标 X、Y 和 Z 并将它们记录到 Console.Log 就可以了，后来我希望创建一个标题/工具提示来显示信息，但还有其他方法可以也显示它。但是至少有人可以告诉我是否可以使用射线与物体碰撞？我不确定在 XTK 中碰撞如何与网格或任何其他文件一起工作。现在任何提示都会很棒!!

Answer 1

这是我在 xtk 中取消投影的功能。如果您看到错误，请告诉我。现在有了结果点和相机位置，我应该能够找到我的交叉点。为了加快后续步骤的计算速度，我将在拾取事件中调用它，因此我只需要尝试与给定对象的交集。如果我有时间，我也会尝试测试边界框。

注意:最后几行不是必需的，我可以在射线而不是点上工作。

X.camera3D.prototype.unproject = function (x,y) {

  // get the 4x4 model-view matrix
  var mvMatrix = this._view;

  // create the 4x4 projection matrix from the flatten gl version
  var pMatrix = new X.matrix(4,4);
  for (var i=0 ; i<16 ; i++) {
    pMatrix.setValueAt(i - 4*Math.floor(i/4), Math.floor(i/4), this._perspective[i]);
  }
  // compute the product and inverse it
  var mvpMatrxix = pMatrix.multiply(mwMatrix); /** Edit : wrong product corrected **/
  var inverse_mvpMatrix = mvpMatrxix.getInverse();
  if (!goog.isDefAndNotNull(inverse_mvpMatrix)) throw new Error("Could not inverse the transformation matrix.");

  // check if x & y are map in [-1,1] interval (required for the computations)
  if (x<-1 || x>1 || y<-1 || y>1) throw new Error("Invalid x or y coordinate, it must be between -1 and 1");

  // fill the 4x1 normalized (in [-1,1]⁴) vector of the point of the screen in word camera world's basis
  var point4f = new X.matrix(4,1);
  point4f.setValueAt(0, 0, x);
  point4f.setValueAt(1, 0, y);
  point4f.setValueAt(2, 0, -1.0); // 2*?-1, with ?=0 for near plan and ?=1 for far plan
  point4f.setValueAt(3, 0, 1.0); // homogeneous coordinate arbitrary set at 1

  // compute the picked ray in the world's basis in homogeneous coordinates
  var ray4f = inverse_mvpMatrix.multiply(point4f);
  if (ray4f.getValueAt(3,0)==0) throw new Error("Ray is not valid.");
  // return in not-homogeneous coordinates to compute the 3D direction vector
  var point3f = new X.matrix(3,1);
  point3f.setValueAt(0, 0, ray4f.getValueAt(0, 0) / ray4f.getValueAt(3, 0) );
  point3f.setValueAt(1, 0, ray4f.getValueAt(1, 0) / ray4f.getValueAt(3, 0) );
  point3f.setValueAt(2, 0, ray4f.getValueAt(2, 0) / ray4f.getValueAt(3, 0) );
  return point3f;
};

编辑

Here ，在我的 repo 中，您可以在 camera3D.js 和 renderer3D.js 中找到用于在 xtk 中高效进行 3D 拾取的函数。