Javascript 在一帧中移动具有约束的2个对象

我有两个对象，我希望它们有如下所示的运动：

现在我有了他们的3D模型，如stl，以及他们的偏移计算

我也可以将它们导入到一个框架中，但在那之后，我无法使用键盘按键来计算它们的移动。保持他们的姿势

我希望按下Q时，square元素按特定长度线性移动

旋转按R键时元件旋转特定角度

这里有两个问题：

1）对按键做出反应：

document.onkeypress = function(e) {
    if (e.charCode === 118) {

   }
};

您可以对

charCode

（ASCII）或

key

（'d'，'f'）做出反应
小提琴

2）在“边界”内旋转和移动

如果希望正方形沿圆柱体移动，请将其设为圆柱体的子对象

<a-cylinder>
  <a-box></a-box>
<a-cylinder>

---

感谢Piotr Adam Milewski，您使用了aframe的动画API，但我打算使用按键来启动运动。我认为这可以通过queryselector实现。我知道这些事件是如何被使用的，正如你上面提到的，但我主要不知道在它们里面写些什么。你能在小提琴中做到这一点吗？q移动一个实体，e移动另一个实体