如何在three.js中測試光線拾取中的錯誤？

Question

我想實現射線three.js所採摘網格文件。我從這兩個例子適應：

http://mrdoob.github.io/three.js/examples/webgl_interactive_cubes.html http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

其中包含基本相同，而簡單的方法光線投射。我以幾乎完全相同的方式實現這一點，除了我使用軌跡球控件來控制相機。

的問題是，系統會給出假陽性和假陰性。我試圖畫出來自這一點的線條，而且似乎線條總是以意料之外的方向走向類似的目的地。

function testfunction(event){ 

    // I devide by 3.5 and 2 respectively, because I do this with the actual 
    //rendering window so that it doesn't take up the entire screen. 
    //Omitting the division doesn'tseem to change the behavior too much 

    var vector = new THREE.Vector3((event.clientX/(window.innerWidth/3.5)) * 2 - 1, - (event.clientY/(window.innerHeight/2)) * 2 + 1, 0.5); 

    // Line to visualize the supposed position of our raycaster. 
    //I may be doing this wrong, but it seems that the 
    // line is coming and going from the wrong position. 
    var material2 = new THREE.LineBasicMaterial({ 
     color: 0x0000ff 
     }); 

    var geometry2 = new THREE.Geometry(); 
    geometry2.vertices.push(camera.position); 
    geometry2.vertices.push(vector.sub(camera.position).normalize()); 


    var line = new THREE.Line(geometry2, material2); 
    scene.add(line); 
    //unprojects the vector is per most picking alogorithms. 
    //I don't know the math to check if this is the correct value.   

    projector.unprojectVector(vector, camera); 

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

    var intersects = raycaster.intersectObject(mesh, true); 

    console.log("Intersection length:" + intersects.length); 

    //Arrow was suggested to me. It points up from the origin? wth? 
    var arrow = new THREE.ArrowHelper( camera.position, vector.sub(camera.position).normalize()); 
    scene.add(arrow); 
    console.log(arrow); 

    if (intersects.length > 0) { 
    // getting both false positives and negatives. However, I am implementing this exactly as Mr. Doob does. 
    // Could it be the trackball controls I am using that are screwing this up? 

    console.log("win!"); 

    }else{ 

    console.log("fail"); 

    } 

我相信我在這裏做了一些愚蠢的事情，所以我請求你赦免這樣一個平庸的問題。 爲什麼我會得到誤報？ 我的方法是否有缺陷？

Answer 1

的問題是在我的調試測試：

var geometry2 = new THREE.Geometry(); 
    geometry2.vertices.push(camera.position); 
    geometry2.vertices.push(vector.sub(camera.position).normalize()); 

做了減法運算的兩倍。

Answer 2

「我分別除以3.5和2，因爲我在實際渲染窗口中這樣做，因此它不佔用整個屏幕。」

以下是從進行採摘編輯器的代碼塊。如果你用3.5和2.0常量代替並使用element.getBoundingClientRect()，那麼這是否會對結果產生積極影響？

var getIntersects = function (event, object) { 

    var rect = container.dom.getBoundingClientRect(); 
    x = (event.clientX - rect.left)/rect.width; 
    y = (event.clientY - rect.top)/rect.height; 
    var vector = new THREE.Vector3((x) * 2 - 1, - (y) * 2 + 1, 0.5); 

    projector.unprojectVector(vector, camera); 

    ray.set(camera.position, vector.sub(camera.position).normalize()); 

    if (object instanceof Array) { 

     return ray.intersectObjects(object); 

    } 

    return ray.intersectObject(object); 
};