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();

实施垂直运动控制

1 个答案: