Three.js 光线投射不适用于非全屏的 DIV

Question

我写了一个显示 3D 骨骼的简单网页，并使用 Three.js 光线投射在其上绘制点和线，效果非常好。 result of using raycast on full screen web page

但是当我把它移植到另一个有多个 windows 的网页时，这个过程没有成功。

我按照 fiddle http://jsfiddle.net/cn7ecoaa/ 的说明进行操作，但仍然失败。

这里是 CSS:

.column2  {
    float: right;
    width: 80%;
    position: static;
}

#w3-container {
    width: 1522px;
    height: 1001px;
    position: static;
}

我加载了模型并对其进行了检查，它肯定包含网格和缓冲区几何体： result of console.log after loading the 3D model

这是加载程序代码：

gltfLoader.load (   
                    inputModel,
                
                    function(gltf)
                    {
                        scene.add(gltf.scene);
                        model = gltf.scene;
                        mesh = gltf.scene.children[0];

                        mesh.name = "tibia_glTF_01";
                        
                        model.traverse
                        ( function ( child ) 
                            {
                                
                                if ( child.isMesh && child.geometry.isBufferGeometry) 
                                { 
                                    const material = new THREE.MeshPhongMaterial(  {color:0x3c3c3c, emissive: 0x000000 } );
                                    child.material = material;
                                    const bg = child.geometry;
                                    console.log("Do not change geometry.");
                                    
                                }
                            }  
                        );

                        getItem();  // Refresh the item list to be displayed

                        objects.push( mesh );
                        
                    });

这是处理 onmousedown 事件的代码：

函数 onMouseDown( 事件 ) {

    if ( !DRAWLINE ) return;

    var raycaster = new THREE.Raycaster();

    event.preventDefault();

    mouse.x = (( event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - (( event.clientY - renderer.domElement.offsetTop) / renderer.domElement.clientHeight ) * 2 + 1;

    console.log("mouse.x", mouse.x, "mouse.y", mouse.y);

    console.log("Objects", objects);

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {

        alert("HIT!");

        dot.visible = true;

        // Copy the intersection points to be used in functions addPoint()
        mouse.copy( intersects[0].point );

        intersects.length = 0; // reset the variable
    
        addPoint();

    } else {

        console.log( "<<NO Intersection!!>>" );

    }

}

无论我使用什么组合来满足偏移，光线投射的结果仍然是“<>”。

任何关于如何解决这个问题的想法将不胜感激！感谢您的帮助！

Answer 1

尝试像这样计算鼠标坐标：

const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect. right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

Three.js 光线投射不适用于非全屏的 DIV

Three.js raycasting does not work on DIV which is not full screen

three.js

raycasting