时间戳

首页 > 解决方案 > Three.js 光线投射在非全屏的 DIV 上不起作用

three.js - Three.js 光线投射在非全屏的 DIV 上不起作用

问题描述

我编写了一个显示 3D 骨骼的简单网页，并使用 Three.js 光线投射在其上绘制点和线，效果非常好。在全屏网页上使用 raycast 的结果

但是当我将它移植到另一个具有多个窗口的网页时，该过程不起作用。

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

这是CSS：

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

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

我加载了模型并检查了它，它肯定包含网格和缓冲区几何体： 加载 3D 模型后 console.log 的结果

这是加载程序代码：

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

    }

}

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

任何有关如何解决此问题的想法将不胜感激！谢谢你的帮助！

标签： three.jsraycasting

解决方案

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

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;

推荐阅读