一旦使用three.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