Javascript Three.js动画onClick将永远持续下去

目标

我正在尝试制作一个简单的相机放大动画，每次点击按钮时，它都会将相机放大X倍

当前进度

我现在已经在Three.js中对动画进行了编码，并且按钮运行脚本

function cameraZoomIn() {
      console.log("Camera Zoom In Function Clicked");
      camera.position.z -= 50;
      requestAnimationFrame( cameraZoomIn );
      render();
};

<input type="button" onclick="cameraZoomIn();" value="Zoom Camera In!" />

函数cameraZoomIn（）{ console.log（“单击相机放大功能”）； 摄像机位置z-=50； 请求动画帧（cameraZoomIn）； render（）； }; 问题

动画会一直运行，但会一直运行，正如单击“放大摄影机”按钮时在此处看到的那样-

更新1

---

如果我删除

requestAnimationFrame

，它只会运行一次，但会跳转到不在中间的位置。那么，为什么这会使动画自身重复呢

简单地说：你没有检查它是否应该停止

基本上你有一个循环，比如：

while(true) {
   cameraZoomIn();
}

页面处于视图中时，始终会调用并执行requestAnimationFrame（）

你需要建立一个支票

var intialz = camera.position.z;
var zoomfactor = 50;
function cameraZoomIn() {
  console.log("Camera Zoom In Function Clicked");
  camera.position.z -= zoomfactor;
  if(camera.position.z > (intialz - (zoomfactor * 10))) {// stop zooming at 10x zoom
      requestAnimationFrame( cameraZoomIn );
  }
  render();
};

---

如果它对你有帮助，你可以考虑接受和接受它。当然，我喜欢先测试它，然后再给我一个第二个修改我的例子，因为我意识到我假设初始相机Z是0。将其修改为从初始z值开始。可能会在你的应用程序中添加一个重置z的功能，或者通过反复按下按钮来允许增量缩放。谢谢，这么简单的修复！！你知道旋转一个物体的最好方法吗？如果你在那里找不到任何东西