如何在相机动画到达某个位置后停止使用三.js

Question

我有一小段代码，可以对相机进行动画处理，以便在单击时放大地球模型。如何在相机动画到达某个位置后停止它。

单击球体模型时，将调用渲染函数以启动相机动画循环。 相机位置从 20 开始并继续减小。 摄像机位置达到 5 后如何停止动画。

https://jsfiddle.net/diviseed/ve9qb2cx/10/

var domEvents = new THREEx.DomEvents(camera, renderer.domElement);
domEvents.addEventListener(earth, 'click', function(event){
console.log('you clicked on the earth');
alert("test");

var render = function (actions) {
renderer.render(scene, camera);
console.log(camera.position.z); // starts at 20 and reduces with every call
camera.position.z -= 0.1;
requestAnimationFrame( render );
};
render();
// cameraloop();

}, false)

现在，摄像机继续动画，不停地。我想在相机到达位置 5 后停止相机。

Answer 1

将 controls.minDistance 设置为 4.11(球体半径 + 相机近平面距离 + 一点软糖)(或任何您想要的最小距离)

https://jsfiddle.net/2nbgfkpy/

然后，在移动摄像机后，请确保调用 controls.update()，以便 OrbitControls 有机会在摄像机上强制执行其约束。

Stack Overflow is getting really stupid about posting requirements