javascript - 实现垂直运动控制

Question

if ( upDownMovement == true) {  
                        SELECTED.position.y = mouse.y * scale;
                              }

这是我实现垂直移动控制的幼稚方式（仅在 Y 轴上直接上下）。然而，它存在一个严重的问题。由于初始鼠标位置与模型原始位置不连续，因此在移动开始时始终存在“跳跃”。

实施此控制的正确方法是什么？（如果有一个图书馆做得很好，我很乐意看到它。）

我在想像 SELECTED.position.y = SELECTED.position.y + mouse.y * scale; 但我可能会错。

Answer 1

据我了解，您应该获取初始鼠标位置（当upDownMovement变为真时）并将其用作参考。就像是

if (upDownMovement == true) {
  mouse_y_reference = mouse_y_reference || mouse.y;
  SELECTED.position.y += (mouse.y - mouse_y_reference) * scale;
} else {
  mouse_y_reference = null;
}

如果你想要更流畅的东西，你可以使用tween.js 之类的动画库来做类似的事情

mouse_y_reference = mouse_y_reference || mouse.y; // must be declared in a higher scope
var toY = SELECTED.position.y + (mouse.y - mouse_y_reference) * scale;
new TWEEN.Tween(SELECTED.position)
  .to({ y: toY }, 100) // adjust the duration here
  .easing( TWEEN.Easing.Elastic.InOut )
  .onComplete(function() {
    mouse_y_reference = null;
  })
  .start();