ThreeJS停止渲染 [英] ThreeJS Stop Rendering

问题描述

我正在使用ThreeJS在具有OrbitControls的基本3d场景上进行工作.一切工作都很好，除了它使我的整个网站都停滞不前，因为即使用户不看它，它也会自我循环.我需要一个可以调用的函数，以便在满足某些条件时开始和停止渲染(在这种情况下，用户没有查看画布).我有一个启动功能正常工作，但是停止功能似乎不起作用，因为ThreeJS初始化后，我的网站运行缓慢.

I am working with ThreeJS on a basic 3d scene that has OrbitControls. Everything works great, except it causes my entire site to lag, as it is looping itself even when the user is not looking at it. I want a function that I can call to start and stop the rendering when certain conditions are met (in this case, the user isn't viewing the canvas). I have a start function that works just fine, but the stop function does not seem to be working, as my site goes unbearably slow after ThreeJS has initialized.

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

I have looked and looked for a solution to this problem, and have found a couple 'solutions', but for whatever reason they do not work with my application. My assumption is that these solutions are from old versions of ThreeJS.

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

Here is my code in my main.js file:

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函数(这是一个多页应用程序)内部有条件，如下所示:

In my other javascript file, there is a conditional inside of my pageChange function (this is a multipage app), that looks like the following:

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文件中初始化了.

locationsRendered is initialized earlier in this second javascript file in the local scope.

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

Any help would be much appreciated, as I can not let this simple 3D scene lag my entire app after it has been loaded. It's just not realistic.

推荐答案

如果场景是静态的，则没有理由进行动画循环.您只需在相机由于鼠标或触摸事件而移动时重新渲染.

If your scene is static, there is no reason for an animation loop. You only need to re-render when the camera moves due to a mouse or touch event.

只需使用以下模式:

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

controls.addEventListener( 'change', render );

function render() {

    renderer.render( scene, camera );

}

three.js r.67

three.js r.67

这篇关于ThreeJS停止渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！