webgl three.js 在网格上获取鼠标位置答案

【问题标题】：webgl three.js get mouse position on Meshwebgl three.js 在网格上获取鼠标位置
【发布时间】：2016-11-28 20:40:44
【问题描述】：

老实说，我试图在下面找到问题的解决方案，请帮助我。对不起我的英语:)

我已经创建了一张地图，添加了一个摄像头 + 添加了所有维度的摄像头控件。

当我得到光标相对于网格的位置时，位置总是不同的角度不同。

查看jsfiddle.net中的所有代码：http://jsfiddle.net/BT3g3/

我使用 Three.js r49。

这段代码只负责计算位置。

function onDocumentMouseMove(event) {
    var vector = new THREE.Vector3(  ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 1);
    projector.unprojectVector( vector, camera );

    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersect = ray.intersectObject( island );  

    if ( intersect.length > 0) { // !!
        document.getElementById('z').value = intersect[0].point.z;
        document.getElementById('x').value = intersect[0].point.x;
    }
}

我在浏览互联网时遇到an article，光标位置在地图上，但我无法将此方法移至我的项目:(

请帮忙！

【问题讨论】：

问题解决了！！！我在 THREE.Vector3(x, y, z) 中将“z”更改为 0.5

标签： javascript cursor position three.js webgl

【解决方案1】：

你试过跟随吗？

mouseX = ( ( event.clientX - canvas.offsetLeft ) / canvas.clientWidth ) * 2 - 1;
mouseY = - ( ( event.clientY - canvas.offsetTop ) / canvas.clientHeight ) * 2 + 1;

【讨论】：

嗨！我的 webgl 项目被拉伸到全屏。但是我测试了你的脚本，当我移动网格并将鼠标移动到这个网格的中心时，坐标与以前的坐标不同。
谢谢！我发现这个问题的所有解决方案都适用于占据整个浏览器窗口的画布。如果您的画布仅占据浏览器窗口的一部分，则此方法有效。
注意画布偏移量是本地的。而不是 offsetLeft 更好地使用返回视口偏移对象的 getBoundingClientRect()。