Javascript three.js拖放公共解决方案会导致对象；“跳跃”；

在过去的几天里，我一直在用three.js制作一个交互式环境，在这个环境中，你可以拿起一个浇水罐（拖放），点击它让它喷水，场景中树上的芒果就会生长出来

我已经成功地实现了拖放，因为它们有很多关于它的教程，基本上都使用完全相同的代码。我觉得这个解决方案有一个bug，我在其他人的jfiddles中也发现了这个bug，所以在我有限的经验中，它似乎是实际代码的问题，而不仅仅是我的实现问题

我在这里找到的常见实现如下所示：

let plane;
function createPlane() {
  plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(WIDTH, HEIGHT, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffffff, alphaTest: 0, visible: false }));
  scene.add(plane);
}

let selection;
function onDocumentMouseDown(e) {
  e.preventDefault();

  const mouseX = (e.clientX / WIDTH) * 2 - 1;
  const mouseY = -(e.clientY / HEIGHT) * 2 + 1;

  const mouse3D = new THREE.Vector3(mouseX, mouseY, 0.5);
  mouse3D.unproject(camera);

  raycaster.set(camera.position, mouse3D.sub(camera.position).normalize());

  const intersectedObjects = raycaster.intersectObjects(objects, true); 
  if (intersectedObjects.length > 0) {

    selection = intersectedObjects[0].object;

    const intersectPlane = raycaster.intersectObject(plane);
    offset.copy(intersectPlane[0].point).sub(plane.position);
  }
}

function onDocumentMouseMove(e) {
  e.preventDefault();
  const mouseX = (e.clientX / WIDTH) * 2 - 1;
  const mouseY = -(e.clientY / HEIGHT) * 2 + 1;

  const mouse3D = new THREE.Vector3(mouseX, mouseY, 0.5);
  mouse3D.unproject(camera);
  raycaster.set(camera.position, mouse3D.sub(camera.position).normalize());
  raycaster.setFromCamera( mouse3D.clone(), camera);
  if (selection) {
    const intersectPlane = raycaster.intersectObject(plane);
    selection.position.copy(intersectPlane[0].point.sub(offset));
  } else {
    const intersectedObjects = raycaster.intersectObjects(objects);
    if (intersectedObjects.length > 0) {
      plane.position.copy(intersectedObjects[0].object.position);
      plane.lookAt(camera.position);
    }
  }
}

function onDocumentMouseUp(e) {
  selection = null;
}

在这个实现中，当您单击对象并且一秒钟都不移动它时，对象“跳”回其原始位置。此外，如果我在x轴上拖动对象，并尝试再次从该位置拖动它，它会“跳”到（0，0，0），这是更烦人的部分

我不熟悉如何制作jfiddle，我想我有太多的代码要让它成功，但你可以理解我的意思，感谢制作它的人，这对我真的很有帮助！！很抱歉，我用它作为一个例子，我认为可能是一个错误

如果你在盒子周围玩一会儿，你可以看到它“跳”回到中心。这个JSFIDLE的代码与我在stackoverflow和其他3.js特定教程中找到的所有其他解决方案基本相同。是否有人以不同的方式实现拖放并避免了此问题？这是不可避免的，因为似乎每个人都使用这种方法，尽管这个问题

---

我将非常感谢任何人愿意给予的任何帮助。感谢您花时间阅读和思考这篇文章

我希望three.js示例将提供更多帮助：和。也谢谢你的回复！韦斯特·兰利本人：）这些太棒了！我不知道它们在多大程度上适用于我的情况，因为第一个似乎使用DragControl，而第二个似乎没有任何拖动，我通过根本没有偏移来改善这种情况，但潜在的问题仍然是对象认为它的位置始终是它的原始位置，无论我把它移到哪里。暗示的建议是使用链接中所示的编码模式，但这取决于您。抱歉，我无法帮助您调试代码。