Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 如何测试 Three.js 中光线拾取的错误？

In lại 作者：行者123 更新时间：2023-11-28 08:50:47 27 4
mua khóa gpt4 Nike

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

    }khác{

    console.log("fail");

    }

我确信我在这里做了一些愚蠢的事情，所以请原谅我提出这样一个平庸的问题。为什么我会收到误报？我的方法是否有缺陷？

1 Câu trả lời

"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 );
};

关于javascript - 如何测试 Three.js 中光线拾取的错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19162918/

27 4 0
Bài viết được đề xuất: Biến đổi tỷ lệ gây ra khoảng cách/đường thẳng
Bài viết được đề xuất: java - Android 上的 HighChart 动态更新
Bài viết được đề xuất: javascript - 在没有请求访问 token 的情况下检查用户是否喜欢 Facebook 页面
Bài viết được đề xuất: swift - 使用 NSSortDescriptor 对一对多关系的 NSSet 类型的数据进行排序
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com