Three.js - 对象跟随鼠标位置

Posted 2023-02-27

【中文标题】Three.js - 对象跟随鼠标位置

【英文标题】：Three.js - Object follows mouse position

【发布时间】：2016-07-02 05:26:31

【问题描述】：

我正在Three.js 中创建一个球体，它必须在鼠标移动时跟随鼠标，如this example 中所示。处理鼠标移动的函数如下：

function onMouseMove(event) 

    // Update the mouse variable
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

    // Make the sphere follow the mouse
    mouseMesh.position.set(event.clientX, event.clientY, 0);
;

我附上了一个JSFiddle，里面有完整的代码，你可以看到根据DOM，mouseMesh是未定义的。你知道我做错了什么吗？

提前感谢您的回复！

【参考方案1】：

为了让球体跟随鼠标，你需要将屏幕坐标转换为threejs的世界位置。 Reference link.

Updated fiddle

var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject( camera );
var dir = vector.sub( camera.position ).normalize();
var distance = - camera.position.z / dir.z;
var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );

【讨论】：

再次感谢您！它帮助我完成了我的项目

@uhura 能否调整这个 jsFiddle，以便在触发 mousemove 事件时，移动相机而不是对象？

对不起，迟到的答案，但非常感谢你的小提琴！真的很有帮助。

您好！这行得通，但是如果我在场景中添加轨道控制呢？我想在不同的投影中操纵我的对象。所以在这种情况下，当我移动相机时，您的解决方案无法正常工作

我希望对象在屏幕空间中移动而不会出现透视失真

【参考方案2】：

您应该为此使用 THREE.Raycaster。当您设置 intersectObjects 列表时，您将能够获得与射线相交的对象数组。因此，您可以从返回列表中的“点击”对象中获取位置

基本上，您需要从 3D 世界空间和 2D 屏幕空间进行投影。 渲染器使用 projectVector 将 3D 点转换为 2D 屏幕。 unprojectVector 基本上是用于将 2D 点反向投影到 3D 世界中。对于这两种方法，您都可以通过您正在查看场景的相机。 因此，在这段代码中，您将在 2D 空间中创建归一化向量。