我已经创建了Three.js Draggable Cubes示例的近乎精确的实现，除了我的实现忽略了在2D中移动的z轴。可以在此处找到示例：http://threejs.org/examples/#webgl_interactive_draggablecubes
虽然我能够点击并移动我的物体，但如果我移动鼠标太快，物体将落后;鼠标指针将移动到它的位置，然后该对象将跟随鼠标路径到该位置。这个问题在Three.js示例中也很明显。尝试以超过中速的速度拖动其中一个立方体。
我尝试了一些东西让对象直接在鼠标指针下，但没有一个工作。我认为最接近解决方案的是通过更改MouseMove事件中的鼠标位置更新。但是，看起来代码的Three.js实现返回的值介于1和-1之间而不是屏幕X和Y坐标，这让我想知道原始实现是否导致滞后。
//Original Implementation - Works With Lag
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
console.log(mouse.x + "," + mouse.y); //Output: -0.9729166666666667,0.8596858638743455
//My Implementation - Does Not Work
mouse.x = event.clientX - (window.innerWidth / 2);
mouse.y = event.clientY - (window.innerHeight / 2);
console.log(mouse.x + "," + mouse.y); //Output: -934,-410.5
//Update Function
void Update()
{
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObject(plane);
meshToMove.position.x = intersects[0].point.x;
meshToMove.position.y = intersects[0].point.y;
}
//Main Loop
function Loop()
{
Update();
Render();
requestAnimationFrame(Loop);
}