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

Three.js - Object follows mouse position

本文关键字：鼠标 位置 跟随 对象 js      更新时间：2023-09-26

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

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是未定义的。你知道我做错了什么吗？

提前感谢您的回复！

要使球体跟随鼠标，您需要将屏幕坐标转换为 threejs 世界位置。参考链接。

更新的小提琴

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 ) );

你应该使用 THREE。雷卡斯特为此。当您设置相交对象列表时，您将能够获得与光线相交的对象数组。因此，您可以从返回的列表中的"单击"对象中获取位置

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

相关文章：