Question

当我使用窗口对象获取高度和宽度时，我能够从click事件中获取相交，但是事实证明，在动态尺寸的画布上获取相交的位置要困难得多。我不确定要用不总是相同大小的div计算vector.x和vector.y值的公式。

画布是div的大小，始终具有4：3的宽高比，并调整大小以适合窗口，并且始终位于窗口的中心。

如果我将窗口的大小调整为4：3，则以下代码可以正常工作：

mouse.x = (ecx/div_width) *2 -1;
mouse.y= -(ecy/div_height) *2 + 1;

当我调整窗口大小时，无论哪个尺寸大于画布的尺寸都具有不正确的值。我已经链接了一张图像，以粗略地描述问题的表现方式

Image of horizontal dimension issue

我最初以为，匹配就像将窗口和画布的大小之差除以

我的问题是，如何获取正确的值以将其x和y属性传递给矢量对象？（使用Vector3和Raycaster）

这是我用来尝试获得被单击对象的功能：

    function getClicked(event){
        event.preventDefault();
        var ecx = event.clientX;
        var ecy = event.clientY;

        //elem is the div containing the canvas
        //the canvas is not the same size as the window
        var elem_w = elem.innerWidth();
        var elem_h = elem.innerHeight();

        //most examples suggest using the window height and width
        //to get the position of the mouse in the scene.
        //since the scene isn't the same size as the window, that doesn't work
        var ww = window.innerWidth;
        var wh = window.innerHeight;

        mouse.x = (ecx/ww) *2 -1;
        mouse.y= -(ecy/wh) *2 + 1;
        var objlist = []
        rc.setFromCamera(mouse, camera);
        var intersects = rc.intersectObjects(scene.children, true);
        for (var i=0;i<names_to_spin.length;i++){
            var obj = intersects[i];
            objlist.push(obj);
        }
        //ideally, this should return a list of the objects under the cursor
        return objlist;
    }

使用raycaster和vector获取在调整div大小内的鼠标位置

0 个答案: