Javascript 如何使用箭头键将立方体平滑地移动到三个平面的边缘

我有以下几把小提琴：

可以使用箭头键移动立方体：

  function Keyboard() {
    var speed = 1;
    
    if( event.keyCode == 65 || event.keyCode == 37) { cube.translateX( -1 ) }// Left 
    else if( event.keyCode == 68 || event.keyCode == 39) { cube.position.x += speed }// Left } // Right d
    else if( event.keyCode == 87 || event.keyCode == 38) { cube.position.y += speed } // Up w
    else if( event.keyCode == 83 || event.keyCode == 40) { cube.position.y -= speed } // Down s

  

    fixedCubeCoordinates.map( box => {
      if (
        box.x === cube.position.x &&
        box.y === cube.position.y &&
        box.z === cube.position.z
      ) {
        cube.position.x = old.x;
        cube.position.y = old.y;
        cube.position.z = old.z;
      }
    });       
  }

正如你所看到的，立方体并不是平稳移动的，它有点像远程传送。它同时还“移动”1个立方体大小。本例中的平面（白色）可以具有不同的形状（取决于加载的坐标）。此时，您可以移动到平面之外

我想要的是，当按下箭头键时，让立方体平滑地移动/滑动到平面边缘。所以，如果我按左键，立方体向左移动，并在边缘停止。如果我按下，它会停在中间的边缘（因为那里有一个洞）。< /P> 我是一个使用three.js的初学者，但是我如何才能做到这一点呢？首先，立方体必须保持平稳移动，并在边缘停止