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

“我分别除以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 );
};

Answer 2

问题出在我的调试测试中：

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

进行两次减法运算。

如何在three.js中测试光线拾取中的错误？

2 个答案: