当div的宽度减小时,用raycaster检测不完全准确,three.js(v72)

Question

这是我计算交集的代码:

var wallWidth = 1200;
var wallHeight = 500;
var containerWidth=1200,containerHeight=700; //div 
//camera
camera = new THREE.PerspectiveCamera(60, containerWidth/containerHeight, 1, 10000);
camera.position.set(0, -wallHeight / 2 + 10, wallWidth);

这是我在鼠标移动时与对象相交的函数

function onDocumentMouseMove(event) {

        mouse.x = ( event.clientX / containerWidth ) * 2 - 1;
        mouse.y = -( event.clientY / containerHeight ) * 2 + 1;

        var deltaX = event.clientX - mouseX;
        var deltaY = event.clientY - mouseY;

        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects(interactiveObj, true);

        if (intersects.length > 0) {
            //interaction with object
        }

        render();
    }

它正常工作,即当div的宽度为100%时,我在intersects对象中获取值,但是当我将div大小减小到80%时,对象没有正确拾取,即它在选择对象时鼠标离物体很远.

Answer 1

在下面的代码中使用chnage你的鼠标向量

function onDocumentMouseMove(event){

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

    var deltaX = event.clientX - mouseX;
    var deltaY = event.clientY - mouseY;

    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(interactiveObj, true);

}