ThreeJS停止渲染

Question

我正在与ThreeJS合作的一个基本的3d场景，其中有OrbitControls。一切都很好，除了它使我的整个网站滞后，因为它是循环本身，即使当用户没有看到它。我想要一个函数，当满足某些条件时，我可以调用这个函数来启动和停止呈现(在本例中，用户不是在查看画布)。我有一个工作正常的开始函数，但是停止函数似乎不起作用，因为我的站点在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场景滞后我的整个应用程序后，它已经加载。只是不现实。

Answer 1

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

只需使用以下模式：

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

controls.addEventListener( 'change', render );

function render() {

    renderer.render( scene, camera );

}

three.js r.67号

Answer 2

我在场景中使用trackball控件，因此无法使用上面的解决方案(因为trackball控件在鼠标事件完成触发后继续更新)。

为了解决这个问题，我使用了：

function animate() {
  renderer.render(scene, camera);
  controls.update();
}
renderer.setAnimationLoop(animate);

它无限期地运行动画循环。要暂停动画，可以指定null作为动画循环：

renderer.setAnimationLoop(null);        // pause the animation

要恢复动画，只需再次传递动画循环：

renderer.setAnimationLoop(animate);     // resume the animation

Answer 3

完全停止呈现循环的另一种解决方案是降低每秒的帧速率，从而减少资源消耗。

这种方法是特别有用的，如果你需要在你的现场响应更新，而不一定是动画，但也需要恢复正常的速度，当你需要。

一个简单的setTimout()很好地实现了这一点。

var fps 10;

function render() {

   //reduce framerate
   setTimeout(()=>{

        requestAnimationFrame(render);

        //must be called to enable rotating
        controls.update();
        renderer.render(scene, camera);


   }, 1000/fps)

};