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

我正在创建一个球体Three.js每当鼠标移动时它都必须跟随鼠标，如图所示这个例子 https://stemkoski.github.io/Three.js/Mouse-Sprite.html。处理鼠标移动的函数如下：

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 https://jsfiddle.net/atwfxdpd/里面有完整的代码，根据DOM可以看到，mouseMesh未定义。你知道我做错了什么吗？

提前感谢您的回复！

为了让球体跟随鼠标，您需要将屏幕坐标转换为 ThreeJS 世界位置。参考链接 https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z.

更新了小提琴 https://jsfiddle.net/atwfxdpd/10/

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