Question

我正在使用Angular和Three.Js构建一个原型SPA来学习这两种技术。我有几个Angular模板可以通过导航选择，并显示不同的3D元素旋转。

立方体元素表现出奇怪的行为;当您导航到另一个选项卡然后向后导航时，其旋转速度会增加。其他3D元素没有发生这种情况，我无法弄清楚原因。

// CUBE ROTATION VALUES
var cubeRotationX = .005;
var cubeRotationY = .005;

// CUBE SIZE VALUE
var cubeSize = 1;

// LOAD A CUBE
var geometry = new THREE.BoxGeometry( cubeSize, cubeSize, cubeSize );
var material = new THREE.MeshPhongMaterial  ( { color: 0xEDEDED, } );
var cube = new THREE.Mesh( geometry, material );

// CUBE CHANGE SIZE FUNCTION
function changeCubeSize() {
    cubeSize = document.getElementById('size-selector').value;
}

// CUBE TOGGLE FUNCTION
function toggleCubeRotation() {
    if (cubeRotationX > 0) {
        cubeRotationX = 0;
        cubeRotationY = 0;
    } else {
        cubeRotationX = 0.005;
        cubeRotationY = 0.005;
    }
}

// RENDER
    function render() {
        requestAnimationFrame( render );
        cube.rotation.x += cubeRotationX;
        cube.rotation.y += cubeRotationY;
        renderer.setSize( width, height );
        renderer.render( scene, camera );
    }

显然，当远离，然后返回到立方体页面时，Angular再次运行此代码。

经过测试，我可以确认cubeRotationX和cubeRotationY是它们的正确值（0.005）。因此看起来循环来自cubeRotationX和cubeRotationY多次添加到cube.rotation.x和cube.rotation.y，但循环发生即使我特别禁止这两行不止一次运行：< / p>

if (typeof code_happened === 'undefined') {
        window.code_happened = true;
        render();
    } else {
        function reRender() {
            requestAnimationFrame( render );
            renderer.setSize( width, height );
            renderer.render( scene, camera );
        }
        reRender();
       }

说真的，我知道这很简单，但我不能为我的生活弄清楚。任何帮助是极大的赞赏。

Answer 1

正如2pha所建议的，在这种情况下，需要发生的事情就是调用

cancelAnimationFrame( id );

对于将来使用ThreeJs和Angular模板的任何人，我只是赞美我的“only-execute-once”函数：

if (typeof code_happened === 'undefined') {
        window.code_happened = true;
        render();
    } else {
        function reRender() {
            cancelAnimationFrame( cubeRender );
            cubeRender = requestAnimationFrame( render );
            renderer.setSize( width, height );
            renderer.render( scene, camera );
        }
        reRender();
       }

这样，当返回页面时，将取消现有渲染并创建一个新渲染。在离开模板时结束渲染可能更好，但据我所知，ThreeJs无论如何都不会在背景中渲染。

奇怪的JavaScript循环与Three.Js一起发生

1 个答案: