Question

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

提前感谢您的回复！

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

Answer 2

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

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

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

2 个答案: