javascript - 如何测试 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

"I divide 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."

以下是编辑器中执行拾取的代码块。如果您替换 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 );
};