three.js如何在用戶看不到3d空間時停止渲染？

Question

我正在做一個簡單的旋轉的地球渲染。到目前爲止這麼好，但我基本上想暫停當用戶不再查看呈現器是孩子的dom元素時的呈現，因爲該元素是頁面上的一種方式，並且有價值的資源是被用在他們不需要的地方。這裏就是我有這麼遠

window.addEventListener('scroll',() => { 
    let scrollPosition = document.body.scrollTop; 

    //element is almost about to be visible, time to start rendering 
    if (scrollPosition >= topOfElement - 200) { 
     if (everythingIsLoaded && !isRendering) { 
      render(); 
      console.log('render has been started'); 
     } else { 
      //wait until everythingIsLoaded is true 
     } 
    //element is not visible, stop rendering 
    } else { 
     //need to stop rendering here! 
     //this doesn't work, dunno how to do this 
     if (animationFrame) { 
      stopRendering(render); 
      console.log('render has been halted'); 
     } 
    } 
}); 

和我render()函數看起來像這 -

const render =() => { 
    animationFrame = requestAnimationFrame(render); 
    sphere.rotation.y += 0.001; 
    renderer.render(scene, camera); 
    isRendering = true; 
}; 

是有辦法停止當用戶不再能夠看到WebGL的渲染渲染區域？

我試圖做這樣的事情（你可以在上面的代碼中看到） -

var stopRendering = (af) => { 
    cancelAnimationFrame(af); 
    isRendering = false; 
}; 

但是這似乎並沒有真正停止渲染的。

Answer 1

window.cancelAnimationFrame接受由window.requestAnimationFrame返回的ID，在您的情況下，它是名爲animationFrame的變量。它與setTimeout和clearTimeout相同。

現在您正在向它傳遞一個函數的參考函數render()函數。這是很難跟蹤你所提供的代碼全局變量的使用，但你可能只想做：

if (animationFrame) { 
    stopRendering(animationFrame); 
} 

因爲在你的情況，你要指定由​​返回變量animationFrame的ID。