显示标题栏时，ThreeJs raycaster的event.clientY值不正确

Question

这是问题所在：

单击时，我想在3D模型上粘贴一个球体。 我使用ThreeJs raycaster来做到这一点。 如果画布覆盖整个页面，则效果很好，但是如果我在页面上添加标题栏，则效果很好。 以下是一些图形示例：

没有标题栏，球体将显示在鼠标指针下方，没问题： 确定

现在带有标题栏； 糟糕，球面比鼠标指针更向下： Ko

如果我向下滚动页面，即使没有标题栏，也会出现问题。

这是js代码：

function addSphere(coords, color) {

    sphere = new T.Mesh(sphereGeometry, sphereMaterial)

    sphere.position.set(coords.x, coords.y, coords.z)

    sphere.name = 'Sphere'

    scene.add(sphere)

}


function listeners() {

    document.addEventListener('resize', function() {

        var width = window.innerWidth
        var height = window.innerHeight

        camera.aspect = width / height
        camera.updateProjectionMatrix()
        renderer.setSize(width, height)

    }, false)


    container.addEventListener('click', function(e) {

        console.log('Clic sur container')

        e.preventDefault()

        mouse.x = (e.clientX / width) * 2 - 1
        mouse.y = - (e.clientY / height) * 2 + 1

        ray.setFromCamera(mouse, camera)

        var intersects = ray.intersectObjects(scene.children)

        if ( intersects[0].object.name == 'Mannequin' ) {

            // var coords = mannequin.worldToLocal(intersects[0].point)
            var coords = intersects[0].point

            addSphere(coords, 'color')

            console.log('Clic sur le mannequin')
            console.log(intersects[0])

        }

        if ( intersects[0].object.name == 'Sphere' ) {

            console.log('Clique sur la sphère : ', intersects[0].object)

        }

    }, false)

}

和index.html：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">

    <!-- <script src="js/app.js"></script> -->
    <!-- <script src="js/exemple.js"></script> -->

</head>
<body>

    <div id="header-bar" style="left: 0; right: 0; top: 0; height: 44px; line-height: 44px; text-align: center; font-size: 1.4em">Header bar</div>

    <div id="container"></div>

    <div id="buttons" style="display: block; left: 0; right: 0; bottom: 0; height: 25px;">

        <button id="btnFront">Front</button>
        <button id="btnBack">Back</button>
        <button id="btnRight">Right</button>
        <button id="btnIso1">Iso 1</button>
        <button id="btnIso2">iso 2</button>
        <button id="btnFeet">Feet</button>
        <button id="btnDelete">Delete</button>
        <button id="btnUndo">Undo</button>
        <button id="btnRotation">Rotation on/off</button>

    </div>

    <!-- Three.js -->
    <script src="lib/threejs/three.js"></script>
    <script src="lib/threejs/OrbitControls.js"></script>
    <!-- <script src="lib/threejs/CanvasRenderer.js"></script>
    <script src="lib/threejs/Projector.js"></script> -->

    <script src="js/mannequin.js"></script>
    <script src="js/events.js"></script>

</body>
</html>

我不明白会发生什么。 有人有主意吗？

预先谢谢你。

Answer 1

我通过从e.clientY中删除44个单元（44是标题栏的高度）解决了这个问题。

mouse.x = (e.clientX / width) * 2 - 1
mouse.y = - ((e.clientY - 44) / height) * 2 + 1

但是，如果我滚动页面，问题仍然存在。

Answer 2

@ prisoner849谢谢您的回答。 它带我到这些链接：

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates

＆

画布中的实际鼠标位置

我试过了：

function getMousePositionInCanvas(canvas, e) {

    var rect = canvas.getBoundingClientRect()
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    }

}


    var mousePosInCanvas = getMousePositionInCanvas(document.querySelector('canvas'), e)

    mouse.x = (mousePosInCanvas.x / width) * 2 - 1
    mouse.y = - (mousePosInCanvas.y / height) * 2 + 1

而且效果很好。

非常感谢你 ！