從屏幕座標查找世界座標

Question

這個問題有很多答案，但我不確定它們是否都與XTK一起工作，比如在Three.JS中看到多個答案，當然還有XTK和Three.JS顯然沒有相同的API。使用光線和Matrix似乎非常類似於其他框架的許多其他解決方案，但我仍然沒有在這裏抓住一個可能的解決方案。現在只需找到座標X，Y和Z並將它們記錄到Console.Log就可以了，後來我希望創建一個標題/工具提示來顯示信息，但還有其他方法可以顯示它。但是至少有人能告訴我這是否可以使用射線與物體發生碰撞？我不確定碰撞在XTK中如何與網格或任何其他文件一起工作。現在任何提示都會很棒！

Answer 1

這裏是我的功能XTK到unproject。請告訴我，如果你看到錯誤。現在由此產生的點和相機位置，我應該能夠找到我的交點。爲了使下一步的計算速度更快，我將在pick事件中調用它，所以我只需要嘗試與給定對象的交集。如果我有時間，我也會嘗試測試邊界框。

注意：最後一行不是必需的，我可以在光線而不是點上工作。

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，在我的回購，你可以找到在camera3D.js功能和renderer3D.js在XTK高效的3D採摘。

Answer 2

現在這是不容易的。我想你可以抓住相機的視圖矩陣來計算位置。如果你這樣做，那將它作爲內置功能帶回到XTK將會很棒！

目前，僅採摘的對象可能是這樣的（r是X.renderer3D）：

/** 
* Picks an object at a position defined by display coordinates. If 
* X.renderer3D.config['PICKING_ENABLED'] is FALSE, this function always returns 
* -1. 
* 
* @param {!number} x The X-value of the display coordinates. 
* @param {!number} y The Y-value of the display coordinates. 
* @return {number} The ID of the found X.object or -1 if no X.object was found. 
*/ 
var pick = r.pick($X, $Y);