ThreeJS 停止渲染

我正在使用 ThreeJS 处理具有 OrbitControls 的基本 3d 场景。一切都很好，除了它导致我的整个网站滞后，因为即使用户没有看它，它也会自行循环。我想要一个函数，当满足某些条件时（在这种情况下，用户没有查看画布），我可以调用该函数来启动和停止渲染。我有一个启动功能，工作得很好，但停止功能似乎不起作用，因为在 ThreeJS 初始化后，我的网站速度慢得难以忍受。

我已经寻找并寻找这个问题的解决方案，并找到了几个“解决方案”，但无论出于何种原因，它们都不适用于我的应用程序。我的假设是这些解决方案来自旧版本的 ThreeJS。

这是我的 main.js 文件中的代码：

var scene, 
    camera, 
    controls,
    render,
    requestId = undefined;


function init() {
    scene = new THREE.Scene();
    var threeJSCanvas = document.getElementById("threeJS");
    camera = new THREE.PerspectiveCamera( 75, threeJSCanvas.width / threeJSCanvas.height, 0.1, 1000 );

    controls = new THREE.OrbitControls( camera );

    // Controls and Camera settings

    // Create Geometry.

}

function render() {
    requestId =  requestAnimationFrame(render);
    renderer.render(scene, camera);

}

function start() {
    render();
}

function stop() {
   window.cancelAnimationFrame(requestId);
   requestId = undefined;


}

在我的另一个 javascript 文件中，我的 pageChange 函数（这是一个多页应用程序）中有一个条件，如下所示：

if (page == 5) { // The page with the canvas on it
    if (!locationsRendered) {
    init();
    locationsRendered = true;
}
} else { // If the page is not the page with the canvas on it
    if (locationsRendered) {
        stop();
    }
}

locationsRendered之前在本地范围内的第二个 javascript 文件中进行了初始化。

任何帮助将不胜感激，因为我不能让这个简单的 3D 场景在加载后滞后于我的整个应用程序。这是不现实的。

如果您的场景是静态的，则没有理由进行动画循环。仅当相机因鼠标或触摸事件而移动时才需要重新渲染。

只需使用这个模式：

controls = new THREE.OrbitControls( camera, renderer.domElement );

controls.addEventListener( 'change', render );

function render() {

    renderer.render( scene, camera );

}

三.js r.67