时间戳

首页 > 解决方案 > 使用three.js点击到达某个位置后如何停止相机动画

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，我想停止相机。

标签： javascriptthree.js

解决方案

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

https://jsfiddle.net/2nbgfkpy/

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

Stack Overflow is getting really stupid about posting requirements

推荐阅读