1

我正在尝试在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");

    }

我确定我在这里做了一些愚蠢的事情，所以我请求你原谅这样一个平庸的问题。为什么我会得到误报？我的方法有缺陷吗？

4

2 回答 2

0

“我分别除以 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 );
};
于 2013-10-03T15:55:14.460 回答
0

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

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

做了两次减法运算。

于 2013-10-03T18:02:27.407 回答