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

我正在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是未定义的。您是否知道我在做什么错？

提前感谢您的回复!

最佳答案

为了使球体跟随鼠标，您需要将屏幕坐标转换为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 ) );

关于javascript - Three.js-对象跟随鼠标位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36033879/