1

我已经创建了 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);
}

问：如何更新three.js Draggable Cubes 示例，以使对象在单击和拖动时不会落后于鼠标？

4

0 回答 0