[英]ThreeJS Stop Rendering
我正在使用 ThreeJS 处理具有 OrbitControls 的基本 3d 场景。 一切都很好,除了它会导致我的整个网站滞后,因为即使用户没有在看它,它也会自行循环。 我想要一个函数,当满足某些条件时,我可以调用它来启动和停止渲染(在这种情况下,用户没有查看画布)。 我有一个可以正常工作的 start 函数,但是 stop 函数似乎不起作用,因为在 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
我在我的场景中使用了轨迹球控件,因此无法使用上面的解决方案(因为在鼠标事件完成触发后轨迹球控件会继续更新)。
为了解决这个问题,我使用了:
function animate() {
renderer.render(scene, camera);
controls.update();
}
renderer.setAnimationLoop(animate);
这将无限期地运行动画循环。 要暂停动画,可以指定null
作为动画循环:
renderer.setAnimationLoop(null); // pause the animation
要恢复动画,只需再次传递动画循环:
renderer.setAnimationLoop(animate); // resume the animation
完全停止渲染循环的另一种解决方案是降低每秒帧数,从而减少资源消耗。
如果您需要对场景进行响应式更新,但不一定要制作动画,但还需要在需要时恢复正常速度,则此方法特别有用。
一个简单的 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)
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.