如何使用three.js获取鼠标位置？

Question

你好，我正在使用IcosahedronGeometry。在它的每个顶点上，我都添加了CircleGeometry。现在我的要求是当鼠标移向圆圈时，圆圈应该感知到鼠标移动并朝着鼠标移动。因此，我创建了一个RingGeometry来围绕圆圈。所以如果鼠标移向环，圆圈应该感知到鼠标的位置。

但是我无法获取鼠标位置。我正在使用raycaster，是否有其他替代方法来查找鼠标的位置？

- disciple

Answer 1

Raycaster是实现此功能的标准方法：

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse.clone(), camera );   

var objects = raycaster.intersectObjects(scene.children);

http://jsfiddle.net/nhvff8ra/6/

- stdob--

---

谢谢。你的例子与我的需求略有关联...它对我有所帮助。 - disciple

你能解释一下这里发生了什么吗？鼠标位置方程从哪里来的？ - Rylan Schaeffer

@RylanSchaeffer 这个方程返回一个介于-1和1之间的值，而0是窗口的中心。 - Norman

Answer 2

我做了以下操作（为简洁起见，有些部分被省略）：

// Use of the Raycaster inspired by  webgl_interactive_cubes.html, in the THREE.js project examples directory
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2()
document.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousedown', onMouseDown, false);


function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function manageRaycasterIntersections(scene, camera) {
    camera.updateMatrixWorld();
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {

    } 
    else {

    }
}

function onMouseDown(event){
   customLog("mouse position: (" + mouse.x + ", "+ mouse.y + ")");
}

请查看此链接获取完整代码。

- Evil Toad

---

嗨，谢谢你的回答。但是关于Z轴呢？我也想知道Z轴的位置。 - disciple

嗨。鼠标的位置本质上是二维的，与屏幕有关。要根据鼠标指针所在的位置获取一个三维点，可以使用raycaster及其intersectObjects函数（请参见我的示例中的manageRaycasterIntersections，并查看此示例的源代码以获取更多详细信息）。 - Evil Toad

Answer 3

你是不是在寻找类似这样的东西？

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval("checkCursor()", 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

- Collin

---

我建议在发帖之前先了解一下什么是three.js。 - Martin Melichar

Answer 4

如果您的渲染在窗口或块中，例如绝对位置，则window.innerWidth等会给您错误的坐标，并且将鼠标移动附加到整个窗口只是浪费内存。

最好做这样的事情：

const renderBlock = document.querySelector('#threeJSRenderWrapper');
let renderWidth = renderBlock.offsetWidth;
let renderHeight = renderBlock.offsetHeight;
const camera = new THREE.PerspectiveCamera(60, renderWidth / renderHeight, 0.01, 100000);

// this part you can put to window resize function
camera.aspect = renderWidth / renderHeight;
camera.updateProjectionMatrix(); 
renderer.setSize( renderWidth, renderHeight );

const pointer = new THREE.Vector2();

renderBlock.addEventListener( 'pointermove', onPointerMove );

function onPointerMove( event ) {

    // calculate pointer position in normalized device coordinates
    // (-1 to +1) for both components   
    pointer.x = ( event.layerX / renderWidth ) * 2 - 1;
    pointer.y = - ( event.layerY / renderHeight) * 2 + 1;
}

// and the rest of the code for mouse intersection or wathever

event.layerX和event.layerY会给您正确的块坐标，这些坐标是与mousemove事件关联的。

- Mironek