Javascript Three.js单击并拖动-对象落后于指针

Javascript Three.js单击并拖动-对象落后于指针,javascript,canvas,three.js,webgl,Javascript,Canvas,Three.js,Webgl,我创建了Three.js Draggable Cubes示例的一个近乎精确的实现,只是我的实现忽略了2D中移动的z轴。示例可在此处找到: 虽然我可以点击并在我的对象周围移动,但如果我移动鼠标太快,对象将落后;鼠标指针将移动到它的位置,然后对象将沿着鼠标路径移动到该位置。这个问题在Three.js示例中也很明显。尝试以中等速度以外的任何速度拖动其中一个立方体 我尝试了一些方法使对象直接位于鼠标指针下,但没有一种方法有效。我认为最接近的解决方案是在MouseMove事件中更改鼠标位置更新。然而,代码

我创建了Three.js Draggable Cubes示例的一个近乎精确的实现,只是我的实现忽略了2D中移动的z轴。示例可在此处找到:

虽然我可以点击并在我的对象周围移动,但如果我移动鼠标太快,对象将落后;鼠标指针将移动到它的位置,然后对象将沿着鼠标路径移动到该位置。这个问题在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);
}

问:我如何更新three.js Draggable Cubes示例,使对象在单击和拖动过程中不会落后于鼠标?处理输入总是非常慢,如果您希望能够快速移动,则必须插值。。。不过,我会尝试避免访问处理程序中的DOM:cache innerWidth/Height。或者更确切地说,缓存它们的反转,以便以后可以进行乘法而不是除法。你有没有弄明白这一点?这很可能是你绘制几何图形的方式的问题。尝试使用缓冲几何体。我已经能够画出200000盒没有泛滞后。