Question

目标

我试图制作一个简单的相机放大动画，每次点击按钮时都会将相机放大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!" />

问题

动画运行但是它会永远运行，因为您可以在单击“变焦相机”按钮时看到此处 - http://www.midlandgates.co.uk/three.js-master/examples/webgl_loader_obj.html

更新1

如果我删除requestAnimationFrame它只会运行一次，但会跳转到不在那里的位置。那为什么这会让动画重演呢？

Answer 1

简单地说：你不会检查它是否应该停止。

基本上你有一个循环：

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

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

1 个答案: