javascript - 如何使用 Three.js 在点击到达特定位置后停止相机动画

我有一小段代码，可以让相机在单击时放大地球模型。如何在到达特定位置后停止相机动画。

当您单击球体模型时，将调用渲染函数来启动相机动画循环。相机位置从 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 后停止它。

最佳答案

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

https://jsfiddle.net/2nbgfkpy/

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

Stack Overflow 对于发布要求变得非常愚蠢

关于javascript - 如何使用 Three.js 在点击到达特定位置后停止相机动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56966588/